<script lang="ts" setup name="CustomerEdit">
/**
 * 添加/编辑/详情客户
 */
import dayjs from 'dayjs'
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { CustomerPerson, ICustomer, Menu, SimpleCertification, SimpleContract, SimpleMeasureRecord, SimpleSample, dictType } from './customer_interface'
import TemplateTable from './templateTable.vue'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { UploadFile } from '@/api/measure/file'
import { addCustomer, getCertificationByCustomer, getContractByCustomer, getCustomerDetail, getOrderByCustomer, getSampleByCustomer, updateCustomer } from '@/api/customer/customer'
import { validatePhone } from '@/utils/validate'
import type { IAddress } from '@/components/AddressSelect/address-interface'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { calc } from '@/utils/useCalc'
import type { IRecord } from '@/views/business/schedule/interchange/interchange_interface'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('add') // 页面类型: add, edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
const dataForm: Ref<ICustomer> = ref({
  id: '',
  businessContent: '',
  customerName: '',
  customerNo: '',
  bankAccount: '',
  bankAccountNumber: '',
  bankName: '',
  briefName: '',
  businessScope: '',
  grade: '', // 履约评级
  companySize: '', // 公司规模
  businessSize: '', // 业务规模
  evaluation: '', // 整体评价
  fullAddress: '',
  addressArea: '',
  addressCity: '',
  addressCountry: '',
  addressProvince: '',
  addressAreaName: '',
  addressCityName: '',
  addressCountryName: '',
  addressProvinceName: '',
  director: '',
  fax: '',
  invoiceFullAddress: '',
  invoiceArea: '',
  invoiceCity: '',
  invoiceCountry: '',
  invoiceProvince: '',
  invoiceAreaName: '',
  invoiceCityName: '',
  invoiceCountryName: '',
  invoiceProvinceName: '',
  email: '',
  minioFileName: '',
  mobile: '',
  phone: '',
  postalCode: '',
  remark: '',
  taxNumber: '',
  website: '',
  customerUserList: [],
})
const fullAddress = ref<string[]>([]) // 公司地址
const invoiceFullAddress = ref<string[]>([]) // 开票地址
const customerPersonList: Ref<CustomerPerson[]> = ref([]) // 人员列表
const columns = ref([
  { text: '姓名', value: 'name', required: true, align: 'center' },
  { text: '工作部门', value: 'department', required: false, align: 'center' },
  { text: '职务', value: 'job', required: false, align: 'center' },
  { text: '联系方式', value: 'phone', required: true, reg: validatePhone, align: 'center' },
])

