<template>
  <div class="app-container add-customer-container">
    <div class="header-toolbar">
      <div class="header-left">
        <el-button icon="ArrowLeft" link @click="handleBack">返回</el-button>
        <span class="breadcrumb">基本信息 / <span class="customer-no">客户编号:</span></span>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="Check" @click="handleSubmit" class="submit-btn">提交</el-button>
      </div>
    </div>

    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="custom-form">
      <!-- 基本信息 Section -->
      <div class="form-section">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="所属公司:" prop="belongCompanyId" required>
              <el-select v-model="form.belongCompanyId" placeholder="请选择" class="w100">
                <el-option v-for="item in companyOptions" :key="item.id" :label="item.companyName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称:" prop="customerName" required>
              <el-input v-model="form.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工商名称:" prop="businessCustomerName" required>
              <el-input v-model="form.businessCustomerName" placeholder="请输入工商名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="客户来源:" prop="customerSourceId" required>
              <el-select v-model="form.customerSourceId" placeholder="请选择" class="w100">
                <el-option v-for="item in sourceOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业类型:" prop="enterpriseTypeId" required>
              <el-select v-model="form.enterpriseTypeId" placeholder="请选择" class="w100">
                <el-option v-for="item in corpTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业规模:" prop="enterpriseScale" required>
               <el-select v-model="form.enterpriseScale" placeholder="请选择" class="w100">
                 <el-option v-for="item in scaleOptions" :key="item.id" :label="item.enterpriseScaleName" :value="item.id" />
               </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="客户类别:" prop="customerCategory" required>
               <el-select v-model="form.customerCategory" placeholder="请选择" class="w100">
                 <el-option v-for="item in categoryOptions" :key="item.id" :label="item.typeName" :value="item.id" />
               </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属行业:" prop="industryCategoryId" required>
              <el-select v-model="form.industryCategoryId" placeholder="请选择" class="w100">
                <el-option v-for="item in industryOptions" :key="item.id" :label="item.industryCategoryName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户等级:" prop="customerLevelId" required>
              <el-select v-model="form.customerLevelId" placeholder="请选择" class="w100">
                <el-option v-for="item in levelOptions" :key="item.id" :label="item.levelName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

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

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="邮政编码:">
              <el-input v-model="form.zipCode" placeholder="请输入邮政编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱:">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="详细地址:" required prop="provincialCityCounty">
               <el-input v-model="form.provincialCityCounty" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-input v-model="form.address" placeholder="请输入详细地址" />
          </el-col>
        </el-row>
      </div>

      <!-- 工商信息 Section -->
      <div class="form-title">工商信息</div>
      <div class="form-section business-info">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="企业工商名称:">
              <el-input v-model="form.businessName" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会信用代码:">
              <el-input v-model="form.creditCode" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人姓名:">
              <el-input v-model="form.legalPerson" class="readonly-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="注册资本:">
              <el-input v-model="form.registeredCapital" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记机关:">
              <el-input v-model="form.registrationAuthority" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成立日期:">
              <el-input v-model="form.establishedDate" class="readonly-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="吊销日期:">
              <el-input v-model="form.revocationDate" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记状态:">
              <el-input v-model="form.registrationStatus" class="readonly-input" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实缴资本:">
              <el-input v-model="form.paidInCapital" class="readonly-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item label="详细地址:">
              <el-input v-model="form.businessAddress" placeholder="请输入详细地址" class="readonly-input" />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="upload-container">
          <div class="upload-item">
            <div class="upload-label">营业执照:</div>
            <div class="upload-box">
              <el-icon class="plus-icon"><Plus /></el-icon>
            </div>
          </div>
          <div class="upload-item">
            <div class="upload-label">正面身份证:</div>
            <div class="upload-box">
              <el-icon class="plus-icon"><Plus /></el-icon>
            </div>
          </div>
          <div class="upload-item">
            <div class="upload-label">反面身份证:</div>
            <div class="upload-box">
              <el-icon class="plus-icon"><Plus /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 销售信息 Section -->
      <div class="form-title">销售信息</div>
      <div class="form-section">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="负责人:">
               <el-select v-model="form.salesPersonId" placeholder="请选择" class="w100">
                 <el-option v-for="item in staffOptions" :key="item.staffId" :label="item.staffName" :value="item.staffId" />
               </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客服支持:">
               <el-select v-model="form.serviceStaffId" placeholder="请选择" class="w100">
                 <el-option v-for="item in staffOptions" :key="item.staffId" :label="item.staffName" :value="item.staffId" />
               </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购规模:">
               <el-input v-model="form.procurementScale" placeholder="请输入采购规模">
                 <template #append>万</template>
               </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="销售目标:">
               <el-input v-model="form.salesTarget" placeholder="请输入销售目标">
                 <template #append>万</template>
               </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 联系人信息 Section -->
      <div class="form-title contact-title">
        <span>联系人信息</span>
        <el-button type="primary" icon="Plus" size="small" @click="handleAddContact">新增</el-button>
      </div>
      <div class="form-section">
        <el-table :data="contactList" border class="contact-table">
          <el-table-column label="联系人" align="center" prop="contactName" />
          <el-table-column label="部门" align="center" prop="deptName" />
          <el-table-column label="职位" align="center" prop="roleName" />
          <el-table-column label="手机号码" align="center" prop="phone" />
          <el-table-column label="办公电话" align="center" prop="officePhone" />
          <el-table-column label="操作" align="center" width="100">
            <template #default="scope">
              <el-button link type="primary">删除</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <div class="empty-table">暂无数据</div>
          </template>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { Plus } from '@element-plus/icons-vue';
