<template>
  <!-- 移动端布局 -->
  <el-drawer v-if="isMobile" v-model="dialogVisible" :title="dialogTitle" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true" :append-to-body="true" class="mobile-form-drawer">
    <div class="mobile-form" v-loading="formLoading">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
        <!-- 基础信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">基础信息</div>
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="formData.telephone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱" />
          </el-form-item>
          <!-- <el-form-item label="传真" prop="fax">
            <el-input v-model="formData.fax" placeholder="请输入传真" />
          </el-form-item> -->
          <!-- <el-form-item label="标签集合" prop="tags">
            <el-input v-model="formData.tags" placeholder="请输入标签，逗号分隔" />
          </el-form-item> -->
          <!-- <el-form-item label="税率(%)" prop="taxPercent">
            <el-input-number v-model="formData.taxPercent" :min="0" :precision="4" placeholder="请输入税率" style="width:100%" />
          </el-form-item> -->
          <el-form-item label="企业类型" prop="companyType">
            <el-select v-model="formData.companyType" placeholder="请选择企业类型" style="width:100%">
              <el-option label="餐饮" :value="1" />
              <el-option label="食品批发" :value="2" />
              <el-option label="制造" :value="3" />
              <el-option label="超市" :value="4" />
              <el-option label="其他" :value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业规模" prop="businessScale">
            <el-input v-model="formData.businessScale" placeholder="请输入企业规模" />
          </el-form-item>
          <el-form-item label="客户来源" prop="leadSourceType">
            <el-select v-model="formData.leadSourceType" placeholder="请选择来源类型" style="width:100%">
              <el-option label="展会" :value="1" />
              <el-option label="地推" :value="2" />
              <el-option label="转介绍" :value="3" />
              <el-option label="官网" :value="4" />
              <el-option label="平台" :value="5" />
              <el-option label="电销" :value="6" />
              <el-option label="老客户" :value="7" />
              <el-option label="其他" :value="99" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="年采购量" prop="annualPurchaseVolume">
            <el-input-number v-model="formData.annualPurchaseVolume" :min="0" :precision="2" placeholder="请输入年采购量" style="width:100%" />
          </el-form-item>
          <el-form-item label="年采购金额" prop="annualPurchaseAmount">
            <el-input-number v-model="formData.annualPurchaseAmount" :min="0" :precision="2" placeholder="请输入年采购金额" style="width:100%" />
          </el-form-item> -->
        </div>

        <!-- 财务信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">财务信息</div>
          <el-form-item label="纳税人识别号" prop="taxNo">
            <el-input v-model="formData.taxNo" placeholder="请输入纳税人识别号" />
          </el-form-item>
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="formData.bankName" placeholder="请输入开户行" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bankAccount">
            <el-input v-model="formData.bankAccount" placeholder="请输入开户账号" />
          </el-form-item>
          <el-form-item label="开户地址" prop="bankAddress">
            <el-input v-model="formData.bankAddress" placeholder="请输入开户地址" />
          </el-form-item>
        </div>

        <!-- 偏好信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">偏好信息</div>
          <el-form-item label="偏好产品" prop="preferredProducts">
            <el-input v-model="formData.preferredProducts" placeholder="请输入偏好产品或品类" />
          </el-form-item>
          <el-form-item label="偏好包装" prop="preferredPackaging">
            <el-input v-model="formData.preferredPackaging" placeholder="请输入偏好包装形式" />
          </el-form-item>
          <!-- <el-form-item label="质量/认证要求" prop="qualityCertRequirements">
            <el-input v-model="formData.qualityCertRequirements" placeholder="请输入质量/认证要求" />
          </el-form-item> -->
          <el-form-item label="偏好交期" prop="deliveryCyclePrefer">
            <el-input v-model="formData.deliveryCyclePrefer" placeholder="请输入偏好交期/周期" />
          </el-form-item>
          <!-- <el-form-item label="付款条件" prop="paymentTerms">
            <el-input v-model="formData.paymentTerms" placeholder="请输入付款条件" />
          </el-form-item> -->
        </div>

        <!-- <el-form-item label="上次交付时间" prop="lastDeliveryTime">
          <el-date-picker v-model="formData.lastDeliveryTime" type="datetime" value-format="x" placeholder="选择上次交付时间" style="width:100%" />
        </el-form-item> -->
        <!-- <el-form-item label="产品送达地址" prop="deliveryAddress">
          <el-input type="textarea" v-model="formData.deliveryAddress" placeholder="请输入产品送达地址" />
        </el-form-item> -->
        <!-- 资质与风险 -->
        <!-- <el-form-item label="营业执照编号" prop="businessLicenseNo">
          <el-input v-model="formData.businessLicenseNo" placeholder="请输入营业执照编号" />
        </el-form-item>
        <el-form-item label="许可证有效期" prop="licenseValidity">
          <el-date-picker v-model="formData.licenseValidity" type="date" value-format="x" placeholder="选择许可证有效期" style="width:100%" />
        </el-form-item> -->
        <!-- <el-form-item label="客户风险级别" prop="riskLevel">
          <el-select v-model="formData.riskLevel" placeholder="请选择风险级别" style="width:100%">
            <el-option label="低" :value="1" />
            <el-option label="中" :value="2" />
            <el-option label="高" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="指定物流合作伙伴" prop="logisticsPartner">
          <el-input v-model="formData.logisticsPartner" placeholder="请输入指定物流合作伙伴" />
        </el-form-item>
        <el-form-item label="需冷链配送" prop="requiresColdChain">
          <el-radio-group v-model="formData.requiresColdChain">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务区域" prop="serviceRegion">
          <el-input v-model="formData.serviceRegion" placeholder="请输入服务区域" />
        </el-form-item>
        <el-form-item label="客情等级" prop="relationshipLevel">
          <el-select v-model="formData.relationshipLevel" placeholder="请选择客情等级" style="width:100%">
            <el-option label="一般" :value="1" />
            <el-option label="良好" :value="2" />
            <el-option label="紧密" :value="3" />
            <el-option label="关键" :value="4" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="来源详情" prop="leadSourceDetail">
          <el-input type="textarea" v-model="formData.leadSourceDetail" placeholder="请输入来源详情" />
        </el-form-item>
        <el-form-item label="线索评分" prop="leadScore">
          <el-input-number v-model="formData.leadScore" :min="0" :max="100" :precision="0" placeholder="请输入线索评分" style="width:100%" />
        </el-form-item>
        <el-form-item label="潜力等级" prop="potentialLevel">
          <el-select v-model="formData.potentialLevel" placeholder="请选择潜力等级" style="width:100%">
            <el-option label="低" :value="1" />
            <el-option label="中" :value="2" />
            <el-option label="高" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="预估年采购量（吨/件）" prop="expectedAnnualVolume">
          <el-input-number v-model="formData.expectedAnnualVolume" :min="0" :precision="2" placeholder="请输入预估年采购量" style="width:100%" />
        </el-form-item>
        <el-form-item label="预估年采购金额" prop="expectedAnnualAmount">
          <el-input-number v-model="formData.expectedAnnualAmount" :min="0" :precision="2" placeholder="请输入预估年采购金额" style="width:100%" />
        </el-form-item>
        <el-form-item label="采购周期" prop="purchaseCycle">
          <el-input v-model="formData.purchaseCycle" placeholder="如周采/月采/季度/项目制" />
        </el-form-item> -->

        <!-- 统计信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">统计信息</div>
          <el-form-item label="年度订单数" prop="annualOrderNums">
            <el-input :model-value="formatInteger(formData.annualOrderNums)" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="年度订单额" prop="annualOrderAmounts">
            <el-input :model-value="formatAmount(formData.annualOrderAmounts)" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="年度已收款" prop="annualReceivedAmounts">
            <el-input :model-value="formatAmount(formData.annualReceivedAmounts)" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="累计未收款" prop="totalUnreceivedAmounts">
            <el-input :model-value="formatAmount(formData.totalUnreceivedAmounts)" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
          </el-form-item>
        </div>

        <!-- 状态信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">状态信息</div>
          <el-form-item label="开启状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio
                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                :key="dict.value"
                :value="dict.value"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="formData.sort" placeholder="请输入排序" style="width:100%" :precision="0" />
          </el-form-item>
        </div>
      </el-form>
    </div>

    <template #footer>
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false" style="flex:1">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="formLoading" style="flex:2">确 定</el-button>
      </div>
    </template>
  </el-drawer>

  <!-- PC端布局 -->
  <Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="800px" class="customer-form-dialog">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" class="customer-form">
      <el-row :gutter="20">
        <el-col :span="24"><el-divider class="customer-section-divider">基础信息</el-divider></el-col>
        <el-col :span="12"><el-form-item label="名称" prop="name"><el-input v-model="formData.name" placeholder="请输入名称" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="电子邮箱" prop="email"><el-input v-model="formData.email" placeholder="请输入电子邮箱" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="企业类型" prop="companyType"><el-select v-model="formData.companyType" placeholder="请选择企业类型" class="!w-1/1"><el-option label="餐饮" :value="1" /><el-option label="食品批发" :value="2" /><el-option label="制造" :value="3" /><el-option label="超市" :value="4" /><el-option label="其他" :value="5" /></el-select></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="企业规模" prop="businessScale"><el-input v-model="formData.businessScale" placeholder="请输入企业规模" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="客户来源" prop="leadSourceType"><el-select v-model="formData.leadSourceType" placeholder="请选择来源类型" class="!w-1/1"><el-option label="展会" :value="1" /><el-option label="地推" :value="2" /><el-option label="转介绍" :value="3" /><el-option label="官网" :value="4" /><el-option label="平台" :value="5" /><el-option label="电销" :value="6" /><el-option label="老客户" :value="7" /><el-option label="其他" :value="99" /></el-select></el-form-item></el-col>
        <el-col :span="24"><el-divider /></el-col>
        <el-col :span="12"><el-form-item label="纳税人识别号" prop="taxNo"><el-input v-model="formData.taxNo" placeholder="请输入纳税人识别号" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="开户行" prop="bankName"><el-input v-model="formData.bankName" placeholder="请输入开户行" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="开户账号" prop="bankAccount"><el-input v-model="formData.bankAccount" placeholder="请输入开户账号" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="开户地址" prop="bankAddress"><el-input v-model="formData.bankAddress" placeholder="请输入开户地址" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="偏好产品" prop="preferredProducts"><el-input v-model="formData.preferredProducts" placeholder="请输入偏好产品或品类" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="偏好包装" prop="preferredPackaging"><el-input v-model="formData.preferredPackaging" placeholder="请输入偏好包装形式" /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="偏好交期" prop="deliveryCyclePrefer"><el-input v-model="formData.deliveryCyclePrefer" placeholder="请输入偏好交期/周期" /></el-form-item></el-col>
        <el-col :span="24"><el-divider /></el-col>
        <el-col :span="12"><el-form-item label="年度订单数" prop="annualOrderNums"><el-input :model-value="formatInteger(formData.annualOrderNums)" placeholder="系统自动生成" disabled /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="年度订单额" prop="annualOrderAmounts"><el-input :model-value="formatAmount(formData.annualOrderAmounts)" placeholder="系统自动生成" disabled /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="年度已收款" prop="annualReceivedAmounts"><el-input :model-value="formatAmount(formData.annualReceivedAmounts)" placeholder="系统自动生成" disabled /></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="累计未收款" prop="totalUnreceivedAmounts"><el-input :model-value="formatAmount(formData.totalUnreceivedAmounts)" placeholder="系统自动生成" disabled /></el-form-item></el-col>
        <el-col :span="24"><el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" /></el-form-item></el-col>
        <el-col :span="24"><el-divider class="customer-section-divider">状态信息</el-divider></el-col>
        <el-col :span="12"><el-form-item label="开启状态" prop="status"><el-radio-group v-model="formData.status"><el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio></el-radio-group></el-form-item></el-col>
        <el-col :span="12"><el-form-item label="排序" prop="sort"><el-input-number v-model="formData.sort" placeholder="请输入排序" class="!w-1/1" :precision="0" /></el-form-item></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