// -----------------------------------表格----------------------------------------------
// 其他关联数据列表
const dataList = ref({
  personList: [] as CustomerPerson[],
  sampleRecords: [] as SimpleSample[],
  contractRecords: [] as SimpleContract[],
  measureRecords: [] as SimpleMeasureRecord[], // 检定记录
  certificationRecords: [] as SimpleCertification[], // 检定证书
})
// 检测记录和检定证书查询条件
const listQuery = ref<IRecord>({
  sampleId: '', // 样品id
  customerId: infoId.value, // 客户id
  offset: 1,
  limit: 10,
})
// 合同记录请求参数
const contractListQuery = ref({
  agreementKind: '1', // 合同种类-收入合同1
  agreementName: '', // 合同名字
  agreementNo: '', // 合同编号
  agreementType: '', // 合同类型-采购合同/业务合同等-字典code
  customerId: infoId.value, // 单位id（客户id）（收入合同该字段为甲方单位，支出合同该字段为乙方单位）
  estimateSignEndDate: '', // 预计签订/实际签订结束日期
  estimateSignStartDate: '', // 预计签订/实际签订开始日期
  firstParty: '', // 单位名字（收入合同该字段为甲方单位，支出合同该字段为乙方单位）
  formId: SCHEDULE.BUSINESS_FINANCE_CONTRACT_APPROVE, // 表单id
  ids: [], // 导出ids
  status: '', // 合同完成状态-字典code
  offset: 1,
  limit: 10,
})
// 样品记录查询条件
const sampleListQuery = ref({
  id: infoId.value, // 客户id
  offset: 1,
  limit: 10,
})
const totalRecords = ref(0) // 检定记录
const totalCertifications = ref(0) // 检定证书
const totalContract = ref(0) // 合同记录
const totalSample = ref(0) // 样品记录
// 获取样品列表
const fetchSampleList = function () {
  getSampleByCustomer(sampleListQuery.value).then((res) => {
    dataList.value.sampleRecords = res.data.rows
    totalSample.value = res.data.total
  })
}
// 获取合同记录
const fetchContractRecords = function () {
  getContractByCustomer(contractListQuery.value).then((response) => {
    dataList.value.contractRecords = response.data.rows.map((item: { estimateSignDate: string; agreementAmount: number }) => {
      return {
        ...item,
        estimateSignDate: item.estimateSignDate ? dayjs(item.estimateSignDate).format('YYYY-MM-DD') : item.estimateSignDate,
        agreementAmount: calc(Number(item.agreementAmount), 100, '/'),
      }
    })
    totalContract.value = parseInt(response.data.total)
  })
}
// 获取检定记录
const fetchMeasureRecords = function () {
  getOrderByCustomer(listQuery.value).then((res) => {
    dataList.value.measureRecords = res.data.rows.map((item: { orderTime: string; deliverTime: string }) => {
      return {
        ...item,
        orderTime: item.orderTime ? dayjs(item.orderTime).format('YYYY-MM-DD') : '',
        deliverTime: item.deliverTime ? dayjs(item.deliverTime).format('YYYY-MM-DD') : '',
      }
    })
    totalRecords.value = parseInt(res.data.total)
  })
}
// 获取检定证书
const fetchCertifications = function () {
  getCertificationByCustomer(listQuery.value).then((res) => {
    dataList.value.certificationRecords = res.data.rows.map((item: { effectiveDate: string; expirationDate: string }) => {
      return {
        ...item,
        effectiveDate: item.effectiveDate ? dayjs(item.effectiveDate).format('YYYY-MM-DD') : '',
        expirationDate: item.expirationDate ? dayjs(item.expirationDate).format('YYYY-MM-DD') : '',

      }
    })
    totalCertifications.value = parseInt(res.data.total)
  })
}

// 菜单
const menu = ref<Menu[]>([
  {
    name: '客户人员',
    columns: [
      { text: '姓名', value: 'name', align: 'center' },
      { text: '工作部门', value: 'department', align: 'center' },
      { text: '职务', value: 'job', align: 'center' },
      { text: '联系方式', value: 'phone', align: 'center' },
    ],
    pagination: false,
    list: 'personList',
    searchFunc: null,
  },
  {
    name: '样品记录',
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    columns: [
      { text: '样品编号', value: 'sampleNo', align: 'center', width: '160' },
      { text: '样品名称', value: 'sampleName', align: 'center' },
      { text: '型号', value: 'sampleModel', align: 'center' },
      { text: '出厂编号', value: 'manufacturingNo', align: 'center' },
      { text: '上次检定时间', value: 'measureLastTime', align: 'center', width: '180' },
      { text: '检定周期(月)', value: 'measurePeriod', align: 'center' },
    ],
    pagination: true,
    list: 'sampleRecords',
    searchFunc: fetchSampleList,
  },
  {
    name: '合同记录',
    columns: [
      { text: '合同编号', value: 'agreementNo', align: 'center', width: '160' },
      { text: '合同名称', value: 'agreementName', align: 'center' },
      { text: '合同金额(元)', value: 'agreementAmount', align: 'center' },
      { text: '签订日期', value: 'estimateSignDate', align: 'center', width: '120' },
      { text: '负责人', value: 'director', align: 'center' },
    ],
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    list: 'contractRecords',
    pagination: true,
    searchFunc: fetchContractRecords,
  },
  {
    name: '检定记录',
    columns: [
      { text: '委托单编号', value: 'orderCode', align: 'center', width: '160' },
      { text: '委托单日期', value: 'orderTime', align: 'center', width: '120' },
      { text: '委托方代码', value: 'customerCode', align: 'center', width: '160' },
      { text: '委托方名称', value: 'customerName', align: 'center' },
      { text: '送检人', value: 'deliverer', align: 'center' },
      { text: '送检日期', value: 'deliverTime', align: 'center', width: '120' },
    ],
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    list: 'measureRecords',
    pagination: true,
    searchFunc: fetchMeasureRecords,
  },
  {
    name: '检定证书',
    query: {
      id: '',
      limit: 10,
      offset: 1,
    },
    columns: [
      { text: '证书编号', value: 'certificationCode', align: 'center', width: '160' },
      { text: '证书名称', value: 'certificationName', align: 'center' },
      { text: '证书类型', value: 'certificationClassName', align: 'center' },
      { text: '证书出具日期', value: 'effectiveDate', align: 'center', width: '120' },
      { text: '证书有效期', value: 'expirationDate', align: 'center', width: '120' },
    ],
    list: 'certificationRecords',
    pagination: true,
    searchFunc: fetchCertifications,
  },
])
const currentMenu = ref('客户人员')
const currentMenuObj = computed(() => {
  return menu.value.find(item => item.name === currentMenu.value)
})

