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

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

        <el-form-item label="施工单位" prop="constructionUnit">
          <el-input
            v-model="formValue.constructionUnit"
            size="large"
            placeholder="请输入单位全称"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工地点" prop="constructionLocation">
          <el-input
            v-model="formValue.constructionLocation"
            size="large"
            placeholder="楼宇名称/区域"
            style="width: 330px"
          />
        </el-form-item>

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

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

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

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

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

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

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

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

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

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

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

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

        <el-form-item label="备注说明" prop="otherDescription" style="width: 87.2%">
          <el-input type="textarea" v-model="formValue.otherDescription" size="large" :rows="3" placeholder="选填" />
        </el-form-item> -->
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="formValue.projectName" size="large" placeholder="请输入项目名称" style="width: 330px" />
        </el-form-item>

        <el-form-item label="施工地点（区域）" prop="constructionLocation">
          <el-input
            v-model="formValue.constructionLocation"
            size="large"
            placeholder="请输入施工地点（区域）"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工单位名称" prop="constructionUnit">
          <el-input
            v-model="formValue.constructionUnit"
            size="large"
            placeholder="请输入施工单位名称"
            style="width: 330px"
          />
        </el-form-item>

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

        <el-form-item label="施工项目负责人电话1" prop="projectManagerPhone1">
          <el-input
            v-model="formValue.projectManagerPhone1"
            size="large"
            placeholder="输入施工项目负责人电话1"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工项目负责人电话2" prop="projectManagerPhone2">
          <el-input
            v-model="formValue.projectManagerPhone2"
            size="large"
            placeholder="输入施工项目负责人电话2"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人" prop="siteSafetyManagerName">
          <el-input
            v-model="formValue.siteSafetyManagerName"
            size="large"
            placeholder="输入施工现场安全负责人"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人电话1" prop="siteSafetyPhone1">
          <el-input
            v-model="formValue.siteSafetyPhone1"
            size="large"
            placeholder="输入施工现场安全负责人电话1"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人电话2" prop="siteSafetyPhone2">
          <el-input
            v-model="formValue.siteSafetyPhone2"
            size="large"
            placeholder="输入施工现场安全负责人电话2"
            style="width: 330px"
          />
        </el-form-item>

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

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

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

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

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

        <el-form-item label="工程施工内容（方案）简要描述" prop="constructionContent" style="width: 81%">
          <el-input
            type="textarea"
            v-model="formValue.constructionContent"
            size="large"
            :rows="3"
            placeholder="输入工程施工内容（方案）简要描述"
          />
        </el-form-item>

        <el-form-item label="其他说明" prop="otherDescription" style="width: 81%">
          <el-input
            type="textarea"
            v-model="formValue.otherDescription"
            size="large"
            :rows="3"
            placeholder="补充其他说明"
          />
        </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"
          label-width="250px"
          :prop="item.prop"
          style="width: 43%"
        >
          <el-row style="width: 100%">
            <el-col :span="12">
              <UploadFiles
                label="上传文件"
                @upload-success="(fileList) => handleUploadSuccess(item.prop, fileList)"
                :fileList="attachmentLists[item.prop]"
              />
            </el-col>
            <el-col :span="12">
              <el-button type="primary" link @click="templateDownload(item)"> 模版下载 </el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <div style="width: 100%; height: 1px; background: #eee; margin: 20px 0"></div>
        <el-form-item label="审批流程" prop="templateId" style="width: 87.2%">
          <el-select
            v-model="formValue.templateId"
            placeholder="请选择审批流程"
            size="large"
            style="width: 330px"
            clearable
          >
            <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>
      <el-button type="primary" :loading="submiting" @click="handleSave(0)">保存</el-button>
    </footer>
  </div>
