<template>
  <div>
    <el-divider content-position="left">清单信息</el-divider>
    <el-descriptions border :column="2">
      <el-descriptions-item label="清单名称">
        {{ info.LIST_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="排查清单类型">
        {{ info.SCREENTYPENAME }}
      </el-descriptions-item>
      <el-descriptions-item
        :label="info.BAO_BAO_TYPE === '1' ? '包保责任人' : '检查人'"
      >
        {{ info.USERS }}
      </el-descriptions-item>
      <el-descriptions-item label="检查时间">
        {{ info.CHECK_TIME }}
      </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
        label="排查日期"
        v-if="info.LISTTYPE === 'listType0006'"
      >
        {{ info.START_DATE }} - {{ info.END_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="补录原因" :span="2" v-if="info.REASON">
        {{ info.REASON }}
      </el-descriptions-item>
      <el-descriptions-item
        label="地图"
        :span="2"
        class-name="print_no_use"
        label-class-name="print_no_use"
        v-if="entrance"
      >
        <el-button @click="data.mapDialogVisible = true">
          <icon-international
            theme="outline"
            size="18"
            fill="#0694f4"
            :strokeWidth="3"
          />
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item label="签字" :span="2">
        <img
          v-if="qianming"
          :src="qianming"
          style="width: 200px; height: 97px"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">检查内容</el-divider>
    <div class="print_no_use">
      <layout-table :data="inspectionList" :show-pagination="false">
        <el-table-column label="序号" width="70" type="index" />
        <el-table-column prop="RISKUNITNAME" label="风险点（单元）" />
        <el-table-column prop="PARTSNAME" label="辨识部位" />
        <el-table-column prop="RISK_DESCR" label="存在风险" />
        <el-table-column prop="DNAME5" label="风险分级" />
        <el-table-column prop="CHECK_CONTENT" label="检查内容" />
        <el-table-column label="状态" width="100">
          <template v-slot="{ row }">
            <template v-if="row.ISNORMAL === 0">
              <el-button
                v-if="row.IMGCOUNT > 0"
                type="primary"
                text
                link
                @click="entrance && fnQualified(row.RECORDITEM_ID)"
              >
                合格
              </el-button>
              <div v-else>合格</div>
            </template>
            <el-button
              v-else-if="row.ISNORMAL === 1"
              type="primary"
              text
              link
              @click="
                entrance &&
                  router.push({
                    path: hiddenPath[entrance],
                    query: { HIDDEN_ID: row.HIDDEN_ID },
                  })
              "
            >
              不合格
            </el-button>
            <div v-else-if="row.ISNORMAL === 2">不涉及</div>
            <div v-else>存在未整改隐患</div>
          </template>
        </el-table-column>
      </layout-table>
    </div>
    <table class="print_use">
      <thead>
        <tr>
          <th width="55">序号</th>
          <th width="125">风险点（单元）</th>
          <th width="100">辨识部位</th>
          <th>存在风险</th>
          <th width="120">风险分级</th>
          <th>检查内容</th>
          <th width="100">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in inspectionList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.RISKUNITNAME }}</td>
          <td>{{ item.PARTSNAME }}</td>
          <td>{{ item.RISK_DESCR }}</td>
          <td>{{ item.LEVEL_NAME }}</td>
          <td>{{ item.CHECK_CONTENT }}</td>
          <template v-if="item.ISNORMAL === 0">
            <template v-if="item.IMGCOUNT > 0">
              <td>
                <el-button type="primary" text link> 合格 </el-button>
              </td>
            </template>
            <template v-else>
              <td>合格</td>
            </template>
          </template>
          <template v-else-if="item.ISNORMAL === 1">
            <td>
              <el-button type="primary" text link> 不合格 </el-button>
            </td>
          </template>
          <template v-else-if="item.ISNORMAL === 2">
            <td>不涉及</td>
          </template>
          <template v-else>
            <td>存在未整改隐患</td>
          </template>
        </tr>
      </tbody>
    </table>
    <el-divider content-position="left">其他隐患</el-divider>
    <div class="print_no_use">
      <layout-table :data="otherHiddenList" :show-pagination="false">
        <el-table-column label="序号" width="70" type="index" />
        <el-table-column prop="HIDDENDESCR" label="隐患描述" />
        <el-table-column label="操作" width="100" v-if="entrance">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              text
              link
              @click="
                router.push({
                  path: hiddenPath[entrance],
                  query: { HIDDEN_ID: row.HIDDEN_ID },
                })
              "
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </layout-table>
    </div>
    <table class="print_use">
      <thead>
        <tr>
          <th width="55">序号</th>
          <th>隐患描述</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in otherHiddenList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.HIDDENDESCR }}</td>
        </tr>
      </tbody>
    </table>
    <qualified
      v-model:visible="data.qualifiedDialog.visible"
      :file="data.qualifiedDialog.file"
    />
    <map-dialog
      v-model:visible="data.mapDialogVisible"
      :id="checkRecordId"
      :list="inspectionList"
    />
    <div v-html="PRINT_STYLE" />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import {
  getChecklistInspectionStatusRecordView,
  getChecklistInspectionStatusRecordViewOtherHiddenDangerList,
} from "@/request/hazard_investigation.js";
import { getViewImg } from "@/request/api.js";
import { PRINT_STYLE } from "@/assets/js/constant.js";
import useListData from "@/assets/js/useListData.js";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import Qualified from "./qualified.vue";
import MapDialog from "./map.vue";

// entrance:
// checklist_inspection_status 清单检查情况
// inspection_record 检查记录管理
// 空为批量打印
const props = defineProps({
  entrance: {
    type: String,
    default: "",
  },
  checkRecordId: {
    type: String,
    required: true,
    default: "",
  },
});
const hiddenPath = {
  checklist_inspection_status:
    "/hazard_investigation/checklist_inspection_status/inspection_record/view/hidden_danger",
  inspection_record:
    "/hazard_investigation/inspection_record/view/hidden_danger",
};
const router = useRouter();
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const info = ref({});
const qianming = ref("");
const data = reactive({
  qualifiedDialog: {
    visible: false,
    file: [],
  },
  mapDialogVisible: false,
});
const { list: inspectionList } = useListData(
  getChecklistInspectionStatusRecordView,
  {
    otherParams: { CHECKRECORD_ID: props.checkRecordId },
    usePagination: false,
    callbackFn: (list, resData) => {
      info.value = resData.pd;
      if (resData.qianming && resData.qianming.length > 0) {
        qianming.value = VITE_FILE_URL + resData.qianming[0].FILEPATH;
      }
    },
  }
);
const { list: otherHiddenList } = useListData(
  getChecklistInspectionStatusRecordViewOtherHiddenDangerList,
  {
    otherParams: { CHECKRECORD_ID: props.checkRecordId },
    usePagination: false,
    key: "hiddenList",
  }
);
const fnQualified = async (RECORDITEM_ID) => {
  const resData = await getViewImg({
    FOREIGN_KEY: RECORDITEM_ID,
    TYPE: "14",
  });
  data.qualifiedDialog.file = addingPrefixToFile(resData.imgs);
  data.qualifiedDialog.visible = true;
};
</script>

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