import { listCompanyOption, addCustomerInfo } from "@/api/customer/customerInfo/index";
import { listIndustryCategory } from "@/api/customer/industryCategory";
import { listLevel } from "@/api/customer/customerLevel";
import { selectStaffOptionList } from "@/api/customer/crmStaff";
import { listDictByType, listCommonDict, listCustomerTypeOption } from "@/api/customer/customerDict";
import { listEnterpriseScale } from "@/api/customer/enterpriseScale";

const { proxy } = getCurrentInstance();
const router = useRouter();
const formRef = ref(null);

const form = reactive({
  belongCompanyId: undefined,
  customerName: '',
  businessCustomerName: '',
  customerSourceId: undefined,
  enterpriseTypeId: undefined,
  enterpriseScale: undefined,
  customerCategory: undefined,
  industryCategoryId: undefined,
  customerLevelId: undefined,
  landline: '',
  fax: '',
  website: '',
  zipCode: '',
  email: '',
  provincialCityCounty: '',
  address: '',
  // 工商
  businessName: '',
  creditCode: '',
  legalPerson: '',
  registeredCapital: '',
  registrationAuthority: '',
  establishedDate: '',
  revocationDate: '',
  registrationStatus: '',
  paidInCapital: '',
  businessAddress: '',
  // 销售
  salesPersonId: undefined,
  serviceStaffId: undefined,
  procurementScale: '',
  salesTarget: ''
});

const rules = reactive({
  belongCompanyId: [{ required: true, message: "所属公司不能为空", trigger: "change" }],
  customerName: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
  businessCustomerName: [{ required: true, message: "工商名称不能为空", trigger: "blur" }],
  customerSourceId: [{ required: true, message: "客户来源不能为空", trigger: "change" }],
  enterpriseTypeId: [{ required: true, message: "企业类型不能为空", trigger: "change" }],
  enterpriseScale: [{ required: true, message: "企业规模不能为空", trigger: "change" }],
  customerCategory: [{ required: true, message: "客户类别不能为空", trigger: "change" }],
  industryCategoryId: [{ required: true, message: "所属行业不能为空", trigger: "change" }],
  customerLevelId: [{ required: true, message: "客户等级不能为空", trigger: "change" }],
  landline: [{ required: true, message: "固定电话不能为空", trigger: "blur" }],
  provincialCityCounty: [{ required: true, message: "详细地址不能为空", trigger: "blur" }]
});

const contactList = ref([]);
const companyOptions = ref([]);
const industryOptions = ref([]);
const levelOptions = ref([]);
const staffOptions = ref([]);
const sourceOptions = ref([]);
const corpTypeOptions = ref([]);
const scaleOptions = ref([]);
const categoryOptions = ref([]);

const initOptions = async () => {
  try {
    const res = await listCompanyOption();
    companyOptions.value = res.data || [];
  } catch (error) {
    console.error("获取公司列表失败", error);
  }
  listIndustryCategory().then(res => industryOptions.value = res.data || []);
  listLevel().then(res => levelOptions.value = res.rows || []);
  selectStaffOptionList().then(res => staffOptions.value = res.data || []);
  listCommonDict("K0001").then(res => sourceOptions.value = res.data || []);
  listDictByType("enterprise_type").then(res => corpTypeOptions.value = res.data || []);
  listEnterpriseScale().then(res => scaleOptions.value = res.data || []);
  listCustomerTypeOption().then(res => categoryOptions.value = res.data || []);
};

const handleBack = () => { router.back(); };
const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      addCustomerInfo(form).then(res => {
        proxy.$modal.msgSuccess("新增客户成功");
        handleBack();
      });
    }
  });
};
const handleAddContact = () => {
  proxy.$modal.msg("添加联系人功能开发中");
};

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

<style scoped lang="scss">
.add-customer-container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f5;

  .breadcrumb {
    font-size: 14px;
    color: #333;
    margin-left: 10px;
    .customer-no { color: #f56c6c; margin-left: 5px; font-weight: bold; }
  }
  
  .submit-btn {
    background-color: #3b82f6; border-color: #3b82f6;
  }
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e293b;
  margin: 30px 0 20px;
  padding-left: 10px;
  border-left: 4px solid #3b82f6;
}

.contact-title {
  display: flex; justify-content: space-between; align-items: center;
}

.form-section {
  padding: 10px 0;
  
  &.business-info {
    :deep(.el-input__wrapper) {
      background-color: #f8fafc;
    }
  }
}

.w100 { width: 100%; }

.upload-container {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  padding-left: 100px; // 与 el-form 的 label-width 对齐
  padding-right: 150px; 
  
  .upload-item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
  }
  
  .upload-label { 
    font-size: 13px; 
    color: #334155; 
    margin-bottom: 8px; 
    font-weight: normal; 
  }
  
  .upload-box {
    width: 154px; 
    height: 154px; 
    border: 1.2px dashed #94a3b8; // 稍微加深一点虚线颜色
    border-radius: 4px;
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer; 
    background-color: #fbfcfd;
    
    .plus-icon {
      font-size: 40px;
      color: #94a3b8;
      font-weight: 200;
    }
  }
}

.contact-table {
  margin-top: 10px;
  :deep(th) { background-color: #f8fafc !important; }
}

.empty-table { padding: 40px 0; color: #94a3b8; }

.readonly-input {
  :deep(.el-input__wrapper) { background-color: #f8faff !important; }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #475569;
}
</style>
