<template>
  <div class="p-4">
    <!-- 页面标题和按钮 -->
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center gap-2">
        <el-button icon="ArrowLeft" @click="router.back()">返回</el-button>
        <span class="text-lg font-medium">{{ isEdit ? '编辑' : '新增' }}维保</span>
      </div>
      <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
    </div>

    <el-card shadow="never">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
        <!-- 企业基本信息 -->
        <div class="text-base font-medium mb-4">企业基本信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="企业名称" prop="companyName">
              <el-select v-model="form.companyName" placeholder="请选择" class="w-full" filterable>
                <el-option label="企业A" value="企业A" />
                <el-option label="企业B" value="企业B" />
                <el-option label="企业C" value="企业C" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保类型" prop="maintainType">
              <el-select v-model="form.maintainType" placeholder="请选择" class="w-full">
                <el-option label="类型A" value="类型A" />
                <el-option label="类型B" value="类型B" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同编号" prop="contractNo">
              <el-input v-model="form.contractNo" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="企业地址" prop="companyAddress">
              <el-input v-model="form.companyAddress" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资质类型" prop="qualificationType">
              <el-input v-model="form.qualificationType" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中介机构" prop="intermediaryOrg">
              <el-input v-model="form.intermediaryOrg" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 维保信息 -->
        <div class="text-base font-medium mb-4 mt-6">维保信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维保单位" prop="maintainUnit">
              <el-select v-model="form.maintainUnit" placeholder="请选择" class="w-full">
                <el-option label="维保单位A" value="维保单位A" />
                <el-option label="维保单位B" value="维保单位B" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保人员" prop="maintainPerson">
              <el-select v-model="form.maintainPerson" placeholder="请选择" class="w-full">
                <el-option label="维保人员A" value="维保人员A" />
                <el-option label="维保人员B" value="维保人员B" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 维保证书 -->
        <div class="text-base font-medium mb-4 mt-6">维保证书</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维保人员证书" prop="maintainPersonCert">
              <el-input v-model="form.maintainPersonCert" placeholder="请输入人员证书名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保人员证书编号" prop="maintainPersonCertNo">
              <el-input v-model="form.maintainPersonCertNo" placeholder="请输入人员证书编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保证书有效期(月)" prop="maintainPersonCertValidity">
              <el-input v-model="form.maintainPersonCertValidity" placeholder="请选择" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="维保单位证书" prop="maintainUnitCert">
              <el-input v-model="form.maintainUnitCert" placeholder="请输入单位证书名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保单位证书编号" prop="maintainUnitCertNo">
              <el-input v-model="form.maintainUnitCertNo" placeholder="请输入单位证书编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保单位证书有效期" prop="maintainUnitCertValidity">
              <el-input v-model="form.maintainUnitCertValidity" placeholder="请输入单位证书有效期" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工作单位证书" prop="workUnitCert">
              <el-input v-model="form.workUnitCert" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作单位证书编号" prop="workUnitCertNo">
              <el-input v-model="form.workUnitCertNo" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="月检次数" prop="monthlyInspectionCount">
              <el-input v-model="form.monthlyInspectionCount" placeholder="请选择" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="维保类型" prop="maintainTypeRadio">
              <el-radio-group v-model="form.maintainTypeRadio">
                <el-radio value="1">新增维保</el-radio>
                <el-radio value="2">换维保单位</el-radio>
                <el-radio value="3">取消维保</el-radio>
                <el-radio value="4">产品维保</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="维保内容" prop="maintainContent">
              <el-input v-model="form.maintainContent" type="textarea" :rows="3" placeholder="请输入维保内容" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="附件路径" prop="attachmentPath">
              <el-upload action="#" :auto-upload="false" :file-list="fileList" :on-change="handleFileChange">
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="MaintainInfoAdd">
import { addMaintainInfo, updateMaintainInfo, getMaintainInfo } from '@/api/customer//maintainInfo';
import type { MaintainInfoForm } from '@/api/customer//maintainInfo/types';

const route = useRoute();
const router = useRouter();

const formRef = ref<any>(null);
const submitLoading = ref(false);
const isEdit = ref(false);
const fileList = ref<any[]>([]);

// 表单数据
const form = reactive<any>({
  companyName: '',
  maintainType: '',
  contractNo: '',
  companyAddress: '',
  qualificationType: '',
  intermediaryOrg: '',
  maintainUnit: '',
  maintainPerson: '',
  maintainPersonCert: '',
  maintainPersonCertNo: '',
  maintainPersonCertValidity: '',
  maintainUnitCert: '',
  maintainUnitCertNo: '',
  maintainUnitCertValidity: '',
  workUnitCert: '',
  workUnitCertNo: '',
  monthlyInspectionCount: '',
  maintainTypeRadio: '1',
  maintainContent: '',
  attachmentPath: '',
  status: '0'
});

// 表单验证规则
const rules = {
  companyName: [{ required: true, message: '请选择企业名称', trigger: 'change' }],
  maintainType: [{ required: true, message: '请选择维保类型', trigger: 'change' }]
};

// 初始化
onMounted(async () => {
  const id = route.query.id;
  if (id) {
    isEdit.value = true;
    await loadMaintainData(id as any);
  }
});

// 加载维保数据
const loadMaintainData = async (id: string | number) => {
  try {
    const res = await getMaintainInfo(id);
    Object.assign(form, res.data);
  } catch (error) {
    console.error('加载维保数据失败:', error);
    ElMessage.error('加载维保数据失败');
  }
};

// 文件变化
const handleFileChange = (file: any, fileList: any[]) => {
  // 处理文件上传逻辑
  console.log('文件变化:', file, fileList);
};

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate();
    submitLoading.value = true;

    if (isEdit.value) {
      await updateMaintainInfo(form);
      ElMessage.success('修改成功');
    } else {
      await addMaintainInfo(form);
      ElMessage.success('添加成功');
    }
    router.back();
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败，请重试');
  } finally {
    submitLoading.value = false;
  }
};
</script>
