<template>
  <layout-card>
    <div id="printContent">
      <el-divider content-position="left">员工日常检测情况</el-divider>
      <div class="print_no_use">
        <layout-table :data="list" :show-pagination="false">
          <el-table-column label="序号" width="70" type="index" />
          <el-table-column prop="DEPARTNAME_ALL" label="部门" />
          <el-table-column prop="POSTNAME" label="岗位" />
          <el-table-column prop="USERNAME" label="姓名" />
          <el-table-column prop="listCount" label="负责清单数" />
          <el-table-column prop="staCount" label="应检查清单次数" />
          <el-table-column prop="cheCount" label="实际检查次数" />
          <el-table-column prop="percent" label="检查率" />
        </layout-table>
      </div>
      <table class="print_use">
        <thead>
          <tr>
            <th width="55">序号</th>
            <th>部门</th>
            <th>岗位</th>
            <th>姓名</th>
            <th>负责清单数</th>
            <th>应检查清单次数</th>
            <th>实际检查次数</th>
            <th>检查率</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.DEPARTNAME_ALL }}</td>
            <td>{{ item.POSTNAME }}</td>
            <td>{{ item.USERNAME }}</td>
            <td>{{ item.listCount }}</td>
            <td>{{ item.staCount }}</td>
            <td>{{ item.cheCount }}</td>
            <td>{{ item.percent }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-10">
      <el-button type="primary" v-print="'#printContent'">打印</el-button>
    </div>
    <div v-html="PRINT_STYLE" />
  </layout-card>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { getDetectionSituationList } from "@/request/statistical_analysis.js";
import { useRoute } from "vue-router";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const route = useRoute();
const { STARTTIME, ENDTIME, DEPTIDS } = route.query;
const { list } = useListData(getDetectionSituationList, {
  otherParams: { showCount: 10000, STARTTIME, ENDTIME, DEPTIDS },
});
</script>

<style scoped lang="scss"></style>
