<template>
  <div>
    <MOSTY.PageTree :pageTitle="'风险分级管控'" :searchType="'01'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="onloadExcel" v-loading="loadingShow">
            <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 label="序号" type="index" align="center" />
            <el-table-column label="固有风险" property="riskcell">
              <el-table-column label="风险描述" property="description" />
              <el-table-column label="可能产生的后果" property="consequense" />
              <el-table-column label="S风险严重程度" property="sscore" />
              <el-table-column label="风险等级" property="orgname">
                <template #default="{ row }">
                  <dict-tag :options="D_BZ_FXDJS" :value="row.type" :tag="false" />
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="现状风险" property="riskcell">
              <el-table-column label="现有控制措施" property="objname" />
              <el-table-column label="可能存在的风险隐患" property="orgname" />
              <el-table-column label="风险等级" property="orgname" />
            </el-table-column>
            <el-table-column label="风险分级管控措施策划" property="riskcell">
              <el-table-column label="管控等级" property="objname" />
              <el-table-column label="是否保持原措施" property="orgname" />
              <el-table-column label="新增措施" property="orgname" />
              <el-table-column label="计划完成时间" property="orgname" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="scope">
                <span class="operesee" @click="handleedit(scope.row)"><el-icon>
                    <EditPen />
                  </el-icon>编辑</span>
                <span class="operesee" @click="handleinfo(scope.row)"><el-icon>
                    <Compass />
                  </el-icon>详情</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handledelete(row, $index)">
                  <template #reference>
                    <span class="operdel" size="small">
                      <el-icon>
                        <Delete />
                      </el-icon>
                      删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 详情 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <fjgkinfo @close="closeinfo" :id="id" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, watch, nextTick, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { filterYear,filterqx } from "@/utils/auth.js";
import { getItem } from "@/utils/storage";
import fjgkinfo from "./component/fjgkinfo.vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_JCBZPL, D_BZ_FXLX, D_BZ_FXDJS } = proxy.$dict("D_BZ_JCBZPL", "D_BZ_FXLX", "D_BZ_FXDJ");
/** 是否安全部门,领导班子 */
const isAqbmOrLdBz = ref(filterqx('isaqbm') === '1' || filterqx('isldbz') === '1')
const dept= ref(getItem('deptId'))
// 数据
const comprehensiveShow = ref(false);
const tableloading = ref(false);
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
]);
const id = ref(null)
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  year: new Date().getFullYear()
});
onMounted(() => { });

//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  getTableData();

};
watch(() => listQuery.year,
  () => {
    listQuery.pageCurrent = 1;

  }
)
//查询
function onSearch (obj) {
  listQuery.year = obj.year;
  listQuery.objname = obj.objname;
  listQuery.pageCurrent = 1;
  getTableData();

}
function getTableData () {
  tableloading.value = true;
  getApi(listQuery, '/mosty-jcgl/dangerPlanlist/getPageList').then(res => {
    tableData.value = res.records;
    tableData.value.forEach(item => {
      item.jcpl = item.checkrate && item.checkrate != 'none' ? item.checkrate + '_' + item.checkratecount : null
    })
    listQuery.total = res.total;
    listQuery.pageSize = res.size;

  }).finally(() => {
    tableloading.value = false;
  })
}
//查看
const handleedit = (row) => {
  id.value = row.id;
  comprehensiveShow.value = true
};
//详情
const handleinfo = (row) => {
  id.value = row.id;
  comprehensiveShow.value = true
};
const closeinfo = () => {
  comprehensiveShow.value = false;
  getTableData();
};
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
const loadingShow = ref(false)
//导出Excel
function onloadExcel () {
  let title = {
    shortid: '编号',
    riskcell: '风险单位',
    type: '风险类型',
    objname: '辨识区域',
    jcpls: '检查频率',
    dangerDescription: '风险描述',
    // controlname: '管控措施',
    risklevels: '风险等级',
  }
  let obj = { ...listQuery }
  obj.pageSize = 100000
  loadingShow.value = true
  getApi(obj, '/mosty-jcgl/identify/getBsPageList').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_TB_SBYHLB.value) {
            // 在字典数组中查找对应的label
            const dictItem = D_TB_SBYHLB.value.find(dict => dict.value === item.yhCategory);
            newItem.yhCategory = dictItem ? dictItem.label : item.yhCategory;
          } else {
            newItem.yhCategory = item.yhCategory || '';
          }

          // 同样处理隐患等级字典转换
          if (item.yhLv) {
            // 假设隐患等级字典名称为 D_TB_YHDJ

            if (D_DBZ_YHDJ.value) {
              const levelDict = D_DBZ_YHDJ.value.find(dict => dict.value === item.yhLv);
              newItem.yhLv = levelDict ? levelDict.label : item.yhLv;
            }
          }
          if (item.isPic) {
            if (NSFBXSCTP.value) {
              const picDict = NSFBXSCTP.value.find(dict => dict.value === item.isPic);
              newItem.isPic = picDict ? picDict.label : item.isPic;
            }
          } else {
            newItem.isPic = item.isPic || '';
          }

          return newItem;
        });
        // =============== 修改结束 ===============

        let tablename = `隐患排查标准库.xlsx`;
        exportXlsx(title, processedData, `隐患排查标准库`, tablename);
        exportLoading.value = false
      }
      exportLoading.value = false
    }
  }).catch(err => {
    loadingShow.value = false
  })
}

</script>

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

.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);
    }
  }
}


.right-box {
  display: flex;
}

.fxdjspan {
  display: inline-block !important;
  width: 100px;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}

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