<template>
  <MOSTY.PageTree :pageTitle="'检查台账列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #titleright>
      <div class="toggle" :class="{ active: isOpen }" @click="handleClickOpen('01')">
        <span>统计</span>
        <el-icon>
          <DArrowLeft />
        </el-icon>
      </div>
    </template>
    <template #serach>
      <section ref="getHeight">
        <div v-if="isOpen" style="height: 100%;">
          <BaseTag :items="countlist" :num="3" @getItem="changetable" />
        </div>
      </section>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <section class="eltab77">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #ctype="{ row }">
            <dict-tag :options="D_TB_BMJCLX" :value="row.ctype" :tag="false"></dict-tag>
          </template>
          <template #checktype="{ row }">
            <dict-tag :options="D_BZ_YHLX" :value="row.checktype" :tag="false"></dict-tag>
          </template>
          <template #actions="{ row }">
            <span v-if="row.dangercount > 0 && row.ctype != 'C'" class="operesee" @click="configuration(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              隐患详情
            </span>
            <span v-else-if="row.ctype == 'C'" class="operesee" @click="gotoyhqd(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              清单
            </span>
            <span v-else class="operesee">
              --
            </span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

  <div v-if="comprehensiveShow" class="dialog-box">
    <Yhlb @close="closeEven" :rowid="rowId" />
  </div>
  <Yhqd v-if="yhqdShow" @changeVi2="changeGl" :rowid="rowId"></Yhqd>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import Yhlb from "./components/yhlb.vue";
import Yhqd from "./components/yhqd.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { dateFormat } from "@/utils/tools.js"
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_TB_BMJCLX } = proxy.$dict("D_BZ_YHLX", "D_TB_BMJCLX");
const yhqdShow = ref(false);
const comprehensiveShow = ref(false);
const getHeight = ref(null)
const totalHeight = ref()
const isOpen = ref(true)
const rowId = ref({})
const searchArr = reactive([
  {
    showType: "daterange",
    prop: "daterange",
    width: '350px',
    defaultVal: [dateFormat({ type: 'firstday' }), dateFormat()],
    placeholder: "开始时间",
  },
  {
    showType: "input",
    prop: "checkUserName",
    width: '200px',
    placeholder: "检查人员",
  },
  {
    showType: "input",
    prop: "checkUserObjName",
    width: '200px',
    placeholder: "被检查的对象",
  }
])
const tableColumns = ref([
  {
    title: "所属部门",
    prop: "deptname"
  },
  {
    title: "被检查的对象",
    prop: "objname"
  },
  {
    title: "检查人员",
    prop: "username"
  },
  {
    title: "检查时间",
    prop: "addtime"
  },
  {
    title: "检查类型",
    prop: "checktype",
    slot: true
  },
  {
    title: "类型",
    prop: "ctype",
    slot: true
  },
  {
    title: "所属单位",
    prop: "orgname"
  },
  {
    title: "隐患数量",
    prop: "dangercount"
  },
  {
    title: "整改完成",
    prop: "finishCount"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);

const countlist = reactive([
  { name: "全部", count: 0, dm: 'all', type: '0', icon: `aqss/icon_00.png` },
  { name: "岗位检查", count: 0, dm: 'gw', type: '1', icon: `aqss/icon_01.png` },
  { name: "部门检查", count: 0, dm: 'bm', type: '2', icon: `aqss/icon_02.png` },
  { name: "监督检查", count: 0, dm: 'jd', type: '3', icon: `aqss/icon_03.png` },
  { name: "随机检查", count: 0, dm: 'sj', type: '8', icon: `aqss/icon_04.png` },
])
const tableData = ref([
]);
const tableloading = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  depid: "",
  startTime: dateFormat({ type: 'firstday' }),
  endTime: dateFormat(),
  checkType: '0', //检查类型
});
onMounted(() => {

});
function getdeptId(obj) {
  listQuery.depid = obj.id
  getDataList();
  getApiCount()
}
//查询
const onSearch = obj => {
  if (obj.daterange && obj.daterange.length) {
    listQuery.startTime = obj.daterange[0]
    listQuery.endTime = obj.daterange[1]
  } else {
    listQuery.startTime = dateFormat({ type: 'firstday' })
    listQuery.endTime = dateFormat()
  }
  listQuery.checkUserName = obj.checkUserName || ""
  listQuery.checkUserObjName = obj.checkUserObjName || ""
  listQuery.pageCurrent = 1
  getDataList()
}
//隐患清单
function gotoyhqd(row) {
  rowId.value.id = row.id
  rowId.value.objid = row.objid
  yhqdShow.value = true;
}
//关闭隐患清单
function changeGl() {
  rowId.value.id = null
  rowId.value.objid = null
  yhqdShow.value = false;
}
//详情
const configuration = (row) => {
  rowId.value.id = row.id
  rowId.value.objid = row.objid
  comprehensiveShow.value = true;
};
//获取列表数据
function getDataList() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/userChecklog/queryList")
    .then((res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        listQuery.total = res.total;
      }
    })
    .catch((err) => {
      tableData.value = [];
      tableloading.value = false;
    })
    .finally(() => {
      tableloading.value = false;
    });
}
// 获取统计数量
function getApiCount() {
  getApi(listQuery, "/mosty-jcgl/userChecklog/getTypeCount")
    .then((res) => {
      if (res) {
        countlist[0].count = res.allCount
        countlist[1].count = res.positionCount
        countlist[2].count = res.deptCount
        countlist[3].count = res.supervisionCount
        countlist[4].count = res.randomCount
      }
    })
    .catch((err) => {
      countlist[0].count = 0
      countlist[1].count = 0
      countlist[2].count = 0
      countlist[3].count = 0
      countlist[4].count = 0
    })
    .finally(() => {
    });
}

//关闭详情
function closeEven() {
  comprehensiveShow.value = false;
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
const handleClickOpen = (type) => {
  isOpen.value = !isOpen.value

}
const changetable = (item) => {
  switch (item.dm) {
    case 'all':
      listQuery.checkType = '0'
      break;
    case 'gw':
      listQuery.checkType = '1'
      break;
    case 'bm':
      listQuery.checkType = '2'
      break;
    case 'jd':
      listQuery.checkType = '3'
      break;
    case 'sj':
      listQuery.checkType = '8'
      break;
  }
  getApi(listQuery, "/mosty-jcgl/userChecklog/queryList").then((res) => {
    tableData.value = res.records;
    listQuery.total = res.total;
    countlist.count = res.total;
  });
};
</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);
    }
  }
}

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

::v-deep .el-date-editor .el-range-input {
  color: #000;
}

.eltab77 {
  height: calc(100vh - 529px);
  overflow: auto;
}

// .getHeight{
//   height: 88px;
//   overflow-y: auto ;
// }</style>
