<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">记录人：{{ safetyLogDetail?.creator?.name }}</el-col>
      <el-col :span="12" style="text-align: right">记录时间：{{ safetyLogDetail?.createTime }}</el-col>
    </el-row>
    <el-descriptions :column="3" border style="margin-top: 8px">
      <el-descriptions-item label-align="center" width="160px" label="项目名称" :span="3">{{ currentProject?.name }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="发生日期">{{ safetyLogDetail?.dateOfOccurrence }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="气温">
        <span>最高：{{ safetyLogDetail?.airTemperatureMax }}（℃）</span>
        <span>最低：{{ safetyLogDetail?.airTemperatureMin }}（℃）</span>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="气候">
        <dict-tag :value="safetyLogDetail?.weather" :options="weather_type" />
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="工程施工部位及施工进展情况" :span="3">
        {{ safetyLogDetail?.progress }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="当日主要危险性项目作业内容" :span="3">
        {{ safetyLogDetail?.jobContent }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="施工项目安全教育与安全交底情况" :span="3">
        {{ safetyLogDetail?.discloseCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="施工作业队伍班前施工安全活动情况" :span="3">
        {{ safetyLogDetail?.activityCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="现场施工安全巡视与检查情况" :span="3">
        {{ safetyLogDetail?.examineCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="季节施工防寒、防暑等措施实施情况" :span="3">
        {{ safetyLogDetail?.implementCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="监理通知有关部门安全检查情况" :span="3">
        {{ safetyLogDetail?.safetyInspectionCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="停工、加班情况" :span="3">{{ safetyLogDetail?.stoppageOrOvertime }} </el-descriptions-item>
      <el-descriptions-item label-align="center" label="其他应记录的安全与文明施工事项" :span="3">
        {{ safetyLogDetail?.otherCondition }}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="附件" :span="3">
        <el-space direction="vertical">
          <el-link v-for="item in fileList" :key="item.ossId" :href="`${item.url}`" :underline="false" target="_blank">
            <span> {{ item.originalName }} </span>
          </el-link>
        </el-space>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="备注" :span="3">{{ safetyLogDetail?.remark }} </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { SafetyLogVO } from '@/api/safety/safetyLog/types';
import { getSafetyLog } from '@/api/safety/safetyLog';
import { useUserStoreHook } from '@/store/modules/user';
import { listByIds } from '@/api/system/oss';
import { OssVO } from '@/api/system/oss/types';

interface Props {
  safetyLogId?: string | number;
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { weather_type } = toRefs<any>(proxy?.useDict('weather_type'));

// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const props = defineProps<Props>();
const loading = ref<boolean>(false);
const safetyLogDetail = ref<SafetyLogVO>();
const fileList = ref<Array<OssVO>>([]);
const get = async () => {
  loading.value = true;
  const res = await getSafetyLog(props.safetyLogId);
  if (res.data && res.code === 200) {
    safetyLogDetail.value = res.data;
    if (res.data.fileId) {
      const fileRes = await listByIds(res.data.fileId.split(','));
      fileList.value = fileRes.data;
    }
  }
  loading.value = false;
};

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

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