yoe-market-web/src/views/customer/customerFile/customerInfo/add.vue

<template>
  <div class="p-4">
    <!-- 企业基本信息 -->
    <el-card shadow="never" class="mb-4">
      <template #header>
        <span class="font-medium"
          >企业基本信息/ <span style="color: #ff0033"> 客户编号：{{ customerNumber }} </span></span
        >
        <el-button style="float: right" type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
      </template>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属公司" prop="belongCompanyId">
              <el-select v-model="form.belongCompanyId" placeholder="请选择所属公司" class="w-full" filterable>
                <el-option v-for="item in companyList" :key="item.id" :label="`${item.companyCode} , ${item.companyName}`" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工商名称" prop="businessCustomerName">
              <el-input v-model="form.businessCustomerName" placeholder="请输入工商名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName" placeholder="请输入企业简称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票类型" prop="invoiceTypeId">
              <el-select v-model="form.invoiceTypeId" placeholder="请选择开票类型" class="w-full">
                <el-option
                  v-for="item in invoiceTypeList"
                  :key="item.id"
                  :label="`${item.invoiceTypeNo} , ${item.invoiceTypeName}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业规模" prop="enterpriseScaleId">
              <el-select v-model="form.enterpriseScaleId" placeholder="请选择企业规模" class="w-full" filterable>
                <el-option
                  v-for="item in enterpriseScaleList"
                  :key="item.id"
                  :label="`${item.enterpriseScaleCode} , ${item.enterpriseScaleName}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户类别" prop="customerTypeId">
              <el-select v-model="form.customerTypeId" placeholder="请选择客户类别" class="w-full" filterable>
                <el-option v-for="item in customerTypeList" :key="item.id" :label="`${item.typeCode} , ${item.typeName}`" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类别" prop="industryCategoryId">
              <el-select v-model="form.industryCategoryId" placeholder="请选择行业类别" class="w-full" filterable>
                <el-option
                  v-for="item in industryCategoryList"
                  :key="item.id"
                  :label="`${item.industryCode} , ${item.industryCategoryName}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户等级" prop="customerLevelId">
              <el-select v-model="form.customerLevelId" placeholder="请选择客户等级" class="w-full" filterable>
                <el-option v-for="item in customerLevelList" :key="item.id" :label="`${item.levelCode} , ${item.levelName}`" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="固定电话" prop="landline">
              <el-input v-model="form.landline" placeholder="请输入固定电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="网址" prop="url">
              <el-input v-model="form.url" placeholder="请输入网址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="postCode">
              <el-input v-model="form.postCode" placeholder="请输入邮政编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始时间" prop="validityFromDate">
              <el-date-picker v-model="form.validityFromDate" type="date" placeholder="请选择开始时间" class="w-full" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间" prop="validityToDate">
              <el-date-picker
                v-model="form.validityToDate"
                type="date"
                placeholder="请选择结束时间"
                class="w-full"
                style="width: 100%"
                :disabled-date="(time) => form.validityFromDate && time.getTime() < new Date(form.validityFromDate).getTime()"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="发票抬头" prop="invoiceTop">
              <el-input v-model="form.invoiceTop" placeholder="请输入发票抬头" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址" prop="address">
              <el-cascader v-model="codeArr" :options="regionData" placeholder="请选择" @change="handleChange" style="width: 100%"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-input v-model="form.address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 工商信息 -->
    <el-card shadow="never" class="mb-4">
      <template #header>
        <span class="font-medium">工商信息</span>
      </template>
      <el-form :model="businessForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="企业工商名称" prop="businessCustomerName">
              <el-input v-model="businessForm.businessCustomerName" placeholder="请输入企业工商名称" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会信用代码" prop="socialCreditCode">
              <el-input v-model="businessForm.socialCreditCode" placeholder="请输入社会信用代码" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalPersonName">
              <el-input v-model="businessForm.legalPersonName" placeholder="请输入法人姓名" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="businessForm.registeredCapital" placeholder="请输入注册资本" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记机关" prop="registrationAuthority">
              <el-input v-model="businessForm.registrationAuthority" placeholder="请输入登记机关" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成立日期" prop="establishmentDate">
              <el-input v-model="businessForm.establishmentDate" class="w-full" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="吊销日期" prop="revocationDate">
              <el-input v-model="businessForm.revocationDate" class="w-full" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记状态" prop="registrationStatus">
              <el-input v-model="businessForm.registrationStatus" placeholder="请输入登记状态" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实缴资本" prop="paidInCapital">
              <el-input v-model="businessForm.paidInCapital" placeholder="请输入实缴资本" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="详细地址" prop="businessAddress">
              <el-input v-model="businessForm.businessAddress" placeholder="请输入详细地址" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="营业执照" prop="businessLicense">
              <div
                v-if="!businessForm.businessLicense"
                class="upload-box"
                @click="businessLicenseSelectorVisible = true"
                style="
                  width: 360px;
                  height: 200px;
                  border: 2px dashed #d9d9d9;
                  border-radius: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  transition: all 0.3s;
                "
                @mouseenter="(e) => (e.currentTarget.style.borderColor = '#409eff')"
                @mouseleave="(e) => (e.currentTarget.style.borderColor = '#d9d9d9')"
              >
                <div style="text-align: center; color: #8c939d">
                  <el-icon :size="40" style="margin-bottom: 8px">
                    <Plus />
                  </el-icon>
                  <div style="font-size: 14px">点击上传</div>
                </div>
              </div>
              <div v-else style="position: relative; display: inline-block">
                <el-image
                  :src="businessForm.businessLicense"
                  style="width: 360px; height: 200px"
                  fit="contain"
                  :preview-src-list="[businessForm.businessLicense]"
                />
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  size="small"
                  style="position: absolute; top: 5px; right: 5px"
                  @click="businessForm.businessLicense = ''"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 营业执照选择器对话框 -->
    <FileSelector
      v-model="businessLicenseSelectorVisible"
      title="选择营业执照"
      :allowed-types="[1]"
      :multiple="false"
      :allow-upload="true"
      @confirm="handleBusinessLicenseSelected"
    />

    <!-- 联系人信息列表 -->
    <el-card shadow="never" class="mb-4">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">联系人信息列表</span>
          <el-button type="primary" @click="handleAddContact">添加联系人</el-button>
        </div>
      </template>
      <el-table :data="contactList" border>
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column label="联系人姓名" align="center" prop="contactName" min-width="120" />
        <el-table-column label="职位" align="center" prop="roleId" min-width="120">
          <template #default="{ row }">
            <span>{{ getRoleName(row.roleId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="phone" min-width="150" />
        <el-table-column label="固定电话" align="center" prop="officePhone" min-width="150" />
        <el-table-column label="邮箱地址" align="center" prop="email" min-width="180" />
        <el-table-column label="备注信息" align="center" prop="remark" min-width="180" />
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="{ row, $index }">
            <el-button link type="primary" @click="handleEditContact(row, $index)">编辑</el-button>
            <el-button link type="danger" @click="removeContact($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑联系人对话框 -->
    <add-contact-dialog v-model="contactDialogVisible" :edit-data="currentContact" @confirm="handleContactConfirm" />

    <!-- 销售信息 -->
    <el-card shadow="never" class="mb-4">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">销售信息</span>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </template>
      <el-form ref="salesFormRef" :model="salesForm" :rules="salesRules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="业务人员" prop="salesPersonId" required>
              <el-select v-model="salesForm.salesPersonId" placeholder="请选择业务人员" class="w-full" filterable @change="handleSalesPersonChange">
                <el-option v-for="item in comStaffList" :key="item.staffId" :label="`${item.staffCode} , ${item.staffName}`" :value="item.staffId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客服人员" prop="serviceStaffId" required>
              <el-select v-model="salesForm.serviceStaffId" placeholder="请选择客服人员" class="w-full" filterable>
                <el-option v-for="item in comStaffList" :key="item.staffId" :label="`${item.staffCode} , ${item.staffName}`" :value="item.staffId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门" prop="belongingDepartmentId">
              <el-input v-model="deptName" placeholder="请选择所属部门" class="w-full" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 企业开票信息 -->
    <el-card shadow="never" class="mb-4">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">企业开票信息</span>
          <el-button type="primary" @click="handleAddInvoice">新增</el-button>
        </div>
      </template>
      <el-table :data="invoiceList" border>
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column label="纳税人识别号" align="center" prop="taxId" min-width="180" />
        <el-table-column label="开户行名称" align="center" prop="bankName" min-width="180" />
        <el-table-column label="银行账户" align="center" prop="bankAccount" min-width="180" />
        <el-table-column label="是否主账号" align="center" prop="isPrimaryAccount" min-width="120">
          <template #default="{ row }">
            <span>{{ row.isPrimaryAccount === '0' ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" min-width="180" />
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template #default="{ row, $index }">
            <el-button link type="primary" @click="handleEditInvoice(row, $index)">编辑</el-button>
            <el-button link type="danger" @click="removeInvoice($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑开票信息对话框 -->
    <add-invoice-dialog v-model="invoiceDialogVisible" :edit-data="currentInvoice" @confirm="handleInvoiceConfirm" />
  </div>
</template>

<script setup lang="ts" name="CustomerInfoAdd">
import { listCustomerInfo, getCustomerInfo, addCustomerInfo } from '@/api/customer/customerFile/customerInfo';
import { CustomerInfoForm } from '@/api/customer/customerFile/customerInfo/types';
import { listInvoiceType } from '@/api/customer/invoiceType';
import { InvoiceTypeVO, InvoiceTypeQuery } from '@/api/customer/invoiceType/types';
import { listSettlementMethod } from '@/api/customer/settlementMethod';
import { SettlementMethodVO, SettlementMethodQuery } from '@/api/customer/settlementMethod/types';
import { listCustomerLevel } from '@/api/customer/customerLevel';
import { CustomerLevelVO, CustomerLevelQuery } from '@/api/customer/customerLevel/types';
import { listCustomerType } from '@/api/customer/customerType';
import { CustomerTypeVO, CustomerTypeQuery } from '@/api/customer/customerType/types';
import FileSelector from '@/components/FileSelector/index.vue';
import { generateCustomerNumber } from '@/utils/customerNumber';
import type { CustomerContactForm } from '@/api/customer/customerFile/customerContact/types';
import type { InvoiceInfoForm } from '@/api/customer/customerFile/invoiceInfo/types';
import type { SalesInfoForm } from '@/api/customer/customerFile/salesInfo/types';
import type { BusinessInfoForm } from '@/api/customer/customerFile/businessInfo/types';
import AddContactDialog from './components/addContactDialog.vue';
import AddInvoiceDialog from './components/addInvoiceDialog.vue';
import { regionData } from 'element-china-area-data';
import { listEnterpriseScale } from '@/api/customer/customerCategory/enterpriseScale';
import { listIndustryCategory } from '@/api/customer/customerCategory/industryCategory';
import type { EnterpriseScaleVO } from '@/api/customer/customerCategory/enterpriseScale/types';
import type { IndustryCategoryVO } from '@/api/customer/customerCategory/industryCategory/types';
import { listComStaff, getComStaff } from '@/api/company/comStaff';
import { ComStaffVO, ComStaffQuery, ComStaffForm } from '@/api/company/comStaff/types';
import { listDept, getDept, listDeptExcludeChild } from '@/api/system/dept';
import { DeptVO } from '@/api/system/dept/types';

import { listCompany } from '@/api/company/company';
import { CompanyVO } from '@/api/company/company/types';
import { Plus, Delete } from '@element-plus/icons-vue';
import { log } from 'console';

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

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

const formRef = ref<any>(null);
const salesFormRef = ref<any>(null);
const submitLoading = ref(false);

// 生成客户编号
const customerNumber = ref('');
const isEdit = ref(false);
const customerId = ref<string>('');
const codeArr = ref([]);

// 下拉框数据列表
const enterpriseScaleList = ref<EnterpriseScaleVO[]>([]);
const industryCategoryList = ref<IndustryCategoryVO[]>([]);
const invoiceTypeList = ref<InvoiceTypeVO[]>([]);
const companyList = ref<CompanyVO[]>([]);
const settlementMethodList = ref<SettlementMethodVO[]>([]);
const customerLevelList = ref<CustomerLevelVO[]>([]);
const customerTypeList = ref<CustomerTypeVO[]>([]);
const comStaffList = ref<ComStaffVO[]>([]);
const comDeptList = ref<DeptVO[]>([]);

// Logo选择器相关
const logoSelectorVisible = ref(false);
const businessLicenseSelectorVisible = ref(false);

// Logo选择处理
const handleLogoSelected = (files: any[]) => {
  if (files && files.length > 0) {
    const file = files[0]; // 取第一个文件
    if (file && (file.url || file.path)) {
      //   form.value.logo = file.url || file.path;
      ElMessage.success('Logo选择成功');

      // 选择完成后清理表单验证状态
      nextTick(() => {
        formRef.value?.clearValidate();
      });
    } else {
      ElMessage.error('请选择有效的图片文件');
    }
  } else {
    ElMessage.error('请选择有效的图片文件');
  }
};

// 营业执照选择处理
const handleBusinessLicenseSelected = (files: any[]) => {
  if (files && files.length > 0) {
    const file = files[0]; // 取第一个文件
    if (file && (file.url || file.path)) {
      businessForm.businessLicense = file.url || file.path;
      ElMessage.success('营业执照选择成功');

      // 选择完成后清理表单验证状态
      nextTick(() => {
        formRef.value?.clearValidate('businessLicense');
      });
    } else {
      ElMessage.error('请选择有效的图片文件');
    }
  } else {
    ElMessage.error('请选择有效的图片文件');
  }
};

// 监听对话框关闭，清理表单验证状态
watch(logoSelectorVisible, (newVal) => {
  if (!newVal) {
    // 对话框关闭后清理可能的表单验证状态
    nextTick(() => {
      formRef.value?.clearValidate();
    });
  }
});

// 初始化
onMounted(async () => {
  // 加载下拉框数据
  await loadEnterpriseScaleList();
  await loadIndustryCategoryList();
  await loadInvoiceTypeList();
  await loadCompanyList();
  await loadSettlementMethodList();
  await loadCustomerLevelList();
  await loadCustomerTypeList();
  await loadComStaffList();
  await loadComDeptList();

  // 判断是新增还是编辑
  const id = route.query.id;
  if (id) {
    // 编辑模式
    isEdit.value = true;
    customerId.value = id as string;
    await loadCustomerData(id);
  } else {
    // 新增模式，生成客户编号
    customerNumber.value = generateCustomerNumber();
  }
});

// 加载客户数据（编辑模式）
const loadCustomerData = async (id: string) => {
  try {
    const res = await getCustomerInfo(id);
    const data = res.data;

    // 填充基本信息
    Object.assign(form, data);
    customerNumber.value = data.customerNo || '';

    // 填充工商信息
    if (data.customerBusinessInfoVo) {
      Object.assign(businessForm, data.customerBusinessInfoVo);
    }

    // 填充销售信息
    if (data.customerSalesInfoVo) {
      Object.assign(salesForm, data.customerSalesInfoVo);
    }

    // 填充联系人列表
    if (data.customerContactVoList) {
      contactList.value = data.customerContactVoList;
    }

    // 填充开票信息列表
    if (data.customerInvoiceInfoVoList) {
      invoiceList.value = data.customerInvoiceInfoVoList;
    }

    // 如果有省市区编码，回显到级联选择器
    if (data.regProvincialNo && data.regCityNo && data.regCountyNo) {
      codeArr.value = [data.regProvincialNo, data.regCityNo, data.regCountyNo] as any;
    }
  } catch (error) {
    console.error('加载客户数据失败:', error);
    ElMessage.error('加载客户数据失败');
  }
};

// 加载企业规模列表
const loadEnterpriseScaleList = async () => {
  try {
    const res = await listEnterpriseScale();
    enterpriseScaleList.value = res.rows || [];
  } catch (error) {
    console.error('加载企业规模列表失败:', error);
  }
};

// 加载行业类别列表
const loadIndustryCategoryList = async () => {
  try {
    const res = await listIndustryCategory();
    industryCategoryList.value = res.rows || [];
  } catch (error) {
    console.error('加载行业类别列表失败:', error);
  }
};

// 加载开票类型列表
const loadInvoiceTypeList = async () => {
  try {
    const res = await listInvoiceType();
    invoiceTypeList.value = res.rows || [];
  } catch (error) {
    console.error('加载开票类型列表失败:', error);
  }
};

// 加载公司列表
const loadCompanyList = async () => {
  try {
    const query: any = { isShow: '0' };
    const res = await listCompany(query);
    companyList.value = res.rows || [];
  } catch (error) {
    console.error('加载公司列表失败:', error);
  }
};

// 加载结算方式列表
const loadSettlementMethodList = async () => {
  try {
    const query: any = { isShow: '0' };
    const res = await listSettlementMethod(query);
    settlementMethodList.value = res.rows || [];
  } catch (error) {
    console.error('加载结算方式列表失败:', error);
  }
};

// 加载客户等级列表
const loadCustomerLevelList = async () => {
  try {
    const res = await listCustomerLevel();
    customerLevelList.value = res.rows || [];
  } catch (error) {
    console.error('加载客户等级列表失败:', error);
  }
};

// 加载客户类别列表
const loadCustomerTypeList = async () => {
  try {
    const res = await listCustomerType();
    customerTypeList.value = res.rows || [];
  } catch (error) {
    console.error('加载客户类别列表失败:', error);
  }
};

// 加载员工列表
const loadComStaffList = async () => {
  try {
    const query: ComStaffQuery = { status: '0' };
    const res = await listComStaff(query);
    comStaffList.value = res.rows || [];
  } catch (error) {
    console.error('加载员工列表失败:', error);
  }
};

// 加载部门列表
const loadComDeptList = async () => {
  try {
    const res = await listDept();
    // 处理可能的不同返回结构
    comDeptList.value = res.rows || res.data || [];
  } catch (error) {
    console.error('加载部门列表失败:', error);
  }
};

// 企业基本信息表单
const form = reactive<CustomerInfoForm>({
  customerNo: '',
  belongCompanyId: undefined,
  companyName: '',
  businessCustomerName: '',
  shortName: '',
  invoiceTypeId: undefined,
  enterpriseScaleId: undefined,
  customerTypeId: undefined,
  industryCategoryId: undefined,
  customerLevelId: undefined,
  landline: '',
  fax: '',
  url: '',
  postCode: '',
  validityFromDate: undefined,
  validityToDate: undefined,
  invoiceTop: '',
  address: '',
  status: '0',
  remark: ''
});

// 工商信息
const businessForm = reactive<BusinessInfoForm>({
  businessCustomerName: '',
  socialCreditCode: '',
  legalPersonName: '',
  registeredCapital: '',
  registrationAuthority: '',
  establishmentDate: '',
  revocationDate: '',
  registrationStatus: '',
  paidInCapital: undefined,
  businessAddress: '',
  businessLicense: '',
  status: '0'
});

// 联系人列表
const contactList = ref<CustomerContactForm[]>([]);
const contactDialogVisible = ref(false);
const currentContact = ref<CustomerContactForm | undefined>(undefined);
const currentContactIndex = ref<number>(-1);

// 销售信息
const salesForm = reactive<SalesInfoForm>({
  salesPersonId: undefined,
  serviceStaffId: undefined,
  belongingDepartmentId: undefined,
  status: '0'
});

// 开票信息列表
const invoiceList = ref<InvoiceInfoForm[]>([]);
const invoiceDialogVisible = ref(false);
const currentInvoice = ref<InvoiceInfoForm | undefined>(undefined);
const currentInvoiceIndex = ref<number>(-1);

// 表单验证规则
const rules = {
  belongCompanyId: [{ required: true, message: '请选择所属公司', trigger: 'change' }],
  customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  businessCustomerName: [{ required: true, message: '请输入工商名称', trigger: 'blur' }],
  shortName: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
  invoiceTypeId: [{ required: true, message: '请选择开票类型', trigger: 'change' }],
  enterpriseScaleId: [{ required: true, message: '请选择企业规模', trigger: 'change' }],
  customerTypeId: [{ required: true, message: '请选择客户类别', trigger: 'change' }],
  industryCategoryId: [{ required: true, message: '请选择行业类别', trigger: 'change' }],
  customerLevelId: [{ required: true, message: '请选择客户等级', trigger: 'change' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
};

// 销售信息表单验证规则
const salesRules = {
  salesPersonId: [{ required: true, message: '请选择业务人员', trigger: 'change' }],
  serviceStaffId: [{ required: true, message: '请选择客服人员', trigger: 'change' }]
};

// 获取角色名称
const getRoleName = (roleId: string | number | undefined) => {
  const roleMap: Record<string, string> = {
    '1': '采购经理',
    '2': '财务',
    '3': '其他'
  };
  return roleMap[String(roleId)] || '-';
};

// 打开添加联系人对话框
const handleAddContact = () => {
  currentContact.value = undefined;
  currentContactIndex.value = -1;
  contactDialogVisible.value = true;
};
/** 处理区域选择变化 */
const handleChange = (val: string[]) => {
  // 保存编码
  form.regProvincialNo = val[0];
  form.regCityNo = val[1];
  form.regCountyNo = val[2];

  // 根据编码获取名称
  const names: string[] = [];
  if (val[0]) {
    const province = regionData.find((item: any) => item.value === val[0]);
    if (province) {
      names.push(province.label);

      if (val[1] && province.children) {
        const city = province.children.find((item: any) => item.value === val[1]);
        if (city) {
          names.push(city.label);

          if (val[2] && city.children) {
            const county = city.children.find((item: any) => item.value === val[2]);
            if (county) {
              names.push(county.label);
            }
          }
        }
      }
    }
  }

  // 将省市区名称用斜杠连接
  form.provincialCityCounty = names.join('/');
};

// 处理业务人员选择变化
const handleSalesPersonChange = (staffId: any) => {
  // 根据选中的业务人员ID，找到对应的部门ID
  const selectedStaff = comStaffList.value.find((staff) => staff.staffId === staffId);
  if (selectedStaff && selectedStaff.deptId) {
    // 确保 deptId 的类型一致，watch 会自动触发加载部门名称
    salesForm.belongingDepartmentId = String(selectedStaff.deptId);
  }
};

// 部门名称（响应式）
const deptName = ref('');

// 监听部门ID变化，自动加载部门名称
watch(
  () => salesForm.belongingDepartmentId,
  async (newDeptId) => {
    if (!newDeptId) {
      deptName.value = '';
      return;
    }

    // 先从列表中查找
    const dept = comDeptList.value.find((d) => String(d.deptId) === String(newDeptId));
    if (dept) {
      deptName.value = dept.deptName;
      return;
    }

    // 如果列表中没有，从API获取
    try {
      const res = await getDept(newDeptId);
      if (res.data) {
        deptName.value = res.data.deptName;
        comDeptList.value.push(res.data);
      }
    } catch (error) {
      console.error('获取部门信息失败:', error);
      deptName.value = String(newDeptId);
    }
  },
  { immediate: true }
);

// 编辑联系人
const handleEditContact = (row: CustomerContactForm, index: number) => {
  currentContact.value = { ...row };
  currentContactIndex.value = index;
  contactDialogVisible.value = true;
};

// 确认添加/编辑联系人
const handleContactConfirm = (data: CustomerContactForm) => {
  if (currentContactIndex.value >= 0) {
    // 编辑
    contactList.value[currentContactIndex.value] = data;
  } else {
    // 新增
    contactList.value.push(data);
  }
};

// 删除联系人
const removeContact = (index: number) => {
  ElMessageBox.confirm('确定要删除该联系人吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      contactList.value.splice(index, 1);
      ElMessage.success('删除成功');
    })
    .catch(() => {});
};

// 打开添加开票信息对话框
const handleAddInvoice = () => {
  currentInvoice.value = undefined;
  currentInvoiceIndex.value = -1;
  invoiceDialogVisible.value = true;
};

// 编辑开票信息
const handleEditInvoice = (row: InvoiceInfoForm, index: number) => {
  currentInvoice.value = { ...row };
  currentInvoiceIndex.value = index;
  invoiceDialogVisible.value = true;
};

// 确认添加/编辑开票信息
const handleInvoiceConfirm = (data: InvoiceInfoForm) => {
  if (currentInvoiceIndex.value >= 0) {
    // 编辑
    invoiceList.value[currentInvoiceIndex.value] = data;
  } else {
    // 新增
    invoiceList.value.push(data);
  }
};

// 删除开票信息
const removeInvoice = (index: number) => {
  ElMessageBox.confirm('确定要删除该开票信息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      invoiceList.value.splice(index, 1);
      ElMessage.success('删除成功');
    })
    .catch(() => {});
};

// 提交表单
const handleSubmit = async () => {
  try {
    // 验证基本信息表单
    await formRef.value?.validate();
    // 验证销售信息表单
    await salesFormRef.value?.validate();

    submitLoading.value = true;

    // 将客户编号赋值到表单
    form.customerNo = customerNumber.value;

    // 组装提交数据，按照后端要求的结构
    const submitData: CustomerInfoForm = {
      ...form,
      customerBusinessBo: businessForm,
      customerSalesInfoBo: salesForm,
      customerContactBoList: contactList.value,
      customerInvoiceInfoBoList: invoiceList.value
    };

    await addCustomerInfo(submitData);
    ElMessage.success('添加成功');

    router.back();
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败，请重试');
  } finally {
    submitLoading.value = false;
  }
};
</script>