watch(currentMenuObj, () => {
  listQuery.value.offset = 1 // 检定记录和检定证书
  contractListQuery.value.offset = 1 // 合同记录
  sampleListQuery.value.offset = 1 // 样品记录
  if (currentMenuObj.value?.searchFunc) {
    currentMenuObj.value?.searchFunc()
  }
},
{
  deep: true,
  immediate: true,
})

// 监听页数变化
const changePage = (val: any) => {
  if (val.value && currentMenuObj) {
    listQuery.value.offset = val.value.offset // 检定记录和检定证书
    listQuery.value.limit = val.value.limit // 检定记录和检定证书
    contractListQuery.value.offset = val.value.offset // 合同记录
    contractListQuery.value.limit = val.value.limit // 合同记录
    sampleListQuery.value.offset = val.value.offset // 样品记录
    sampleListQuery.value.limit = val.value.limit // 样品记录
    if (currentMenuObj.value?.searchFunc) {
      currentMenuObj.value?.searchFunc()
    }
  }
}

const ruleFormRef = ref<FormInstance>()
// 人员对象
const addPersonObj: CustomerPerson = {
  id: '',
  customerId: '',
  userNo: '',
  name: '',
  department: '',
  job: '',
  phone: '',
  editable: true,
}

const SelectionList: Ref<CustomerPerson[]> = ref([])
// 校验规则
const rules = ref({
  customerName: [{ required: true, message: '公司名称必填', trigger: 'blur' }],
  businessContent: [{ required: true, message: '业务内容必填', trigger: 'blur' }],
}) // 表单验证规则
// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const companySizeList = ref<dictType[]>([]) // 公司规模列表
const businessSizeList = ref<dictType[]>([]) // 业务规模列表
const gradeList = ref<dictType[]>([]) // 履约评级列表
const evaluationList = ref<dictType[]>([]) // 整体评价列表
function getDict() {
  // 获取公司规模
  getDictByCode('companySize').then((response) => {
    companySizeList.value = response.data
  })
  // 获取业务规模
  getDictByCode('businessSize').then((response) => {
    businessSizeList.value = response.data
  })
  // 获取履约评级
  getDictByCode('grade').then((response) => {
    gradeList.value = response.data
  })
  // 获取整体评价
  getDictByCode('evaluation').then((response) => {
    evaluationList.value = response.data
  })
}

