<!-- 表格里的管理弹出框 -->
<template>
  <div>
    <MOSTY.PageTree :pageTitle="'岗位检查详情'" :isShowLeftTree="false">
      <template #serach>
        <div class="btnBox">
          <el-button type="primary" @click="handleClose">
            <el-icon>
              <Close />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </div>
        <!-- <div class="headtable">
          <div class="examine">
            <div class="examine_left">
              <div class="examine_left_title">检查任务数(次):</div>
              <div class="examine_left_time">{{ checkInfodata?.check_task_num || "0" }}</div>
            </div>
            <div class="examine_left">
              <div class="examine_left_title">已完成检查数(次):</div>
              <div class="examine_left_time">{{ checkInfodata?.actual_complete_num || "0" }}</div>
            </div>
            <div class="examine_left">
              <div class="examine_left_title" style="color: red;">未检查数(次):</div>
              <div class="examine_left_time">{{ checkInfodata?.nocomplete_num || "0" }}</div>
            </div>
          </div>
        </div> -->
      </template>
      <template #table>
        <div style="height: calc(100vh - 340px);">
          <el-table :data="tableData" border stripe height="100%">
            <el-table-column property="inspectionUserName" label="姓名" show-overflow-tooltip />
            <el-table-column property="inspectionObjName" label="检查对象" show-overflow-tooltip />
            <!-- <el-table-column property="objNote" label="详细地址" show-overflow-tooltip /> -->
            <el-table-column property="inspectionCycleBegin" label="检查开始时间" show-overflow-tooltip />
            <el-table-column property="inspectionCycleEnd" label="检查截止时间" show-overflow-tooltip />
            <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="完成次数" property="actualCompleteNum"></el-table-column> -->
          </el-table>
        </div>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  watch,
  computed
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
// 数据
const props = defineProps({
  itemlist: {
    type: Object,
    default: () => { }
  },
  year: {
    type: String,
    required: true,
    default: ''
  },
});
watch(
  () => props.itemlist,
  (val) => {
  }
)
const emits = defineEmits(["changeVi2"]);
const tableData = ref([
]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,

});
const checkInfodata = ref({})
onMounted(() => {
  getTableData();
});
// 关闭
const handleClose = () => {
  emits("changeVi2", false);
};


// 获取排查项列表
const getTableData = () => {
  let params = {
    ...listQuery.value,
    inspectionYear: props?.year || '',
    inspectionUserId: props?.itemlist?.inspectionUserId || '',
  }
  getApi(params, `/mosty-jcgl/tbInspectionAnnualPlan/selectPage`).then((res) => {
    tableData.value = res.records;
    // checkInfodata.value = res.checkInfoTotal;
    listQuery.value.total = res.total;
  })
};
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
}
</script>

<style lang="scss" scoped>
.newAdd {
  margin-top: 6px;
  position: absolute;
  right: 20px;
}


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

.headtable {
  padding: 10px;
  background-color: #f5f5f5;
  margin-bottom: 2px;

  .examine {
    display: flex;
    align-items: center;
    justify-content: center;

    .examine_left {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .examine_left_title {
        font-size: 14px;
        color: #333333;
        margin-right: 10px;
      }

      .examine_left_time {
        font-size: 16px;
        color: #FF7500;
        font-weight: bold;
      }
    }
  }
}
</style>