<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" v-if="isShow">
        <div class="title">
          <div style="display: flex; align-items: center">
            <span style='margin-left:10px;' v-if="iconChange">综合检查分析</span>
          </div>
        </div>
        <div class="treeBox">
          <div :class="tab == 'D' ? 'bg' : ''" @click="changetab('D')">点({{ dian }})</div>
          <div :class="tab == 'X' ? 'bg' : ''" @click="changetab('X')">线({{ xian }})</div>
          <div :class="tab == 'M' ? 'bg' : ''" @click="changetab('M')">面({{ mian }})</div>
        </div>
      </div>

      <!--  -->
      <div class="right">
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <div class="title">隐患列表</div>
          <div class="btnBox" style="display: flex">
            <el-input v-model="rightListQuery.pitfallDescribe" placeholder="请输入隐患描述进行查询" clearable
              style="width: 250px;" />
            <el-button type="primary" @click="addUserHander">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
            <!-- <el-button @click="comprehensiveShow = true" type="primary">基础类检查模板配置</el-button> -->
            <el-button type="primary" v-if="tab == 'D'" @click="onloadExcel" v-loading="loadingShow">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>导出表格</span>
            </el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" v-if="tab == 'D'" :data="tableData" height='72vh' stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="隐患描述" property="pitfallDescribe" show-overflow-tooltip></el-table-column>

            <el-table-column label="所属单位" property="becheckedOrgname" show-overflow-tooltip></el-table-column>
            <el-table-column label="所属部门" prop="belongDeptname" show-overflow-tooltip></el-table-column>
            <el-table-column label="被检查场所" property="siteName" show-overflow-tooltip></el-table-column>
            <el-table-column label="隐患级别" property="pitfallLevel">
              <template #default="{ row }">
                <dict-tag :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false" />
              </template>
            </el-table-column>
            <el-table-column label="状态" property="sendStatus">
              <template #default="{ row }">
                <span v-if="row.sendStatus == '0'">未下发</span>
                <span v-else-if="row.sendStatus == '1'">已下发整改</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <span class="operesee" @click="handleSee(row)" v-if="row.sendStatus == '1'"><el-icon>
                    <Compass />
                  </el-icon>查看进度</span>
                <span class="operedit" @click="handlezgsz(row)" v-if="row.sendStatus == '0'"><el-icon>
                    <EditPen />
                  </el-icon>
                  整改设置
                </span>

              </template>
            </el-table-column>
          </el-table>
          <el-table ref="multipleTableRef" v-if="tab == 'X'" height='72vh' :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="隐患描述" property="pitfallDescribe" show-overflow-tooltip></el-table-column>
            <el-table-column label="隐患级别" prop="pitfallLevel">
              <template #default="{ row }">
                <dict-tag :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false" />
              </template>
            </el-table-column>
            <!-- <el-table-column label="类型" property="classType">
              <template #default="{ row }">
                <span v-if="row.classType == 'J'">基础类</span>
                <span v-if="row.classType == 'X'">现场类</span>
              </template>
            </el-table-column> -->
            <el-table-column label="涉及单位" prop="countryName" show-overflow-tooltip></el-table-column>
            <el-table-column label="隐患数量" property="pitfallCount" show-overflow-tooltip></el-table-column>
            <el-table-column label="归口部门" property="sendDeptname" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="row.sendDeptname">{{ row.sendDeptname }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="控制措施" property="reformMeasure">
              <template #default="{ row }">
                <span v-if="row.reformMeasure">{{ row.reformMeasure }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <span class="operesee" @click="handlegkbm(row)" v-if="row.reformStatus == '0'"><el-icon>
                    <Compass />
                  </el-icon>设置归口部门</span>
                <popperConfirm :ids="row.id" v-if="row.reformStatus === '1'" delContent="下发" delTitle="是否下发"
                  @isNot="isXF">
                </popperConfirm>
                <span class="operdel" v-if="row.reformStatus == '2'">
                  等待归口部门制定措施
                </span>
                <span class="operesee" @click="handlezgxq(row)" v-if="row.reformStatus == '3'"><el-icon>
                    <Compass />
                  </el-icon>整改详情</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table ref="multipleTableRef" v-if="tab == 'M'" height='72vh' :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="隐患描述" property="pitfallDescribe" show-overflow-tooltip></el-table-column>
            <el-table-column label="隐患级别" prop="pitfallLevel">
              <template #default="{ row }">
                <dict-tag :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false" />
              </template>
            </el-table-column>
            <el-table-column label="涉及单位数量" prop="countryCount"></el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="{ row }">
                <popperConfirm :ids="row.id" v-if="row.reformStatus === '0'" delContent="下发" delTitle="是否下发"
                  @isNot="isNot">
                </popperConfirm>
                <span class="operdel" v-if="row.reformStatus == '2'">
                  等待安全部门制定整改措施
                </span>
                <span class="operesee" @click="handlezgxq(row)" v-if="row.reformStatus == '3'"><el-icon>
                    <Compass />
                  </el-icon>整改详情</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="rightListQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]"
              :page-size="rightListQuery.pageSize" layout="total, prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </div>

      </div>
      <div class="dialog-box" v-if="yhjdShow">
        <!-- <Danger @changePage="changePage" :editObj="editObj.editObj"></Danger> -->
        <Ckyhjd @changePage="changePage" :editObj="editObj.editObj" />
      </div>

      <!-- 整改设置 -->
      <ZgjyDio :addDiaShow="addDiaShow" :type="type" :title="title" :Rowobj="Rowobj" @changeAddVi="changeAddVi">
      </ZgjyDio>
      <!-- 综合编辑 -->
      <div v-if="comprehensiveShow" class="dialog-box">
        <Zhbj @close="close" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, watch } from "vue";
import ZgjyDio from "../components/zhjc/ZgjyDio.vue";
import popperConfirm from "../components/popperConfirm.vue";
import Ckyhjd from "./components/ckyhjd.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import Zhbj from "./zhbj.vue";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import * as XLSX from "xlsx";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const isShow = ref(store.state.isShowshjcd)
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { D_DBZ_YHDJ } = proxy.$dict("D_DBZ_YHDJ");
const bigHeight = ref(); //整个高度
const tjId = ref("");
const type = ref('01')
const yhjdShow = ref(false)
const Rowobj = ref({})
const xqId = ref("");
const loadingShow = ref(false)
const editObj = reactive({
  editObj: null
})
const dian = ref(0)
const xian = ref(0)
const mian = ref(0)
const tab = ref('D')
const tableData = ref([
]);
const total = ref(0);
const addDiaShow = ref(false);
// 树的展开与折叠
const iconChange = ref(true);
const rightListQuery = ref({
  pageSize: 10,
  pageCurrent: 1,
  dxmType: 'D'

});
const comprehensiveShow = ref(false);
const seeData = ref({});
// 控制新增与检查配置修改的标题
const title = ref("");
//点击事件
function changetab(val) {

  yhjdShow.value = false;
  addDiaShow.value = false;
  comprehensiveShow.value = false
  tab.value = val
  rightListQuery.value.dxmType = val
  tableData.value = []
  getTableData();
}
// 查询接口
const addUserHander = () => {
  rightListQuery.value.pageCurrent = 1;
  getTableData();
};
function changePage(e) {
  yhjdShow.value = false
}
onMounted(() => {
  isShow.value = store.state.isShowshjcd
  let zhjcid = route.query.zhjcId ? route.query.zhjcId : store.state.zhjcId
  getCount(zhjcid)
  bigHeightFn();
  getTableData();
});
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

//统计点线面的数量
function getCount(zhjcId) {
  getApi({ zhjcId }, '/mosty-jcgl/overallCheckPitfallHz/dxmCount').then(res => {
    if (res) {
      dian.value = res.D
      xian.value = res.X
      mian.value = res.M
    }
  })
}

// 获取统计【点、线、面】隐患列表查询
const getTableData = () => {
  rightListQuery.value.overallId = route.query.zhjcId ? route.query.zhjcId : store.state.zhjcId
  getApi(rightListQuery.value, "/mosty-jcgl/overallCheckPitfallHz/getDxmPage").then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};

//查看进度
const handleSee = (row) => {
  editObj.editObj = row
  yhjdShow.value = true;

};
//整改设置
const handlezgsz = (row) => {
  title.value = '整改建议';
  type.value = '01'
  Rowobj.value = row
  addDiaShow.value = true
};
//设置归口部门
function handlegkbm(row) {
  title.value = '归口部门设置'
  type.value = '02'
  Rowobj.value = row
  addDiaShow.value = true

}
//整改详情
function handlezgxq(params) {
  router.push('/fxgk/jcss/zhjczgqk?zhjcId=' + params.id)
}
//下发	线-下发到归口部门
const isXF = (title, pitfallId) => {
  if (title === "是否下发") {
    postApi({}, `/mosty-jcgl/overallCheckPitfallHz/sendToDept/${pitfallId}`).then((res) => {
      getCount(route.query.zhjcId ? route.query.zhjcId : store.state.zhjcId)
      getTableData();
      tab.value = 'X'
    });
  }

};
// 控制新增弹出框的展示
const changeAddVi = (val) => {
  addDiaShow.value = val;
  Rowobj.value = null;
  getTableData();
};

// 关闭综合检查
const close = () => {
  comprehensiveShow.value = false;
  xqId.value = null
  seeData.value = {};
};

//页码发生变化
const handleCurrentChange = (val) => {
  rightListQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  rightListQuery.value.pageSize = val;
  getTableData();
};

// 是否结束下发的接口
const isNot = (title, hzId) => {
  getApi({}, `/mosty-jcgl/overallCheckPitfallHz/sendToAqbm/${hzId}`).then(res => {
    getCount(route.query.zhjcId ? route.query.zhjcId : store.state.zhjcId)
    getTableData();
    tab.value = 'M'

  })
};
//关闭查看进度
function changeClose(val) {
  yhjdShow.value = false
}
function onloadExcel() {
  loadingShow.value = true
  let title = {
    pitfallDescribe: "隐患描述",
    classType: "类型",
    becheckedOrgname: "所属单位",
    belongDeptname: "所属部门",
    siteName: "被检查场所",
    pitfallLevels: "隐患级别",
    sendStatus: "状态"
  };

  let obj = { ...rightListQuery.value }
  obj.overallId = route.query.zhjcId ? route.query.zhjcId : store.state.zhjcId;
  obj.pageSize = 100000

  getApi(obj, "/mosty-jcgl/overallCheckPitfallHz/getDxmPage").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].classType = data[i].classType == 'J' ? '基础类' : '现场类';

          if (data[i].pitfallLevel == 'A') {
            data[i].pitfallLevels == 'A类一般隐患'
          } else if (data[i].pitfallLevel == 'B') {
            data[i].pitfallLevels == 'B类一般隐患'
          } else {
            data[i].pitfallLevels == '重大隐患'
          }
          data[i].sendStatus = data[i].sendStatus == '0' ? '未下发' : '已下发整改';
        }
        let tablename = "点线面分析台账.xlsx";
        exportXlsx(title, data, '点线面分析台账', tablename);
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })

}
</script>

<style lang="scss" scoped>
.dialog-box {
  // position: absolute;
  // top: 0;
  // left: 248px;
  // z-index: 999999999;
  // width: 85%;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      >div {
        background-color: #f5f5f5;
        border-radius: 4px 0 0 4px;
        width: 80%;
        margin-left: 10%;
        margin-bottom: 6vh;
        font-size: 2vw;
        height: 20vh;
        line-height: 20vh;
        color: #999;
        text-align: center;
        margin-top: 40px;
      }

      .bg {
        color: #fff !important;
        background-color: rgb(168, 216, 219);
      }
    }
  }

  .right {
    width: 100%;
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