const getInfo = () => {
  loading.value = true
  getCustomerDetail({ id: infoId.value }).then((res) => {
    loading.value = false
    // res.data = { bankAccount: '银行账户', bankAccountNumber: '银行账号', bankName: '工商银行', briefName: '京东', businessContent: '电商', businessScope: 'test1', grade: '1', gradeName: '优质', companySize: '1', companySizeName: '优质', businessSize: '1', businessSizeName: '小微企业', evaluation: '1', evaluationName: '优质', fullAddress: '五棵松', addressAreaName: '海淀区', addressCityName: '北京市', addressCountryName: '中国', addressProvinceName: '北京', addressArea: '110107', addressCity: '110100', addressCountry: 'CN', addressProvince: '110000', createTime: '2022-11-29 21:14:50', director: '刘强东', fax: 'test1', id: '1597579843411234817', invoiceFullAddress: '五棵松', invoiceAreaName: '海淀区', invoiceCityName: '北京市', invoiceCountryName: '中国', invoiceProvinceName: '北京', invoiceyArea: '110107', invoiceCity: '110100', invoiceCountry: 'CN', invoiceProvince: '110000', email: 'test1', minioFileName: 'test', mobile: 'test', phone: '950618', postalCode: 'test', remark: 'test', customerName: '京东集团', customerNo: 'sygf202211290001', taxNumber: 'test', updateTime: '2023-01-10 09:56:57', website: 'test' }
    dataForm.value = res.data
    if (pageType.value == 'detail') {
      fullAddress.value = [dataForm.value.addressCountryName, dataForm.value.addressProvinceName, dataForm.value.addressCityName, dataForm.value.addressAreaName, dataForm.value.fullAddress]
      invoiceFullAddress.value = [dataForm.value.invoiceCountryName, dataForm.value.invoiceProvinceName, dataForm.value.invoiceCityName, dataForm.value.invoiceAreaName, dataForm.value.invoiceFullAddress]
      // 人员列表
      dataList.value.personList = res.data.customerUserList
      // 其他查询菜单
      for (const item of menu.value) {
        if (item.searchFunc) { item.searchFunc(item.query) }
      }
    }
    else {
      fullAddress.value = [dataForm.value.addressCountry, dataForm.value.addressProvince, dataForm.value.addressCity, dataForm.value.addressArea, dataForm.value.fullAddress]
      invoiceFullAddress.value = [dataForm.value.invoiceCountry, dataForm.value.invoiceProvince, dataForm.value.invoiceCity, dataForm.value.invoiceArea, dataForm.value.invoiceFullAddress]
      // 人员列表
      customerPersonList.value = res.data.customerUserList.map((item: CustomerPerson) => {
        return {
          id: '',
          customerId: '',
          userNo: item.userNo,
          name: item.name,
          department: item.department,
          job: item.job,
          phone: item.phone,
          editable: true,
        }
      })
    }
  })
}

// 表格选中
const handleSelectionChange = (e: CustomerPerson[]) => {
  SelectionList.value = e
}

// 公司地址变化后给对象赋值
function fullAddressChange(addressObj: IAddress) {
  console.log(addressObj)

  dataForm.value.addressCountry = addressObj.country
  dataForm.value.addressProvince = addressObj.province
  dataForm.value.addressCity = addressObj.city
  dataForm.value.addressArea = addressObj.area
  dataForm.value.fullAddress = addressObj.address
  dataForm.value.addressCountryName = addressObj.countryName
  dataForm.value.addressProvinceName = addressObj.provinceName
  dataForm.value.addressCityName = addressObj.cityName
  dataForm.value.addressAreaName = addressObj.areaName
}
// 开票地址发生变化
function invoiceFullAddressChange(addressObj: IAddress) {
  dataForm.value.invoiceCountry = addressObj.country
  dataForm.value.invoiceProvince = addressObj.province
  dataForm.value.invoiceCity = addressObj.city
  dataForm.value.invoiceArea = addressObj.area
  dataForm.value.invoiceFullAddress = addressObj.address
  dataForm.value.invoiceCountryName = addressObj.countryName
  dataForm.value.invoiceProvinceName = addressObj.provinceName
  dataForm.value.invoiceCityName = addressObj.cityName
  dataForm.value.invoiceAreaName = addressObj.areaName
}
// 点击增加行
const addRow = () => {
  // 检查上一行必填项
  if (checkPersonList()) {
    setAllRowReadable()
    customerPersonList.value.push({ ...addPersonObj })
  }
}
// 检查人员列表
function checkPersonList() {
  for (let index = 0; index < customerPersonList.value.length; index++) {
    const item = customerPersonList.value[index]
    for (const prop of columns.value) {
      // 检查必填
      if (prop.required && !item[prop.value]) {
        ElMessage.warning(`请先完善第${index + 1}行中${prop.text}`)
        return false
      }
      // 验证正则
      if (prop.reg && typeof prop.reg === 'function') {
        if (!prop.reg(item[prop.value])) {
          ElMessage.warning(`第${index + 1}行中${prop.text}输入不合法`)
          return false
        }
      }
    }
  }
  return true
}

