<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" :disabled="disabled">
        <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="请输入名称" clearable />
          </el-form-item>
          <!-- <el-form-item label="企业曾用名" prop="formerName">
            <el-input v-model="formData.formerName" placeholder="请输入企业曾用名" />
          </el-form-item> -->
          <el-form-item label="企业性质" prop="enterpriseNature">
            <el-select v-model="formData.enterpriseNature" placeholder="请选择企业性质" clearable>
              <el-option v-for="item in enterpriseNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择供应商类型" clearable>
              <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="registeredCapital">
            <el-input-number v-model="formData.registeredCapital" :min="0" :precision="2" placeholder="请输入注册资金" controls-position="right" />
          </el-form-item>
          <!-- <el-form-item label="固定资产" prop="fixedAssets">
            <el-input-number v-model="formData.fixedAssets" :min="0" :precision="2" placeholder="请输入固定资产" />
          </el-form-item> -->
          <el-form-item label="使用/营业期限" prop="validPeriod">
            <el-input v-model="formData.validPeriod" placeholder="请输入使用/营业期限" clearable />
          </el-form-item>
          <!-- <el-form-item label="网址" prop="website">
            <el-input v-model="formData.website" placeholder="请输入网址" />
          </el-form-item> -->
          <el-form-item label="邮编" prop="zipCode">
            <el-input v-model="formData.zipCode" placeholder="请输入邮编" clearable />
          </el-form-item>
          <!-- <el-form-item label="企业地址" prop="address">
            <el-input type="textarea" v-model="formData.address" placeholder="请输入企业地址" />
          </el-form-item> -->
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">联系信息</div>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入联系人" clearable />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable />
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="formData.telephone" placeholder="请输入联系电话" clearable />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable />
          </el-form-item>
          <!-- <el-form-item label="传真" prop="fax">
            <el-input v-model="formData.fax" placeholder="请输入传真" />
          </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="请输入纳税人识别号" clearable />
          </el-form-item>
          <el-form-item label="税率(%)" prop="taxPercent">
            <el-input-number v-model="formData.taxPercent" :min="0" :precision="4" placeholder="请输入税率" controls-position="right" />
          </el-form-item>
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="formData.bankName" placeholder="请输入开户行" clearable />
          </el-form-item>
          <el-form-item label="开户账号" prop="bankAccount">
            <el-input v-model="formData.bankAccount" placeholder="请输入开户账号" clearable />
          </el-form-item>
          <el-form-item label="开户地址" prop="bankAddress">
            <el-input v-model="formData.bankAddress" placeholder="请输入开户地址" clearable />
          </el-form-item>
          <el-form-item label="银行行号" prop="bankLineNo">
            <el-input v-model="formData.bankLineNo" placeholder="请输入银行行号" clearable />
          </el-form-item>
          <el-form-item label="付款条件" prop="paymentTerms">
            <el-select v-model="formData.paymentTerms" placeholder="请选择付款条件" clearable>
              <el-option v-for="item in paymentTermsOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">经营信息</div>
          <el-form-item label="生产/经营范围" prop="productScope">
            <el-input type="textarea" v-model="formData.productScope" placeholder="请输入生产产品范围/经营范围" :rows="3" />
          </el-form-item>
          <el-form-item label="生产厂地址" prop="factoryAddress">
            <el-input type="textarea" v-model="formData.factoryAddress" placeholder="请输入生产厂地址" :rows="2" />
          </el-form-item>
          <!-- <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="annualPaidAmounts">
            <el-input :model-value="formatAmount(formData.annualPaidAmounts)" placeholder="系统自动生成" disabled />
          </el-form-item>
          <el-form-item label="累计未付款" prop="totalUnpaidAmounts">
            <el-input :model-value="formatAmount(formData.totalUnpaidAmounts)" placeholder="系统自动生成" disabled />
          </el-form-item>
        </div>

        <!-- <div class="mobile-form-section">
          <div class="mobile-form-section__title">业务联系人</div>
          <el-form-item label="联系人姓名" prop="bizContact">
            <el-input v-model="formData.bizContact" placeholder="请输入联系人姓名" />
          </el-form-item>
          <el-form-item label="联系人电话" prop="bizContactTel">
            <el-input v-model="formData.bizContactTel" placeholder="请输入联系人电话" />
          </el-form-item>
          <el-form-item label="联系人传真" prop="bizContactFax">
            <el-input v-model="formData.bizContactFax" placeholder="请输入联系人传真" />
          </el-form-item>
          <el-form-item label="联系人手机" prop="bizContactMobile">
            <el-input v-model="formData.bizContactMobile" placeholder="请输入联系人手机" />
          </el-form-item>
          <el-form-item label="联系人邮箱" prop="bizContactEmail">
            <el-input v-model="formData.bizContactEmail" placeholder="请输入联系人邮箱" />
          </el-form-item>
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">质量部门联系人</div>
          <el-form-item label="联系人姓名" prop="qualityContact">
            <el-input v-model="formData.qualityContact" placeholder="请输入联系人姓名" />
          </el-form-item>
          <el-form-item label="联系人电话" prop="qualityContactTel">
            <el-input v-model="formData.qualityContactTel" placeholder="请输入联系人电话" />
          </el-form-item>
          <el-form-item label="联系人传真" prop="qualityContactFax">
            <el-input v-model="formData.qualityContactFax" placeholder="请输入联系人传真" />
          </el-form-item>
          <el-form-item label="联系人手机" prop="qualityContactMobile">
            <el-input v-model="formData.qualityContactMobile" placeholder="请输入联系人手机" />
          </el-form-item>
          <el-form-item label="联系人邮箱" prop="qualityContactEmail">
            <el-input v-model="formData.qualityContactEmail" placeholder="请输入联系人邮箱" />
          </el-form-item>
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">高管信息（总经理）</div>
          <el-form-item label="姓名" prop="generalManager">
            <el-input v-model="formData.generalManager" placeholder="请输入总经理姓名" />
          </el-form-item>
          <el-form-item label="电话" prop="gmTel">
            <el-input v-model="formData.gmTel" placeholder="请输入总经理电话" />
          </el-form-item>
          <el-form-item label="传真" prop="gmFax">
            <el-input v-model="formData.gmFax" placeholder="请输入总经理传真" />
          </el-form-item>
          <el-form-item label="手机" prop="gmMobile">
            <el-input v-model="formData.gmMobile" placeholder="请输入总经理手机" />
          </el-form-item>
          <el-form-item label="邮箱" prop="gmEmail">
            <el-input v-model="formData.gmEmail" placeholder="请输入总经理邮箱" />
          </el-form-item>
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">资质证照</div>
          <el-form-item label="体系认证URL" prop="certificateUrl">
            <el-input v-model="formData.certificateUrl" placeholder="请输入体系认证证书URL" />
          </el-form-item>
          <el-form-item label="营业执照URL" prop="businessLicenseUrl">
            <el-input v-model="formData.businessLicenseUrl" placeholder="请输入营业执照URL" />
          </el-form-item>
        </div>

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">资质管理</div>
          <el-form-item label="信用等级" prop="creditLevel">
            <el-input v-model="formData.creditLevel" placeholder="请输入信用等级" />
          </el-form-item>
          <el-form-item label="合作状态" prop="cooperationStatus">
            <el-select v-model="formData.cooperationStatus" placeholder="请选择合作状态">
              <el-option label="潜在" :value="0" />
              <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="auditStatus">
            <el-select v-model="formData.auditStatus" placeholder="请选择审核状态">
              <el-option label="待审核" :value="0" />
              <el-option label="已通过" :value="1" />
              <el-option label="驳回" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="最近审核时间" prop="auditTime">
            <el-date-picker v-model="formData.auditTime" type="datetime" value-format="x" placeholder="选择最近审核时间" />
          </el-form-item>
          <el-form-item label="资质到期日期" prop="expiryDate">
            <el-date-picker v-model="formData.expiryDate" type="date" value-format="x" placeholder="选择资质到期日期" />
          </el-form-item>
        </div> -->

        <div class="mobile-form-section">
          <div class="mobile-form-section__title">其他信息</div>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="3" />
          </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="请输入排序" :precision="0" controls-position="right" />
          </el-form-item>
        </div>
      </el-form>

      <!-- 底部操作按钮 -->
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- PC端布局 -->
  <Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="800px" class="supplier-form-dialog">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="supplier-form" v-loading="formLoading" :disabled="disabled">
      <el-row :gutter="20">
        <el-col :span="24"><el-divider class="supplier-section-divider">基础信息</el-divider></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="名称" prop="name"><el-input v-model="formData.name" placeholder="请输入名称" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="企业性质" prop="enterpriseNature"><el-select v-model="formData.enterpriseNature" placeholder="请选择企业性质" class="!w-1/1"><el-option v-for="item in enterpriseNatureOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="供应商类型" prop="type"><el-select v-model="formData.type" 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-select></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="注册资金" prop="registeredCapital"><el-input-number v-model="formData.registeredCapital" :min="0" :precision="2" placeholder="请输入注册资金" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="使用/营业期限" prop="validPeriod"><el-input v-model="formData.validPeriod" placeholder="请输入使用/营业期限" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="邮编" prop="zipCode"><el-input v-model="formData.zipCode" placeholder="请输入邮编" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="电子邮箱" prop="email"><el-input v-model="formData.email" placeholder="请输入电子邮箱" /></el-form-item></el-col>
        <el-col :span="24"><el-divider /></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="纳税人识别号" prop="taxNo"><el-input v-model="formData.taxNo" placeholder="请输入纳税人识别号" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="税率(%)" prop="taxPercent"><el-input-number v-model="formData.taxPercent" :min="0" :precision="4" placeholder="请输入税率" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="开户行" prop="bankName"><el-input v-model="formData.bankName" placeholder="请输入开户行" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="开户账号" prop="bankAccount"><el-input v-model="formData.bankAccount" placeholder="请输入开户账号" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="开户地址" prop="bankAddress"><el-input v-model="formData.bankAddress" placeholder="请输入开户地址" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="银行行号" prop="bankLineNo"><el-input v-model="formData.bankLineNo" placeholder="请输入银行行号" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="付款条件" prop="paymentTerms"><el-select v-model="formData.paymentTerms" placeholder="请选择付款条件" class="!w-1/1"><el-option v-for="item in paymentTermsOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col>
        <el-col :span="24"><el-divider /></el-col>
        <el-col :span="24"><el-form-item label="生产/经营范围" prop="productScope"><el-input type="textarea" v-model="formData.productScope" placeholder="请输入生产产品范围/经营范围" /></el-form-item></el-col>
        <el-col :span="24"><el-form-item label="生产厂地址" prop="factoryAddress"><el-input type="textarea" v-model="formData.factoryAddress" placeholder="请输入生产厂地址" /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="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" :xs="24" :sm="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" :xs="24" :sm="12"><el-form-item label="年度已付款" prop="annualPaidAmounts"><el-input :model-value="formatAmount(formData.annualPaidAmounts)" placeholder="系统自动生成" disabled /></el-form-item></el-col>
        <el-col :span="12" :xs="24" :sm="12"><el-form-item label="累计未付款" prop="totalUnpaidAmounts"><el-input :model-value="formatAmount(formData.totalUnpaidAmounts)" 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="supplier-section-divider">状态信息</el-divider></el-col>
        <el-col :span="12" :xs="12" :sm="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" :xs="12" :sm="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" v-if="!disabled">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { CommonStatusEnum } from '@/utils/constants'