</template>

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

  const router = useRouter();
  const route = useRoute();
  const formRef = ref<any>();
  const submiting = ref(false);
  const tradeArray = ref<string[]>([]);
  const approvalOptions = ref<any[]>([]);
  const showAlertBar = computed(() => {
    if (!formValue.rejectReason) {
      return false;
    }
    return formValue.status === 1 && formValue.rejectReason !== '';
  });
  const attachmentConfigs = [
    { label: '施工人员身份信息（复印件，施工单位盖章)', prop: 'personnelIdAttachment', required: true },

    { label: '施工方提供施工安全交底（施工方敲章）', prop: 'safetyCommitmentAttachment', required: true },

    { label: '施工方提供施工人员安全教育（施工人员签字并敲章）', prop: 'safetyEducationAttachment', required: true },

    {
      label: '安全管理协议（双方签字两份，上飞院部门领导签甲方代表、乙方盖章并签字）',
      prop: 'safetyAgreementAttachment',
      required: true,
    },

    {
      label: '施工作业环境承诺（上飞院的项目具体经办人签字）',
      prop: 'environmentCommitmentAttachment',
      required: true,
    },

    { label: '安全告知单（部门具体经办人签字）', prop: 'safetyNoticeAttachment', required: true },

    { label: '消防管理承诺书（部门具体经办人签字）', prop: 'fireManagementAttachment', required: true },

    { label: '施工方案（含风险识别、安全措施、应急预案等）', prop: 'constructionPlanAttachment', required: true },

    { label: '劳保用品清单', prop: 'ppeListAttachment', required: true },
    { label: '施工机械清单', prop: 'equipmentListAttachment', required: true },
    {
      label: '若有特种施工人员提供特种作业证（复印件，施工单位盖章）',
      prop: 'specialWorkerCertAttachment',
      required: false,
    },
    {
      label: '若有特种设备提供特种设备的合格证（复印件，施工单位盖章',
      prop: 'specialEquipmentCertAttachment',
      required: false,
    },
  ];

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

  const formValue = reactive<any>({
    id: undefined,
    projectName: '',
    constructionContent: '',
    constructionLocation: '',
    constructionUnit: '',
    projectManagerName: '',
    projectManagerPhone1: '',
    projectManagerPhone2: '',
    siteSafetyManagerName: '',
    siteSafetyPhone1: '',
    siteSafetyPhone2: '',
    workerCount: undefined,
    projectStartTime: '',
    projectEndTime: '',
    involvedTrades: '',
    otherTrade: '',
    otherDescription: '',
    templateId: '',
    status: '',
    ...Object.fromEntries(attachmentConfigs.map((a) => [a.prop, ''])),
  });

  // 2. 验证规则定义
  const rules = reactive({
    projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    constructionUnit: [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
    constructionLocation: [{ required: true, message: '请输入施工地点', trigger: 'blur' }],
    workerCount: [{ required: true, message: '请输入施工人数', trigger: 'blur' }],
    otherDescription: [{ required: true, message: '请输入其他说明', trigger: 'blur' }],
    projectManagerName: [{ required: true, message: '请输入项目负责人', trigger: 'blur' }],
    projectManagerPhone1: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
    siteSafetyManagerName: [{ required: true, message: '请输入现场安全员', trigger: 'blur' }],
    siteSafetyPhone1: [{ required: true, message: '请输入安全员电话', trigger: 'blur' }],
    projectStartTime: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
    projectEndTime: [
      { required: true, message: '请选择结束日期', trigger: 'change' },
      {
        validator: (_rule: any, value: any, callback: any) => {
          if (value && formValue.projectStartTime && dayjs(value).isBefore(dayjs(formValue.projectStartTime))) {
            callback(new Error('结束时间不能早于开始时间'));
          } else {
            callback();
          }
        },
        trigger: 'change',
      },
    ],
    involvedTrades: [{ required: true, message: '请至少选择一个涉及工种', trigger: 'change' }],
    otherTrade: [{ required: true, message: '请补充其他工种说明', trigger: 'blur' }],
    constructionContent: [{ required: true, message: '请输入施工内容简述', trigger: 'blur' }],
    templateId: [{ required: true, message: '请选择审批流程', trigger: 'change' }],
    // 自动为所有附件添加必填验证
    ...Object.fromEntries(
      attachmentConfigs.map((a) => [
        a.prop,
        [{ required: a.required, message: `请上传${a.label}`, trigger: 'change' }],
      ]),
    ),
  });

  const handleTradeChange = (val: string[]) => {
    formValue.involvedTrades = val.join(',');
    formRef.value?.validateField('involvedTrades');
  };

  const handleUploadSuccess = async (prop: string, fileList: any[]) => {
    attachmentLists[prop] = fileList;
    const formatted = await formatAttachmentList(fileList);
    formValue[prop] = formatted.length > 0 ? JSON.stringify(formatted) : '';
    // 上传后主动触发单个字段校验，消除错误提示
    formRef.value?.validateField(prop);
  };

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

    try {
      const approvals = await getAllApproval();
      approvalOptions.value = approvals || [];

      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);
    }
  };
  // 下载模版
  const templateDownload = (item) => {
    const baseUrl = './skyeye-file-upload/sfysecurity/TEMPLATE/';

    switch (item.prop) {
      case 'personnelIdAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyCommitmentAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyEducationAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyAgreementAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'environmentCommitmentAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyNoticeAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'fireManagementAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'constructionPlanAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'ppeListAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'equipmentListAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'specialWorkerCertAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'specialEquipmentCertAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      // 无匹配时提示
      default:
        ElMessage.warning('该附件暂无模板可下载');
    }
  };
  const handleSave = (status: number) => {
    // status: 0 保存, 1 提交
    formRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        submiting.value = true;
        constructionSafetyUpdateConstruction({ ...formValue, submitStatus: status })
          .then(() => {
            ElMessage.success(status === 1 ? '提交成功!' : '保存成功!');
            router.push({ name: 'constructionSafetyManage' });
          })
          .catch((err) => {
            console.error(err);
          })
          .finally(() => {
            submiting.value = false;
          });
      } else {
        return false;
      }
    });
  };

  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>
