<template>
  <MOSTY.PageTree :pageTitle="'排查计划'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" @getData="getonSearch" />
    </template>
    <template #table>
      <div class="eltab77">
        <el-table ref="multipleTableRef" :data="tableData" height="100%" stripe style="width: 100%" border>
          <el-table-column label="姓名" property="inspectionUserName"></el-table-column>
          <el-table-column label="所属部门" property="inspectionUserDeptName"></el-table-column>
          <el-table-column label="应检查次数" property="checkCycleShouldCount"></el-table-column>
          <el-table-column label="已检查次数" property="checkCycleEffectiveCount"></el-table-column>
          <el-table-column label="实际检查次数" property="checkCycleCompleteCount"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <span class="operesee" @click="handleChange(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">
    <pcjhinofo @changeVi2="changeVi2" :itemlist="itemList" :listId="listId" :year="year" :ssbmid="ssbmid" />
  </div>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, watch } from "vue";
import pcjhinofo from "./components/pcjhinofo.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { dateFormat } from "@/utils/tools";

const searchArr = reactive([
  {
    showType: "year",
    prop: "year",
    width: '250px',
    defaultVal: String(dateFormat({ type: "year", time: new Date() }))
  }
])
//当前列的id
const listId = ref("");
const tableData = ref([]);
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.ssbmid = val.id;
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  ssbmid: "",
  year: String(dateFormat({ type: "year", time: new Date() }))
});
const qwjcxqShow = ref(false);
const itemList = ref({});
onMounted(() => {
});
// 获取表格数据
const getTableData = () => {
  let params = {
    pageCurrent: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    inspectionUserDeptId: listQuery.value.ssbmid,
    inspectionYear: listQuery.value.year
  };
  getApi(params, `/mosty-jcgl/tbInspectionAnnualPlan/selectUserAnnualSummaryPage`).then((res) => {
    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 onSearch = obj => {
  listQuery.value.year = obj.year
  listQuery.pageCurrent = 1;
  getTableData();
}
const getonSearch = obj => {
  listQuery.value.year = obj.year
  listQuery.pageCurrent = 1;
  getTableData();
}

const changeVi2 = (val) => {
  qwjcxqShow.value = val;
};
const year = ref('')
const ssbmid = ref('')
watch(() => listQuery.value.year, (newVal) => {
})
//点击详情
function handleChange (row) {
  itemList.value = Object.assign({}, row);
  year.value = listQuery.value.year;
  ssbmid.value = listQuery.value.ssbmid
  qwjcxqShow.value = true;
}
</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);
    }
  }
}

.eltab77 {
  height: calc(100vh - 389px);
  overflow: auto;
}
</style>