// 删除行
const deleteList = () => {
  customerPersonList.value = customerPersonList.value.filter((item: CustomerPerson) => {
    return !SelectionList.value.includes(item)
  })
}
// 打印表单
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '客户详情', // 打印配置页上方的标题
  extraHead: '<div style="display: flex;flex-direction: column;text-align: center"><h3>客户详情</h3></div>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})

// 保存
function saveForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  formEl.validate((valid, fields) => {
    if (valid) {
      if (!customerPersonList.value.length) {
        ElMessage.warning('要求人员列表不能为空')
        return false
      }
      if (checkPersonList()) { // 检查人员列表
        setAllRowReadable()
        // 校验人员列表
        dataForm.value.customerUserList = customerPersonList.value.map((item) => {
          const value = { ...item }
          delete value.editable
          return value
        })
        ElMessageBox.confirm(
          '确认保存吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then(() => {
          if (dataForm.value.id) {
            updateCustomer(dataForm.value).then((res) => {
              if (res.code === 200) {
                ElMessage.success('已保存')
                $router.go(-1)
              }
            })
          }
          else {
            addCustomer(dataForm.value).then((res) => {
              if (res.code === 200) {
              // dataForm.value.id = res.data.id
              // dataForm.value.customerNo = res.data.customerNo
                ElMessage.success('已保存')
                $router.go(-1)
              }
            })
          }
        })
      }
    }
  })
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        dataForm.value.minioFileName = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        loading.close()
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}
// 双击行显示输入框
const dblclickRow = (row: CustomerPerson) => {
  setAllRowReadable()
  row.editable = true
}
// 将所有人员信息列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of customerPersonList.value) {
    item.editable = false
  }
}

