<template>
  <MOSTY.PageTree :pageTitle="'隐患排查清单'" :searchType="'03'" @getDeptId="getorgcode">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <section class="eltab3">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" :tableHeight="'100%'">
          <template #checktype="{ row }">
            <span>{{ row.checktype == '1' ? '综合检查' : '专项检查' }}</span>
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="configuration(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              查看隐患排查清单
            </span>
            <span class="operesee" v-if="row.templateid && (row.templateid == null || row.templateid == '')">
              到现场扫码检查
            </span>
          </template>

        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>

  <div v-if="dialogVisible" class="dialog-box">
    <MOSTY.PageTree :pageTitle="'测试待处理隐患隐患排查清单'" :isShowLeftTree="false">
      <template #serach>
        <el-divider />
        <div class="btnBox">
          <el-button style="margin-left: 10px" type="primary" @click="onloadExcel" v-loading="loadingShow">
            <span>导出</span>
          </el-button>
          <el-button style="margin-left: 10px" type="primary" @click="dialogVisible = false">
            <span>关闭</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <section class="eltab3">
          <MOSTY.Table :table-columns="PzColumns" :tableData="PztableData" :tableloading="tableloadings">

            <template #ctype="{ row }">
              <span>{{ row.ctype == 'X' ? '现场' : '基础类' }}</span>
            </template>
            <template #yhlx="{ row }">
              <span v-if="row.yhlx == 'A' || row.yhlx == '2'">一般隐患A类</span>
              <span v-else-if="row.yhlx == 'B' || row.yhlx == '3'">一般隐患B类</span>
              <span v-else-if="row.yhlx == 'D' || row.yhlx == '1'">重大隐患</span>
              <span v-else>不确定</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery2" @changeNo="handleCurrentChange2" @changeSize="handleSizeChange2" />
        </div>
      </template>
    </MOSTY.PageTree>


  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { exportXlsx } from "@/excel/Export2Excel.js";
const dialogVisible = ref(false);
const tableHeight = ref();
const bigHeight = ref(); //整个高度
const total = ref(0);
const total2 = ref(0);
const loadingShow = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "title",
    width: '250px',
    placeholder: '请输入检查名称进行查询'
  },

]);
const tableColumns = ref([
  {
    title: "检查标题",
    prop: "title"
  },
  {
    title: "检查类型",
    prop: "checktype",
    slot: true
  },
  {
    title: "检查配置人",
    prop: "pzrxm"
  },
  {
    title: "配置部门",
    prop: "deptname"
  },
  {
    title: "开始时间",
    prop: "startTime"
  },
  {
    title: "结束时间",
    prop: "endTime"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);
const PzColumns = ref([
  {
    title: "排查项",
    prop: "itemname"
  },
  {
    title: "分类",
    prop: "ctype",
    slot: true
  },
  {
    title: "可能发生的隐患",
    prop: "YhNote"

  },
  {
    title: "隐患等级",
    prop: "yhlx",
    slot: true
  }
]);
const PztableData = ref([]);
const tableData = ref([]);
const tableloading = ref(false);
const tableloadings = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  orgcode: ""
});
const listQuery2 = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
})
onMounted(() => {
  tabHeightFn();
  bigHeightFn();
  getDataList();
});
//点击查询
function onSearch(obj) {
  listQuery.title = obj.title
  listQuery.pageCurrent = 1
  getDataList()
}
// 配置
const configuration = (row) => {
  listQuery2.tid = row.mbid
  gettabledata()
  dialogVisible.value = true;
};

//获取列表数据
function getDataList() {
  tableloading.value = true;
  postApi(listQuery, "/mosty-jcgl/overallcheck/queryList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    }
  }).catch(() => {
    tableData.value = [];
    tableloading.value = false;
  });
}
const gettabledata = () => {
  tableloadings.value = true;
  getApi(listQuery2, "/mosty-jcgl/zhjcmb/getListByTid").then((res) => {
    if (res) {
      tableloadings.value = false;
      PztableData.value = res
    }
  }).catch(() => {
    PztableData.value = [];
    tableloadings.value = false;
  });
}
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 210;
};
const getorgcode = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getDataList();
};
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
//分页
const handleSizeChange2 = (currentSize) => {
  listQuery2.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange2 = (currentPage) => {
  listQuery2.pageCurrent = currentPage;
  getDataList();
};
//导出Excel
function onloadExcel() {
  loadingShow.value = true;
  let title = {
    itemname: "排查项",
    ctype: "分类",
    YhNote: "可能发生的隐患",
    yhlx: "隐患等级",
  };
  let paramss = {
    pageCurrent: 1,
    pageSize: 1000,
    tid: listQuery2.tid
  }
  getApi(paramss, "/mosty-jcgl/zhjcmb/getListByTid").then((res) => {
    if (res) {
      let data = res;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].ctype = data[i].ctype == 'X' ? '现场' : '基础类';
          if (data[i].yhlx == 'A' || data[i].yhlx == '2') {
            data[i].yhlx = '一般隐患A类'
          } else if (data[i].yhlx == 'B' || data[i].yhlx == '3') {
            data[i].yhlx = '一般隐患B类'
          } else if (data[i].yhlx == 'D' || data[i].yhlx == '1') {
            data[i].yhlx = '重大隐患'
          } else {
            data[i].yhlx = '未确定'
          }
        }
        let tablename = "隐患排查清单.xlsx";
        exportXlsx(title, data, '隐患排查清单', tablename);
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
}
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 318px);
}

.el-table__body-wrapper is-scrolling-left {
  border: none;
}

.el-table__row {
  line-height: 21px;
}

.el-table th,
.el-table td {
  padding: 4px 8px;
}

.el-table__body-wrapper is-scrolling-left .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-dialog__headerbtn {
  margin-top: -6px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 27px !important;
}



.xzmb_box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  >div {
    width: 48%;

    .titles {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 35px;
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.btn {
  padding: 10px;
  float: right;
}
</style>
