<template>
  <MOSTY.PageTree :pageTitle="'安全风险点销号备案记录清单'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <div class="btnBox"> <el-button style="margin-bottom: 5px;" type="primary" @click="onloadExcel"
          v-loading="exportLoading">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button></div>
    </template>
    <template #table>
      <div class="eltab99">
        <el-table ref="multipleTableRef" :data="tableData" height="100%" stripe style="width: 100%" border :fit="true">
          <el-table-column type="index" label="序号"  align="center" />
          <el-table-column label="风险单元名称" property="orgname"></el-table-column>
          <el-table-column label="单元类型" property="orgname"></el-table-column>
          <el-table-column label="风险描述" property="orgname"></el-table-column>
          <el-table-column label="原始风险等级" property="orgname"></el-table-column>
          <el-table-column label="销号原因" property="orgname"></el-table-column>
          <el-table-column label="申请人" property="orgname"></el-table-column>
          <el-table-column label="申请时间" property="orgname"></el-table-column>
          <el-table-column label="安全部门意见" property="orgname"></el-table-column>
          <el-table-column label="检查类型">
            <template #default="{ row }">
              <dict-tag :options="D_BZ_YHLX" :value="row.checktype" :tag="false" />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200" align="center">
            <template #default="scope">
              <span class="operesee" @click="handleinfo(scope.row)"><el-icon>
                  <Compass />
                </el-icon>详情</span>
              <span class="operesee" @click="handleedit(scope.row)"><el-icon>
                  <Edit />
                </el-icon>审核</span>
              <span class="operesee" @click="handledelete(scope.row)"><el-icon>
                  <Download />
                </el-icon>导出</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <div v-if="fxfjgkinfoshow" class="dialog-box">
    <fxbajlinfo :formData="itemList" :checktype="checktype" @close="closefn" />
  </div>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, nextTick, getCurrentInstance } from "vue";
import fxbajlinfo from "./fxbajlinfo.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { dateFormat } from "@/utils/tools";
import { getSysDictByCode } from "@/api/sysDict";
import { exportXlsx } from "@/excel/Export2Excel.js";
const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_BZ_FXDYLX, D_BZ_FXDJS } = proxy.$dict("D_BZ_YHLX", "D_BZ_FXDYLX", "D_BZ_FXDJS");
const unitType = ref([]);
const gytype = ref([]);
const xztype = ref([]);
const searchArr = reactive([
  {
    showType: "select",
    prop: "Type1",
    width: '250px',
    options: unitType,
    placeholder: '请选择风险单元类型',
  },
  {
    showType: "select",
    prop: "Type2",
    width: '250px',
    options: gytype,
    placeholder: '请选择固有风险等级',
  },
  {
    showType: "select",
    prop: "Type3",
    width: '250px',
    options: xztype,
    placeholder: '请选择现状风险等级',
  },
  {
    showType: "input",
    prop: "keywords1",
    width: '250px',
    placeholder: '请输入固有风险描述',
  },
  {
    showType: "input",
    prop: "keywords2",
    width: '250px',
    placeholder: '请输入现状风险描述',
  },
  {
    showType: "year",
    prop: "year",
    width: '250px',
    defaultVal: String(dateFormat({ type: "year", time: new Date() }))
  }
])
const tableData = ref([]);
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.ssbmid = val.id;
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  ssbmid: "",
  orglevel: "",
  year: String(dateFormat({ type: "year", time: new Date() }))
});
const fxfjgkinfoshow = ref(false);
const itemList = ref({});
onMounted(() => {
  Promise.all([
    getSysDictByCode({ dictCode: "D_BZ_FXDYLX" }),
    getSysDictByCode({ dictCode: "D_BZ_FXDJS" }),
    getSysDictByCode({ dictCode: "D_BZ_FXDJS_XY" })
  ]).then(([unitTypeRes, gytypeRes, xztypeRes]) => {
    if (unitTypeRes) {
      unitType.value = unitTypeRes.itemList.map(item => ({
        label: item.zdmc,
        value: item.dm
      }));
    }
    if (gytypeRes) {
      gytype.value = gytypeRes.itemList.map(item => ({
        label: item.zdmc,
        value: item.dm
      }));
    }
    if (xztypeRes) {
      xztype.value = xztypeRes.itemList.map(item => ({
        label: item.zdmc,
        value: item.dm
      }));
    }
  }).catch(error => {
    console.error('获取字典数据失败:', error);
  });
});
// 获取表格数据
const getTableData = () => {
  getApi(listQuery.value, "/mosty-jcgl/jctj/gwCheckList").then((res) => {
    res.records.forEach(item => {
      item.checktype = '1'
    })
    tableData.value = res.records;
    listQuery.value.total = res.total;
  })
};
//页码发生变化
const handleCurrentChange = val => {
  listQuery.value.pageCurrent = val
  getTableData()
}
//查询条数发生变化
const handleSizeChange = val => {
  listQuery.value.pageSize = val
  getTableData()
}