onMounted(() => {
  // 非添加页面获取详情
  if (pageType.value !== 'add') {
    getInfo()
  }
  getDict()
})
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`客户-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType === 'detail'" v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <div id="form">
        <el-form
          ref="ruleFormRef"
          :model="dataForm"
          :label-width="120"
          label-position="right"
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="客户编号:" prop="customerNo">
                <el-input
                  v-model="dataForm.customerNo"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司名称:" prop="customerName">
                <el-input
                  v-model.trim="dataForm.customerName"
                  :placeholder="pageType === 'detail' ? '' : '请输入公司名称'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col><el-col :span="6">
              <el-form-item label="公司简称:">
                <el-input
                  v-model="dataForm.briefName"
                  :placeholder="pageType === 'detail' ? '' : '请输入公司简称'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务内容:" prop="businessContent">
                <el-input
                  v-model.trim="dataForm.businessContent"
                  :placeholder="pageType === 'detail' ? '' : '请输入业务内容'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司规模" prop="companySize">
                <el-select v-model="dataForm.companySize" :placeholder="pageType === 'detail' ? ' ' : '请选择公司规模'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in companySizeList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务规模" prop="businessSize">
                <el-select v-model="dataForm.businessSize" :placeholder="pageType === 'detail' ? ' ' : '请选择业务规模'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in businessSizeList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="履约评级" prop="grade">
                <el-select v-model="dataForm.grade" :placeholder="pageType === 'detail' ? ' ' : '请选择履约评级'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="整体评价" prop="evaluation">
                <el-select v-model="dataForm.evaluation" :placeholder="pageType === 'detail' ? ' ' : '请选择整体评价'" :disabled="pageType === 'detail'" class="full-width-input">
                  <el-option v-for="item in evaluationList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="税号:" prop="taxNumber">
                <el-input
                  v-model="dataForm.taxNumber"
                  :placeholder="pageType === 'detail' ? '' : '请输入税号'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账户名:">
                <el-input
                  v-model="dataForm.bankAccount"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行账户名'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行名称:">
                <el-input
                  v-model="dataForm.bankName"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行名称'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账号:">
                <el-input
                  v-model="dataForm.bankAccountNumber"
                  :placeholder="pageType === 'detail' ? '' : '请输入银行账号'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮编:">
                <el-input
                  v-model="dataForm.postalCode"
                  :placeholder="pageType === 'detail' ? '' : '请输入邮编'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人:">
                <el-input
                  v-model="dataForm.director"
                  :placeholder="pageType === 'detail' ? '' : '请输入负责人'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话:">
                <el-input
                  v-model="dataForm.phone"
                  :placeholder="pageType === 'detail' ? '' : '请输入电话'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="传真:">
                <el-input
                  v-model="dataForm.fax"
                  :placeholder="pageType === 'detail' ? '' : '请输入传真'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机:">
                <el-input
                  v-model="dataForm.mobile"
                  :placeholder="pageType === 'detail' ? '' : '请输入手机'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱:">
                <el-input
                  v-model="dataForm.email"
                  :placeholder="pageType === 'detail' ? '' : '请输入邮箱'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="网址:">
                <el-input
                  v-model="dataForm.website"
                  :placeholder="pageType === 'detail' ? '' : '请输入网址'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  :disabled="pageType === 'detail'"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-form-item label="公司地址:">
              <address-select :data="fullAddress" :detail="pageType === 'detail'" @on-change="fullAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="5">
            <el-form-item label="开票地址:">
              <address-select :data="invoiceFullAddress" :detail="pageType === 'detail'" @on-change="invoiceFullAddressChange" />
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item label="公司业务范围:">
                <el-input
                  v-model="dataForm.businessScope"
                  :placeholder="pageType === 'detail' ? '' : '请输入公司业务范围'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
              <el-form-item label="备注:">
                <el-input
                  v-model="dataForm.remark"
                  :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                  :disabled="pageType === 'detail'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="14">
              <el-form-item label="附件:">
                <show-photo v-if="dataForm.minioFileName" :minio-file-name="dataForm.minioFileName" />
                <span v-else-if="pageType === 'detail'">无</span>
                <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
                <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': dataForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
                  {{ dataForm.minioFileName === '' ? '上传' : '更换附件' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </detail-page>
    <detail-block v-if="pageType !== 'detail'" title="人员信息">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button type="info" @click="deleteList">
          删除行
        </el-button>
      </template>
      <el-table
        id="form"
        v-loading="loading"
        :data="customerPersonList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        @row-dblclick="dblclickRow"
      >
        <el-table-column type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
            <el-input v-else v-model.trim="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block-switch v-else :title="currentMenu">
      <template #menu>
        <el-radio-group v-model="currentMenu">
          <el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </template>
      <template-table v-if="currentMenuObj" :columns="currentMenuObj.columns" :total="currentMenu === '检定记录' ? totalRecords : currentMenu === '检定证书' ? totalCertifications : currentMenu === '合同记录' ? totalContract : totalSample" :list="dataList[currentMenuObj.list]" :loading="false" :pagination="currentMenuObj.pagination" @change-page="changePage" />
    </detail-block-switch>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>