import { useWindowSize } from '@vueuse/core'

/** ERP  表单 */
defineOptions({ name: 'SupplierForm' })

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 - 修改；detail - 详情
const disabled = computed(() => formType.value === 'detail')
const enterpriseNatureOptions = [
  { label: '国有企业', value: '国有企业' },
  { label: '民营企业', value: '民营企业' },
  { label: '外商投资企业', value: '外商投资企业' },
  { label: '合资企业', value: '合资企业' },
  { label: '食品加工厂', value: '食品加工厂' },
  { label: '食品生产企业', value: '食品生产企业' },
  { label: '食品批发/经销商', value: '食品批发/经销商' },
  { label: '食品贸易公司', value: '食品贸易公司' },
  { label: '冷链/仓储物流', value: '冷链/仓储物流' },
  { label: '其他', value: '其他' }
]
const paymentTermsOptions = [
  { label: '现款现货', value: '现款现货' },
  { label: '货到付款', value: '货到付款' },
  { label: '月结30天', value: '月结30天' },
  { label: '月结45天', value: '月结45天' },
  { label: '月结60天', value: '月结60天' },
  { label: '月结90天', value: '月结90天' },
  { label: '预付30%', value: '预付30%' },
  { label: '预付50%', value: '预付50%' },
  { label: '分期付款', value: '分期付款' },
  { label: '其他', value: '其他' }
]
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,
  formerName: undefined,
  enterpriseNature: undefined,
  type: undefined,
  registeredCapital: undefined,
  fixedAssets: undefined,
  validPeriod: undefined,
  website: undefined,
  zipCode: undefined,
  address: undefined,
  productScope: undefined,
  factoryAddress: undefined,
  bankLineNo: undefined,
  paymentTerms: undefined,
  annualOrderNums: undefined,
  annualOrderAmounts: undefined,
  annualPaidAmounts: undefined,
  totalUnpaidAmounts: undefined,
  bizContact: undefined,
  bizContactTel: undefined,
  bizContactFax: undefined,
  bizContactMobile: undefined,
  bizContactEmail: undefined,
  qualityContact: undefined,
  qualityContactTel: undefined,
  qualityContactFax: undefined,
  qualityContactMobile: undefined,
  qualityContactEmail: undefined,
  generalManager: undefined,
  gmTel: undefined,
  gmFax: undefined,
  gmMobile: undefined,
  gmEmail: undefined,
  certificateUrl: undefined,
  businessLicenseUrl: undefined,
  creditLevel: undefined,
  cooperationStatus: undefined,
  auditStatus: undefined,
  auditTime: undefined,
  expiryDate: 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 SupplierApi.getSupplier(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 SupplierVO
    if (formType.value === 'create') {
      await SupplierApi.createSupplier(data)
      message.success(t('common.createSuccess'))
    } else {
      await SupplierApi.updateSupplier(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,
    formerName: undefined,
    enterpriseNature: undefined,
    type: undefined,
    registeredCapital: undefined,
    fixedAssets: undefined,
    validPeriod: undefined,
    website: undefined,
    zipCode: undefined,
    address: undefined,
    productScope: undefined,
    factoryAddress: undefined,
    bankLineNo: undefined,
    paymentTerms: undefined,
    annualOrderNums: undefined,
    annualOrderAmounts: undefined,
    annualPaidAmounts: undefined,
    totalUnpaidAmounts: undefined,
    bizContact: undefined,
    bizContactTel: undefined,
    bizContactFax: undefined,
    bizContactMobile: undefined,
    bizContactEmail: undefined,
    qualityContact: undefined,
    qualityContactTel: undefined,
    qualityContactFax: undefined,
    qualityContactMobile: undefined,
    qualityContactEmail: undefined,
    generalManager: undefined,
    gmTel: undefined,
    gmFax: undefined,
    gmMobile: undefined,
    gmEmail: undefined,
    certificateUrl: undefined,
    businessLicenseUrl: undefined,
    creditLevel: undefined,
    cooperationStatus: undefined,
    auditStatus: undefined,
    auditTime: undefined,
    expiryDate: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mobile-form {
  padding: 12px;
}
.mobile-form-section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.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 {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 12px 16px;
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  margin: 0 -12px -12px;

  .el-button {
    flex: 1;
    height: 40px;
    font-size: 15px;
  }
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number),
:deep(.el-date-editor) {
  width: 100% !important;
}

/* PC端样式 */
:deep(.supplier-form .el-form-item__label) {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep(.supplier-form .supplier-section-divider) {
  margin: 16px 0 12px;
}
:deep(.supplier-form-dialog .el-dialog__body) {
  padding-left: 12px;
  padding-right: 12px;
}
</style>
