<template>
  <el-card v-loading="loading">
    <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">
      <el-descriptions-item label-align="center" label="检查项目" :span="2">{{ currentProject?.name }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="检查类型">
        <dict-tag :options="safety_inspection_check_type" :value="safetyInspectionDetail?.checkType" />
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="违章类型">
        <dict-tag :options="safety_inspection_violation_type" :value="safetyInspectionDetail?.violationType" />
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="检查时间">{{ safetyInspectionDetail?.checkTime }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="检查人">{{ safetyInspectionDetail?.creatorName }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="整改人">{{ safetyInspectionDetail?.correctorName }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="要求整改期限">
        {{ dayjs(safetyInspectionDetail?.rectificationDeadline).format('YYYY 年 MM 月 DD 日') }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="table-title">巡检结果</div>
    <el-descriptions :column="2" border label-width="160px">
      <el-descriptions-item label-align="center" label="内容" :span="2">{{ safetyInspectionDetail?.hiddenDanger }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="检查附件" :span="2">
        <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}`" :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">
        <el-steps style="max-width: 200px" :active="Number(safetyInspectionDetail?.status)" finish-status="success">
          <el-step v-for="item in safety_inspection_type" :key="item.value" :title="item.label" />
        </el-steps>
      </el-descriptions-item>
    </el-descriptions>
    <div class="table-title">整改情况</div>
    <el-descriptions :column="2" border label-width="160px">
      <el-descriptions-item label-align="center" label="班组">{{ safetyInspectionDetail?.teamName }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="整改日期">{{ safetyInspectionDetail?.rectificationTime }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="整改措施及完成情况" :span="2">
        {{ safetyInspectionDetail?.measure }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="整改附件" :span="2">
        <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>
    <div class="table-title">复查结果</div>
    <el-descriptions :column="2" border label-width="160px">
      <el-descriptions-item label-align="center" label="复查人">{{ safetyInspectionDetail?.creatorName }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="复查日期">{{ safetyInspectionDetail?.reviewTime }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="复查情况" :span="2">{{ safetyInspectionDetail?.review }} </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { SafetyInspectionVO } from '@/api/safety/safetyInspection/types';
import { getSafetyInspection } from '@/api/safety/safetyInspection';
import { listByIds } from '@/api/system/oss';
import { OssVO } from '@/api/system/oss/types';
import dayjs from 'dayjs';

interface Props {
  safetyInspectionId?: string | number;
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { safety_inspection_violation_type, safety_inspection_type, safety_inspection_check_type } = toRefs<any>(
  proxy?.useDict('safety_inspection_violation_type', 'review_type', 'reply_type', 'safety_inspection_type', 'safety_inspection_check_type')
);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const props = defineProps<Props>();
const loading = ref<boolean>(false);
const safetyInspectionDetail = ref<SafetyInspectionVO>();
const checkFileList = ref<OssVO[]>();
const rectificationFileList = ref<OssVO[]>();
const get = async () => {
  loading.value = true;
  const res = await getSafetyInspection(props.safetyInspectionId);
  if (res.data && res.code === 200) {
    safetyInspectionDetail.value = res.data;
    if (res.data.checkFile) {
      const checkFileRes = await listByIds(res.data.checkFile.split(','));
      checkFileList.value = checkFileRes.data;
    }
    if (res.data.rectificationFile) {
      const rectificationFileRes = await listByIds(res.data.rectificationFile.split(','));
      rectificationFileList.value = rectificationFileRes.data;
    }
  }
  loading.value = false;
};

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

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

<style scoped>
.table-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 35px;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 4px;
}
</style>
