<template>
  <MOSTY.PageTree :pageTitle="'检查统计'" :searchType="'03'" @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">
          <BaseTag :items="countlist" :num="3" @getItem="changetable" />
        </div>
      </section>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <div :style="{ height: totalHeight }">
        <el-table ref="multipleTableRef" :data="tableData" height="100%" stripe style="width: 100%" border>
          <el-table-column label="所属单位" property="orgname"></el-table-column>
          <el-table-column label="所属部门" property="deptname"></el-table-column>
          <el-table-column label="姓名" prop="username" v-if="nowlb == 'gw'"></el-table-column>
          <el-table-column label="检查日期" property="addtime"></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="操作">
            <template #default="scope">
              <span class="operesee" @click="handleChange(index, scope.row)"><el-icon>
                  <Compass />
                </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="qwjcxqShow" class="dialog-box">
    <Gwjcxq @changeVi2="changeVi2" :itemlist="itemList" :listId="listId" :checktype="checktype" :userid="userid" />
  </div>

  <!-- 检查统计弹出框 -->
  <tjDia :tjDiaShow="tjDiaShow" :tjId="tjId" @changeTjVi="changeTjVi"></tjDia>
  <div v-if="addDiaShow" class="dialog-box">
    <addDia :addDiaShow="addDiaShow" :title="title" :xqId="xqId" @changeAddVi="changeAddVi" :tabledata="seeData">
    </addDia>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, nextTick, getCurrentInstance } from "vue";
import Gwjcxq from "../../fxgk/components/jctj/gwjcxq.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import { dateFormat } from "@/utils/tools";
import tjDia from "../components/zhjc/tjDia.vue";
import addDia from "../components/zhjc/Addzhjc.vue";
import { useRoute, useRouter } from "vue-router";
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
import { useStore } from "vuex";
const store = useStore();
const totalHeight = ref()
const getHeight = ref()
const isOpen = ref(true)
const router = useRouter();
const { proxy } = getCurrentInstance();
const { D_BZ_YHLX } = proxy.$dict("D_BZ_YHLX");
const title = ref("岗位检查");
const xqId = ref("");
const searchArr = reactive([
  {
    showType: "year",
    prop: "year",
    width: '250px',
    defaultVal: String(dateFormat({ type: "year", time: new Date() }))
  }
])
const seeData = ref({});
//当前列的id
const listId = ref("");
const tjDiaShow = ref(false);
const tjId = ref("");
const tableData = ref([]);
const nowlb = ref("gw");

//获取部门数据
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 addDiaShow = ref(false);
const qwjcxqShow = ref(false);

const countlist = reactive([
  { name: "岗位检查", count: 0, dm: 'gw', icon: `aqss/icon_01.png` },
  { name: "部门检查", count: 0, dm: 'bm', icon: `aqss/icon_02.png` },
  // { name: "综合检查", count: 1, dm: 'zh', icon: `aqss/icon_03.png` },
])
const itemList = ref({});
const headcount = ref({});
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${446 + getHeight.value.offsetHeight}px)`
  })
});
// 获取表格数据
const getTableData = () => {
  getApi(listQuery.value, "/mosty-jcgl/jctj/getTj").then((res) => {
    headcount.value = res;
    countlist[0].count = res.gw;
    countlist[1].count = res.bm;
    // countlist[2].count = res.zh;
  });
  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 handleClickOpen = (type) => {
  isOpen.value = !isOpen.value
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${446 + getHeight.value.offsetHeight}px)`
  })
}

const changeTjVi = (val) => {
  tjDiaShow.value = val;
  tjId.value = null
  title.value = "";
};
const changeAddVi = (val) => {
  addDiaShow.value = val;
  xqId.value = null;
  getTableData();
};

//查询 
const onSearch = obj => {
  listQuery.value.year = obj.year
  listQuery.pageCurrent = 1;
  getTableData();
}

const changeVi2 = (val) => {
  qwjcxqShow.value = val;
};
const checktype = ref('')
const userid = ref('')
//点击详情checktype
function handleChange(index, row) {
  qwjcxqShow.value = true;
  listId.value = row.addtime;
  userid.value = row.userid ? row.userid : row.depid;
  itemList.value = row;
  checktype.value = row.checktype;

}
const changetable = (item) => {
  nowlb.value = item.dm;
  if (item.dm == "gw") {
    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;
    });
  }
  if (item.dm == "bm") {
    getApi(listQuery.value, "/mosty-jcgl/jctj/bmCheckList").then((res) => {

      res.records.forEach(item => {
        item.checktype = '2'
      })
      tableData.value = res.records;
      listQuery.value.total = 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);
    }
  }
}
</style>
