<template>
  <layout-card>
    <div id="printContainer">
      <el-divider content-position="left">清单信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="清单名称">
          {{ info.NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="排查清单类型">
          {{ info.SCREENTYPENAME }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="info.BAO_BAO_TYPE !== '1' ? '所属部门' : '包保责任人部门'"
        >
          {{ info.DEPARTMENT_NAME }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="info.BAO_BAO_TYPE !== '1' ? '所属岗位' : '包保责任人岗位'"
        >
          {{ info.POST_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="排查周期">
          {{ info.PERIODNAME }}
        </el-descriptions-item>
        <el-descriptions-item label="清单类型">
          {{ info.TYPENAME }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="info.TYPE === 'listType0006'"
          label="排查日期"
          :span="2"
        >
          {{ info.START_DATE }} - {{ info.END_DATE }}
        </el-descriptions-item>
        <template v-if="info.BAO_BAO_TYPE === '1'">
          <el-descriptions-item label="是否包保责任人任务">
            是
          </el-descriptions-item>
          <el-descriptions-item label="包保责任人">
            {{ info.USER_NAME }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <el-divider content-position="left">检查内容</el-divider>
      <div class="print_no_use">
        <layout-table :data="list" :show-pagination="false">
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column
            prop="CHECK_CATEGORY_NAME"
            label="检查类别"
            width="180"
          />
          <el-table-column
            prop="CHECK_ITEM_NAME"
            label="检查项目"
            width="180"
          />
          <el-table-column prop="CHECK_CONTENT" label="检查内容" width="200" />
          <el-table-column prop="CHECK_STANDARD" label="检查标准" width="200" />
          <el-table-column
            prop="REFERENCE_BASIS"
            label="参考依据"
            width="200"
          />
          <el-table-column
            prop="CHECK_QUALIFIED"
            label="检查合格项"
            width="200"
          />
          <el-table-column
            prop="CHECK_UNQUALIFIED"
            label="检查不合格项"
            width="200"
          />
          <el-table-column label="操作类型">
            <template #default="{ row }">
              <span v-if="row.OPERATION_TYPE === 1">选择</span>
              <span v-if="row.OPERATION_TYPE === 2">填写</span>
            </template>
          </el-table-column>
        </layout-table>
      </div>
      <table class="print_use">
        <thead>
          <tr>
            <th width="50">序号</th>
            <th width="100">检查类别</th>
            <th width="100">检查项目</th>
            <th width="100">检查内容</th>
            <th>检查标准</th>
            <th>检查合格项</th>
            <th>检查不合格项</th>
            <th width="100">操作类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.CHECK_CATEGORY_NAME }}</td>
            <td>{{ item.CHECK_ITEM_NAME }}</td>
            <td>{{ item.CHECK_CONTENT }}</td>
            <td>{{ item.CHECK_STANDARD }}</td>
            <td>{{ item.CHECK_QUALIFIED }}</td>
            <td>{{ item.CHECK_UNQUALIFIED }}</td>
            <td>{{ item.OPERATION_TYPE === 1 ? "选择" : "填写" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-10">
      <el-button v-print="'#printContainer'" type="primary">打 印</el-button>
    </div>
    <div v-html="PRINT_STYLE" />
  </layout-card>
</template>

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

const route = useRoute();
const { ID } = route.query;
const info = ref({});
const { list } = useListData(getCheckStandardManagementView, {
  otherParams: { ID },
  usePagination: false,
  callbackFn: (list, resData) => {
    info.value = resData.pd;
  },
});
</script>

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