<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">
        <BreadcrumbBack />
        查看施工安全申请
      </div>
    </header>
    <el-alert v-if="showAlertBar" :title="formValue.rejectReason" type="error" />

    <main class="safety-platform-container__main">
      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue" :disabled="true">
        <el-form-item label="项目名称">
          <el-input v-model="formValue.projectName" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="施工单位">
          <el-input v-model="formValue.constructionUnit" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="施工地点">
          <el-input v-model="formValue.constructionLocation" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="施工人数">
          <el-input-number v-model="formValue.workerCount" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="项目负责人">
          <el-input v-model="formValue.projectManagerName" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="负责人电话1">
          <el-input v-model="formValue.projectManagerPhone1" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="负责人电话2">
          <el-input v-model="formValue.projectManagerPhone2" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="现场安全员">
          <el-input v-model="formValue.siteSafetyManagerName" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="安全员电话1">
          <el-input v-model="formValue.siteSafetyPhone1" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="安全员电话2">
          <el-input v-model="formValue.siteSafetyPhone2" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker v-model="formValue.projectStartTime" type="date" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker v-model="formValue.projectEndTime" type="date" size="large" style="width: 330px" />
        </el-form-item>

        <el-form-item label="涉及工种" style="width: 87.2%">
          <el-checkbox-group v-model="tradeArray">
            <el-checkbox
              v-for="t in ['水电', '泥瓦', '木工', '焊接', '气割', '登高', '密闭', '特种驾驶', '其他']"
              :key="t"
              :label="t"
            />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item v-if="tradeArray.includes('其他')" label="其他工种说明" style="width: 330px">
          <el-input v-model="formValue.otherTrade" size="large" />
        </el-form-item>

        <el-form-item label="施工内容简述" style="width: 87.2%">
          <el-input type="textarea" v-model="formValue.constructionContent" size="large" :rows="3" />
        </el-form-item>

        <el-form-item label="备注说明" style="width: 87.2%">
          <el-input type="textarea" v-model="formValue.otherDescription" size="large" :rows="3" />
        </el-form-item>

        <div style="width: 100%; height: 1px; background: #eee; margin: 20px 0"></div>
        <div style="width: 100%; margin-bottom: 20px; font-weight: bold; padding-left: 10px">附件清单</div>

        <el-form-item v-for="item in attachmentConfigs" :key="item.prop" :label="item.label" style="width: 43.6%">
          <UploadFiles label="上传附件" :disabled="true" :fileList="attachmentLists[item.prop]" />
        </el-form-item>

        <div style="width: 100%; height: 1px; background: #eee; margin: 20px 0"></div>
        <el-form-item label="审批流程" style="width: 87.2%">
          <el-select v-model="formValue.templateId" size="large" style="width: 330px">
            <el-option v-for="opt in approvalOptions" :key="opt.id" :label="opt.templateName" :value="opt.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
    </footer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
  import { getAllApproval } from '@/api/approval/approval';
  import { constructionSafetyQueryDetailConstruction } from '@/api/production-safety/responsibility-implementation';
  import { unformatAttachment } from '@/components/UploadFiles/utils';

  const router = useRouter();
  const route = useRoute();
  const tradeArray = ref<string[]>([]);
  const approvalOptions = ref<any[]>([]);

  const attachmentConfigs = [
    { label: '施工安全交底', prop: 'safetyCommitmentAttachment' },
    { label: '安全管理协议', prop: 'safetyAgreementAttachment' },
    { label: '安全告知单', prop: 'safetyNoticeAttachment' },
    { label: '施工方案', prop: 'constructionPlanAttachment' },
    { label: '劳保用品清单', prop: 'ppeListAttachment' },
    { label: '施工机械清单', prop: 'equipmentListAttachment' },
    { label: '人员身份信息', prop: 'personnelIdAttachment' },
    { label: '安全教育记录', prop: 'safetyEducationAttachment' },
    { label: '环境承诺书', prop: 'environmentCommitmentAttachment' },
    { label: '消防管理承诺', prop: 'fireManagementAttachment' },
    { label: '特种作业证', prop: 'specialWorkerCertAttachment' },
    { label: '特种设备合格证', prop: 'specialEquipmentCertAttachment' },
  ];

  const attachmentLists = reactive<any>(Object.fromEntries(attachmentConfigs.map((a) => [a.prop, []])));

  const showAlertBar = computed(() => {
    if (!formValue.rejectReason) {
      return false;
    }
    return formValue.status === 1 && formValue.rejectReason !== '';
  });
  const formValue = reactive<any>({
    projectName: '',
    constructionContent: '',
    constructionLocation: '',
    constructionUnit: '',
    projectManagerName: '',
    projectManagerPhone1: '',
    projectManagerPhone2: '',
    siteSafetyManagerName: '',
    siteSafetyPhone1: '',
    siteSafetyPhone2: '',
    workerCount: undefined,
    projectStartTime: '',
    projectEndTime: '',
    involvedTrades: '',
    otherTrade: '',
    otherDescription: '',
    templateId: '',
    status: '',
  });

  const initData = async () => {
    const id = route.query.id as string;
    if (!id) return;

    try {
      // 1. 获取审批流选项（为了回显 label）
      const approvals = await getAllApproval();
      approvalOptions.value = approvals || [];

      // 2. 获取详情
      const res = await constructionSafetyQueryDetailConstruction(id);
      if (res) {
        // 基础数据回显
        Object.assign(formValue, res);

        // 工种回显
        if (res.involvedTrades) {
          tradeArray.value = res.involvedTrades.split(',');
        }

        // 附件回显还原
        attachmentConfigs.forEach((item) => {
          if (res[item.prop]) {
            attachmentLists[item.prop] = unformatAttachment(res[item.prop]);
          }
        });
      }
    } catch (error) {
      console.error('获取详情数据失败:', error);
    }
  };

  onMounted(() => {
    initData();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/page-details-layout.scss' as *;

  .safety-platform-container {
    &__main {
      padding: 24px;
      background-color: #fff;
    }
    :deep(.el-form-item) {
      margin-right: 20px;
      margin-bottom: 24px;
      vertical-align: top;
      .el-form-item__label {
        font-weight: bold;
      }
    }
    // :deep(.el-input.is-disabled .el-input__wrapper) {
    //   background-color: #f8f9fb;
    //   color: #606266;
    // }
  }
</style>
