<template>
  <!-- <el-card v-loading="loading" body-class="printMe"> -->
  <div class="w75% m-a">
    <div id="printMe" class="pos-relative">
      <div class="resultIcon"><img :src="'../../../../../src/assets/icons/svg/' + inspectionType + '.png'" alt="" /></div>
      <h2 style="text-align: center; margin-top: 5px; font-weight: bold">整改通知单</h2>
      <el-row>
        <el-col :span="12" style="text-align: left">填报人：{{ safetyInspectionDetail?.creatorName }}</el-col>
        <el-col :span="12" style="text-align: right">填报时间：{{ safetyInspectionDetail?.createTime }}</el-col>
      </el-row>
      <el-descriptions :column="2" border style="margin-top: 8px" label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="检查项目" :span="2" class-name="zebra"
          >{{ safetyInspectionDetail?.projectName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="巡检标题" :span="2" label-class-name="white">
          {{ safetyInspectionDetail?.inspectionHeadline }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改人" class-name="zebra">
          {{ safetyInspectionDetail?.correctorName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改日期" class-name="zebra">
          {{ dayjs(safetyInspectionDetail?.rectificationTime).format('YYYY 年 MM 月 DD 日') }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="巡检类型" label-class-name="white">
          <dict-tag :options="quality_inspection_check_type" :value="safetyInspectionDetail?.inspectionType" />
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="填报人" label-class-name="white"
          >{{ safetyInspectionDetail?.creatorName }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="填报日期" class-name="zebra">{{ safetyInspectionDetail?.checkTime }} </el-descriptions-item>
        <el-descriptions-item label-align="center" label="要求回复期限" class-name="zebra"
          >{{ safetyInspectionDetail?.replyPeriodDate }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="巡检结果" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white"
          >{{ safetyInspectionDetail?.inspectionResult }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查附件" :span="2" label-class-name="white">
          <el-space wrap>
            <div v-for="item in checkFileList" :key="item.ossId">
              <span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
                <image-preview :src="item.url" width="200px" />
              </span>
              <span v-else>
                <el-link :href="`${item.url}`" type="primary" :underline="false" target="_blank">
                  <span> {{ item.originalName }} </span>
                </el-link>
              </span>
            </div>
          </el-space>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="检查状态" :span="2" label-class-name="white">
          <el-steps style="max-width: 200px" :active="Number(safetyInspectionDetail?.inspectionStatus)" finish-status="finish">
            <el-step v-for="item in quality_inspection_status_type" :key="item.value" :title="item.label" />
          </el-steps>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="整改结果" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="整改措施及完成情况" :span="2" label-class-name="white">
          {{ safetyInspectionDetail?.measure }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="整改附件" :span="2" label-class-name="white">
          <el-space wrap>
            <div v-for="item in rectificationFileList" :key="item.ossId">
              <span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
                <image-preview :src="item.url" width="200px" />
              </span>
              <span v-else>
                <el-link :href="`${item.url}`" :underline="false" target="_blank">
                  <span> {{ item.originalName }} </span>
                </el-link>
              </span>
            </div>
          </el-space>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border direction="vertical" size="large">
        <el-descriptions-item label-align="center" label="验证" class-name="none"></el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border label-width="160px" size="large">
        <el-descriptions-item label-align="center" label="验证结果" label-class-name="white"
          >{{ safetyInspectionDetail?.verificationResult }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>

  <!-- </el-card> -->
  <div class="dialog-footer">
    <div class="btn-item">
      <img src="../../../../assets/icons/svg/derived.png" />
      <span>导出</span>
    </div>
    <div class="btn-item" v-print="'#printMe'">
      <img src="../../../../assets/icons/svg/print.png" />
      <span>打印</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getQualityInspection } from '@/api/quality/qualityInspection';
import { QualityInspectionVO } from '@/api/quality/qualityInspection/types';
import { listByIds } from '@/api/system/oss';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { dayjs } from 'element-plus';
const { quality_inspection_check_type, quality_inspection_status_type } = toRefs<any>(
  proxy?.useDict('quality_inspection_check_type', 'quality_inspection_status_type')
);
interface Props {
  qualityInspectionDetailId?: string | number;
}

const props = defineProps<Props>();
const safetyInspectionDetail = ref<QualityInspectionVO>();
const checkFileList = ref<any[]>();
const rectificationFileList = ref<any[]>();

//检查状态图片
const inspectionType = computed(() => {
  let imgName = 'successLogo';
  if (safetyInspectionDetail.value?.inspectionStatus == '2') imgName = 'rectification';
  if (safetyInspectionDetail.value?.inspectionStatus == '1') imgName = 'successVerification';
  if (safetyInspectionDetail.value?.inspectionStatus == '2') imgName = 'danggerVerification';
  return imgName;
});

//获取详情
const get = async () => {
  const res = await getQualityInspection(props.qualityInspectionDetailId);
  if (res.data && res.code === 200) {
    safetyInspectionDetail.value = res.data;

    if (res.data.rectificationFileList) {
      const checkFileRes = await listByIds(res.data.inspectionFile.split(','));
      checkFileList.value = checkFileRes.data;
    }
    if (res.data.rectificationFile) {
      const rectificationFileRes = await listByIds(res.data.rectificationFile.split(','));
      rectificationFileList.value = rectificationFileRes.data;
    }
  }
};

onMounted(() => {
  //   get();
});

watch(
  () => props.qualityInspectionDetailId,
  (newId, oldId) => {
    if (newId !== oldId) {
      checkFileList.value = undefined;
      //   rectificationFileList.value = undefined;
      get();
    }
  }
);
</script>

<style scoped lang="scss">
#printMe {
  padding: 15px 20px 20px 20px !important;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

:deep(.white) {
  background: #fff !important;
}

:deep(.none) {
  display: none !important;
}

:deep(.zebra) {
  background: #f5f7fa;
}

@page {
  size: auto;
  margin: 0mm;
}

.dialog-footer {
  height: 200px;
  display: flex;

  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 14%;
  right: 6%;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
  text-align: center;
  padding: 20px 10px;

  .btn-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }
}

.resultIcon {
  position: absolute;
  top: 100px;
  right: 50px;
  z-index: 10;
  width: 105px;
  height: 105px;
  img {
    width: 105px;
  }
}
</style>