//查询 
const onSearch = obj => {
  listQuery.value.year = obj.year
  listQuery.pageCurrent = 1;
  getTableData();
}
const checktype = ref('')
//点击详情
function handleinfo (index, row) {
  fxfjgkinfoshow.value = true;
  itemList.value = { ...row };

}
const closefn = () => {
  fxfjgkinfoshow.value = false;
}
//导出Excel
function onloadExcel () {
  exportLoading.value = true
  let title = {
    yhCategory: "风险单元类别",
    lev1: "一级单元",
    lev2: "二级单元",
    checklibName: "单元名称",
    itemName: "排查项描述",
    yhNote: "隐患描述",
    yhLv: "隐患等级",
    isPic: "是否必须上传图片",
    criterion: "判断依据",
  };

  let obj = {
    pageCurrent: 1,
    pageSize: 100000,
    checklibId: listQuery.value.checklibId
  }
  getApi(obj, "/mosty-jcgl/controlLib/getPageList").then((res) => {
    if (res) {
      let data = res.records;
      if (data) {
        // =============== 修改开始：使用项目字典工具 ===============
        const processedData = data.map(item => {
          const newItem = { ...item };
          // 处理parentList数据
          if (item.parentList && Array.isArray(item.parentList)) {
            const level1 = item.parentList.find(p => p.level === 1);
            const level2 = item.parentList.find(p => p.level === 2);

            newItem.lev1 = level1 ? level1.name : '';
            newItem.lev2 = level2 ? level2.name : '';
          } else {
            newItem.lev1 = '';
            newItem.lev2 = '';
          }

          // 处理固有风险等级类别字典转换
          if (item.yhCategory && D_BZ_FXDJS.value) {
            // 在字典数组中查找对应的label
            const dictItem = D_BZ_FXDJS.value.find(dict => dict.value === item.yhCategory);
            newItem.yhCategory = dictItem ? dictItem.label : item.yhCategory;
          } else {
            newItem.yhCategory = item.yhCategory || '';
          }

          // 同样现状风险等级等级字典转换
          if (item.yhLv) {


            if (D_BZ_FXDJS_XY.value) {
              const levelDict = D_BZ_FXDJS_XY.value.find(dict => dict.value === item.yhLv);
              newItem.yhLv = levelDict ? levelDict.label : item.yhLv;
            }
          }
          return newItem;
        });
        // =============== 修改结束 ===============

        let tablename = `风险分级管控措施清单.xlsx`;
        exportXlsx(title, processedData, `风险分级管控措施清单`, tablename);
        exportLoading.value = false
      }
      exportLoading.value = false
    }
  }).finally(() => {
    exportLoading.value = false
  });
}
</script>

<style lang="scss" scoped>
.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

//表格高度=》加分页,查询，新增
.eltab99 {
  height: calc(100vh - 480px) !important;
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
