<template>
  <MOSTY.PageTree :pageTitle="'危险物品处置列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <!-- v-if="editObj.deptname == listQuery.orgcode" -->
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section class="eltab7">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true">
          <template #goodscompany="{ row }">
            <dict-tag v-if="row.goodscompany" :options="D_BZ_WPDW" :value="row.goodscompany" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #abandonedtype="{ row }">
            <dict-tag v-if="row.abandonedtype" :options="D_BZ_CZFS" :value="row.abandonedtype" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #abandonedly="{ row }">
            <dict-tag v-if="row.abandonedly" :options="D_BZ_FQLY" :value="row.abandonedly" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <!-- <span class="operedit" @click="exitInfo(row, 'edit')">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span> -->
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <!-- v-if='isAuth' -->
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleSee(row, 'see')"><el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>

    </template>
  </MOSTY.PageTree>
  <!-- 详情弹出框 -->
  <el-dialog v-model="comprehensiveShow" :title="editObj.title" width="1000px" :before-close="CloseEvent" :inline="true"
    :rules="rules">
    <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="editObj.editObj" :inline="true"
      :rules="rules" :disabled='!saveBtnShow' style="display: block;">
      <el-form-item label="废弃来源:" prop="abandonedly">
        <el-select v-model="editObj.editObj.abandonedly" style="width: 250px" @change="changely" clearable>
          <el-option v-for="item in D_BZ_FQLY" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="废弃方式:" prop="abandonedtype">
        <el-select v-model="editObj.editObj.abandonedtype" style="width: 250px" clearable>
          <el-option v-for="item in D_BZ_CZFS" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="物品名称:" prop="goodsname">
        <el-select v-model="editObj.editObj.goodsname" style="width: 250px" @change="changewp" clearable>
          <el-option v-for="item in wplist" :key="item.id" :label="item.grantname ? item.grantname : item.goodsname"
            :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="物品型号:" prop="goodsmodel">
        <el-input v-model="editObj.editObj.goodsmodel" disabled clearable style="width: 250px" />
      </el-form-item>
      <el-form-item label="物品规格:" prop="goodsspec">
        <el-input v-model="editObj.editObj.goodsspec" clearable disabled style="width: 250px" />
      </el-form-item>
      <el-form-item label="物品单位:" prop="goodscompany">
        <el-select v-model="editObj.editObj.goodscompany" style="width: 250px" disabled clearable>
          <el-option v-for="item in D_BZ_WPDW" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="库存数量:" prop="goodsnumber" v-if="editObj.editObj.abandonedly == '1' && saveBtnShow">
        <el-input v-model="editObj.editObj.goodsnumber" disabled clearable style="width: 250px" />
      </el-form-item>
      <el-form-item label="废弃数量:" prop="abandonednumber">
        <el-input v-model="editObj.editObj.abandonednumber" type='number' clearable style="width: 250px" />
      </el-form-item>
      <el-form-item label="处置人:" v-if="isEdit">
        <el-input v-model="editObj.editObj.abandonedusername" clearable style="width: 250px" />
      </el-form-item>
      <el-form-item label="处置部门:" v-if="isEdit">
        <el-input v-model="editObj.editObj.abandoneddeptname" clearable style="width: 250px" />
      </el-form-item>

      <el-form-item label="备注:">
        <el-input v-model="editObj.editObj.bz" clearable style="width: 660px" />
      </el-form-item>
      <el-form-item label="附件信息:">
        <MOSTY.Upload :widthNumber="670" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
          :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="editObj.editObj.file"
          :showinput="true" :delrow="delrow"></MOSTY.Upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button style="margin-left: 10px" type="primary" @click="handleSave(ruleFormRef)" v-if="saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import * as rule from "@/utils/rules.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_BZ_CZFS, D_BZ_WPDW, D_BZ_FQLY } = proxy.$dict(
  "D_BZ_CZFS",
  "D_BZ_WPDW",
  "D_BZ_FQLY"
);
// 数据
const comprehensiveShow = ref(false);
const searchArr = reactive([
  {
    showType: "input",
    prop: "goodsname",
    width: '250px',
    placeholder: "请输入物品名称进行查询"
  }
])
const tableColumn = reactive([
  {
    title: "物品名称",
    prop: "goodsname",
  },
  {
    title: "物品型号",
    prop: "goodsmodel",
  },
  {
    title: "物品规格",
    prop: "goodsspec",
  },
  {
    title: "废弃数量",
    prop: "abandonednumber",
  },
  {
    title: "物品单位",
    prop: "goodscompany",
    slot: true
  },
  {
    title: "废弃方式",
    prop: "abandonedtype",
    slot: true
  },
  {
    title: "废弃来源",
    prop: "abandonedly",
    slot: true
  },
  {
    title: "处置人",
    prop: "abandonedusername"
  },
  {
    title: "处置部门",
    prop: "abandoneddeptname"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
//查询条件
const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  editObj: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgcode: ""
});
const delrow = ref({}); //删除文件列表
//规则校验
const rules = reactive({
  abandonedly: [
    { required: true, message: "废弃来源不能为空", trigger: "blur" }
  ],
  abandonedtype: [
    { required: true, message: "废弃方式不能为空", trigger: "blur" }
  ],
  goodsname: [{ trigger: "blur", required: true, message: "物品名称不能为空" }],
  goodsmodel: [{ trigger: "blur", required: true, message: "物品型号不能为空" }],
  goodsspec: [{ trigger: "blur", required: true, message: "物品规格不能为空" }],
  goodscompany: [{ trigger: "blur", required: true, message: "物品单位不能为空" }],
  ...rule.intRule({ validator: true, require: true }, "goodsnumber"),
  ...rule.intRule({ validator: true, require: true }, "abandonednumber"),
});
const wplist = ref([]);
const saveBtnShow = ref(true);
const isEdit = ref(false);
const ruleFormRef = ref();

onMounted(() => {
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};

const onSearch = obj => {
  listQuery.goodsname = obj.goodsname;
  listQuery.pageCurrent = 1;
  getListData()
}
//删除
function handledelete(row) {
  postApi({}, `/mosty-jcgl/dangergoodsAbandoned/del/${row.id}`).then((res) => {
    ElMessage.success("删除成功！");
    getListData();
  })
}
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  postApi(
    listQuery,
    `/mosty-jcgl/dangergoodsAbandoned/queryDangergoodsAbandoned`
  ).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//弹窗关闭
const CloseEvent = () => {
  if (saveBtnShow.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        editObj.editObj = {};
        wplist.value = [];
        ruleFormRef.value.clearValidate();
        comprehensiveShow.value = false;
        getListData();
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    editObj.editObj = {};
    wplist.value = [];
    ruleFormRef.value.clearValidate();
    comprehensiveShow.value = false;
    getListData();
  }

};
//详情
const getmain = (id) => {
  if (id) {
    getApi(
      {},
      "/mosty-jcgl/dangergoodsAbandoned/getDangergoodsAbandonedById/" + id
    ).then((res) => {
      if (res) {
        editObj.editObj = res;
        changely(res.abandonedly);
        editObj.goodsname = editObj.editObj.goodsname;
        comprehensiveShow.value = true;
      }
    });
  }
};

//新增
function addInfo() {
  saveBtnShow.value = true;
  editObj.editObj = {};
  wplist.value = [];
  comprehensiveShow.value = true;
  isEdit.value = false;
  editObj.title = "危险物品废弃新增";
}
//详情
function handleSee(row) {
  editObj.title = "危险物品废弃详情";
  saveBtnShow.value = false;
  isEdit.value = true;
  getmain(row.id);

}
//修改
function exitInfo(row) {
  editObj.title = "危险物品废弃详情";
  saveBtnShow.value = true;
  isEdit.value = false;
  getmain(row.id);


}



//根据物品来源查询物品表
const changely = (val) => {
  if (val == "1") {
    getApi(
      {},
      "/mosty-jcgl/dangergoodsPurchaseChild/queryDangergoodsByOrgcode"
    ).then((res) => {
      if (res) {
        wplist.value = res;
      }
    });
  }
  if (val == "2") {
    getApi(
      {},
      "/mosty-jcgl/dangergoodsGrant/queryDangergoodsGrantByOrgcode"
    ).then((res) => {
      if (res) {
        wplist.value = res;
      }
    });
  }
};
//选择物品
const changewp = (val) => {
  editObj.editObj.goodsid = val;
  wplist.value.forEach((item) => {
    if (item.id == val) {
      editObj.editObj.goodsnumber = item.goodsnumber;
      editObj.editObj.goodsname = item.grantname ? item.grantname : item.goodsname;
      editObj.editObj.goodsmodel = item.goodsmodel;//规格
      editObj.editObj.goodsspec = item.goodsspec;//型号
      editObj.editObj.goodscompany = item.goodscompany;//单位
    }
  });
};

// 保存
const handleSave = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      editObj.editObj.file = editObj.editObj.file ? editObj.editObj.file.toString() : "";
      if (editObj.editObj) {
        if (editObj.title == "危险物品废弃新增") {
          postApi(
            editObj.editObj,
            "/mosty-jcgl/dangergoodsAbandoned/addDangergoodsAbandonedOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              comprehensiveShow.value = false;
              editObj.editObj = {};
              wplist.value = [];


              getListData();
            })
        }
        if (editObj.title == "危险物品废弃修改") {
          postApi(
            editObj.editObj,
            "/mosty-jcgl/dangergoodsAbandoned/updateDangergoodsAbandoned"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              comprehensiveShow.value = false;
              editObj.editObj = {};
              wplist.value = [];


              getListData();
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};


</script>

<style lang="scss" scoped></style>