<template>
  <MOSTY.PageTree :pageTitle="'危险化学品列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section class="button">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </section>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :tableData="data.tableData" :table-columns="data.tableColumn" :tableloading="tableloading"
          :tableConfiger="data.tableConfiger">
          <template #maxStorage="{ row }">
            <span>{{ row.maxStorage || 0 }}{{ row.maxStorageUnit }}</span>
          </template>
          <template #used="{ row }">
            <span>{{ row.used || 0 }}{{ row.usedUnit }}</span>
          </template>
          <template #majorHazard="{ row }">
            <dict-tag :options="D_BZ_SF" :value="row.majorHazard" :tag="false" />
          </template>
          <template #chemicalDirectory="{ row }">
            <dict-tag :options="D_BZ_SF" :value="row.chemicalDirectory" :tag="false" />
          </template>
          <template #chemicalProcess="{ row }">
            <dict-tag :options="D_BZ_SF" :value="row.chemicalProcess" :tag="false" />
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <Compass />
              </el-icon>查看</span>
            <span class="operedit" @click="editInfo(row)">
              <!-- v-if="row.orgcode == listQuery.orgcode" -->
              <el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <!-- v-if="row.orgcode == listQuery.orgcode" -->
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { postApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const emit = defineEmits("changePage");
const loadingShow = ref(false);
const searchArr = reactive([
  {
    showType: "input",
    prop: "name",
    placeholder: "请输入危险化学品名称"
  }
]);
const data = reactive({
  deptname: "",
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "危险化学品名称",
      prop: "name"
    },
    {
      title: "最大存储量",
      prop: "maxStorage",
      slot: true
    },
    {
      title: "年使用量",
      prop: "used",
      slot: true
    },
    {
      title: "是否构成重大危险源",
      prop: "majorHazard",
      slot: true
    },
    {
      title: "是否属重点监管危险化学名录",
      prop: "chemicalDirectory",
      slot: true
    },
    {
      title: "是否属重点监管危险化工工艺",
      prop: "chemicalProcess",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],


});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.name = obj.name;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};

//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    name: "危险化学品名称",
    maxStorage: "最大存储量",
    used: "年使用量",
    majorHazard: "是否构成重大危险源",
    chemicalDirectory: "是否属重点监管危险化学名录",
    chemicalProcess: "是否属重点监管危险化工工艺"
  };
  const params = {
    pageCurrent: 1,
    pageSize: 10999,
    orgcode: listQuery.orgcode
  };
  postApi(params, "/mosty-jcgl/HazardousChemicals/queryHazardousChemicals").then(
    (res) => {
      if (res.records) {
        let data = res.records;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            data[i].majorHazard = proxy.$getDictVal(
              data[i].majorHazard,
              D_BZ_SF
            );
            data[i].chemicalProcess = proxy.$getDictVal(
              data[i].chemicalProcess,
              D_BZ_SF
            );
            data[i].chemicalDirectory = proxy.$getDictVal(
              data[i].chemicalDirectory,
              D_BZ_SF
            );
          }
          let tablename = "危险化学品列表.xlsx";
          exportXlsx(title, data, '危险化学品列表', tablename);
        }
      }
    }
  ).finally(() => {
    loadingShow.value = false;
  });
};
const tableloading = ref(false);
function getTableData() {
  data.deptname = getItem("deptId").ssbmid;
  tableloading.value = true;
  postApi(
    listQuery,
    `/mosty-jcgl/HazardousChemicals/queryHazardousChemicals`
  ).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      listQuery.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//新增
const addInfo = () => {
  let arr = {
    title: "新增危险化学品",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "Details", arr);
};
//修改
const editInfo = (row) => {
  let arr = {
    title: "修改危险化学品",
    saveBtnShow: true,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};
//查看
const seeInfo = (row) => {
  let arr = {
    title: "危险化学品详情",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};

//删除
const handledelete = (row) => {
  postApi(
    {},
    "/mosty-jcgl/HazardousChemicals/deleteHazardousChemicalsOne/" + row.id
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};
onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>