import { CommonStatusEnum } from '@/utils/constants'
import { useWindowSize } from '@vueuse/core'

/** ERP 客户 表单 */
defineOptions({ name: 'CustomerForm' })

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  name: undefined,
  contact: undefined,
  mobile: undefined,
  telephone: undefined,
  email: undefined,
  fax: undefined,
  remark: undefined,
  status: undefined,
  sort: undefined,
  taxNo: undefined,
  taxPercent: undefined,
  bankName: undefined,
  bankAccount: undefined,
  bankAddress: undefined,
  tags: undefined,
  companyType: undefined,
  businessScale: undefined,
  annualPurchaseVolume: undefined,
  annualPurchaseAmount: undefined,
  annualOrderNums: undefined,
  annualOrderAmounts: undefined,
  annualReceivedAmounts: undefined,
  totalUnreceivedAmounts: undefined,
  preferredProducts: undefined,
  preferredPackaging: undefined,
  qualityCertRequirements: undefined,
  deliveryCyclePrefer: undefined,
  paymentTerms: undefined,
  lastDeliveryTime: undefined,
  deliveryAddress: undefined,
  businessLicenseNo: undefined,
  licenseValidity: undefined,
  riskLevel: undefined,
  logisticsPartner: undefined,
  requiresColdChain: undefined,
  serviceRegion: undefined,
  relationshipLevel: undefined,
  leadSourceType: undefined,
  leadSourceDetail: undefined,
  leadScore: undefined,
  potentialLevel: undefined,
  expectedAnnualVolume: undefined,
  expectedAnnualAmount: undefined,
  purchaseCycle: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const formatInteger = (value?: string | number) => {
  if (value === undefined || value === null || value === '') {
    return ''
  }
  const num = Number(value)
  if (Number.isNaN(num)) {
    return String(value)
  }
  return String(Math.trunc(num))
}
const formatAmount = (value?: string | number) => {
  if (value === undefined || value === null || value === '') {
    return ''
  }
  const num = Number(value)
  if (Number.isNaN(num)) {
    return String(value)
  }
  return num.toFixed(2)
}

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await CustomerApi.getCustomer(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as CustomerVO
    if (formType.value === 'create') {
      await CustomerApi.createCustomer(data)
      message.success(t('common.createSuccess'))
    } else {
      await CustomerApi.updateCustomer(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
    contact: undefined,
    mobile: undefined,
    telephone: undefined,
    email: undefined,
    fax: undefined,
    remark: undefined,
    status: CommonStatusEnum.ENABLE,
    sort: undefined,
    taxNo: undefined,
    taxPercent: undefined,
    bankName: undefined,
    bankAccount: undefined,
    bankAddress: undefined,
    tags: undefined,
    companyType: undefined,
    businessScale: undefined,
    annualPurchaseVolume: undefined,
    annualPurchaseAmount: undefined,
    annualOrderNums: undefined,
    annualOrderAmounts: undefined,
    annualReceivedAmounts: undefined,
    totalUnreceivedAmounts: undefined,
    preferredProducts: undefined,
    preferredPackaging: undefined,
    qualityCertRequirements: undefined,
    deliveryCyclePrefer: undefined,
    paymentTerms: undefined,
    lastDeliveryTime: undefined,
    deliveryAddress: undefined,
    businessLicenseNo: undefined,
    licenseValidity: undefined,
    riskLevel: undefined,
    logisticsPartner: undefined,
    requiresColdChain: undefined,
    serviceRegion: undefined,
    relationshipLevel: undefined,
    leadSourceType: undefined,
    leadSourceDetail: undefined,
    leadScore: undefined,
    potentialLevel: undefined,
    expectedAnnualVolume: undefined,
    expectedAnnualAmount: undefined,
    purchaseCycle: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mobile-form {
  padding: 12px;
}

.mobile-form__section {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.mobile-form__section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-form__footer {
  display: flex;
  gap: 12px;
  padding: 0 12px;
}
</style>
