<template>
  <div>
    <div v-if="processedBeneficiaryData.length > 0">
      <el-row>
        <el-col :span="24">
          <div class="topBtn">
            <el-button
              type="warning"
              icon="DocumentAdd"
              @click="addBeneficiary"
              :disabled="editStatus"
              >新增受益人</el-button
            >
            <el-button
              v-if="props.idsObj.appointmentBizId"
              type="primary"
              icon="EditPen"
              @click="handleEditStatus(!editStatus)"
              style="margin-left: 10px"
              >编辑</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-form ref="beneficiaryInfoFormRef" :model="form" label-width="120px">
        <div v-for="(level1, l1) in processedBeneficiaryData" :key="level1.id">
          <el-row style="margin-bottom: 10px">
            <div class="formBox">
              <div class="level1Label">
                <span>{{ level1.bigTitle }}-{{ l1 + 1 }}</span>
                <el-icon
                  @click="deleteBeneficiary(l1, level1)"
                  v-if="level1.deleteIcon && processedBeneficiaryData.length > 1"
                  style="color: red; font-size: 18px; margin-left: 10px"
                  ><Delete
                /></el-icon>
              </div>
              <div v-for="(level2, l2) in level1.children" :key="level2.key">
                <div class="fatherLable" v-if="level2.showMoudle">{{ level2.fatherTitle }}</div>
                <el-row :gutter="20" v-if="level2.showMoudle">
                  <template v-for="child in level2.data" :key="child.key">
                    <el-col :sm="child.sm" :lg="child.lg" class="formItem" v-if="child.show">
                      <div>
                        <!-- :rules="
                            child.required
                              ? [
                                  {
                                    required: true,
                                    message: `${child.label}不能为空`,
                                    trigger: 'blur'
                                  }
                                ]
                              : []
                          " -->
                        <el-form-item
                          :label-width="child.labelWidth"
                          :label="child.label"
                          :prop="`apiBeneficiaryInfoDtoList.${l1}.${child.key}`"
                          :key="child.key"
                          :label-position="child.labelPosition"
                          :rules="getRules(child)"
                        >
                          <!--  @input="handleInputChange(father, child, l1)" -->
                          <el-input
                            v-if="child.domType === 'Input'"
                            :type="child.inputType"
                            v-model="form['apiBeneficiaryInfoDtoList'][l1][child.key]"
                            :placeholder="child.placeholder"
                            maxlength="30"
                            :disabled="child.disabled"
                          />
                          <el-select
                            v-if="child.domType === 'Select'"
                            v-model="form['apiBeneficiaryInfoDtoList'][l1][child.key]"
                            :placeholder="child.placeholder"
                            @change="handleSelectChange(child, l1, l2)"
                            :disabled="child.disabled"
                          >
                            <el-option
                              v-for="item in child.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                          <el-date-picker
                            v-model="form['apiBeneficiaryInfoDtoList'][l1][child.key]"
                            style="width: 100%"
                            v-if="child.domType === 'DatePicker'"
                            type="date"
                            :placeholder="child.placeholder"
                            :disabled="child.disabled"
                            :disabled-date="disabledDate"
                          />
                          <el-input
                            v-if="child.domType === 'arrowRight'"
                            v-model="form['apiBeneficiaryInfoDtoList'][l1][child.key]"
                            :placeholder="child.placeholder"
                            @click="handleFoucs(child, l1, level1)"
                            :suffix-icon="ArrowRight"
                            readonly
                            :disabled="child.disabled"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </template>
                </el-row>
              </div>
            </div>
          </el-row>
        </div>
        <el-row v-if="props.idsObj.appointmentBizId">
          <el-col>
            <div class="tabButton">
              <!-- <el-button
                type="primary"
                icon="RefreshRight"
                @click="resetForm"
                size="large"
                :disabled="editStatus"
                >重置</el-button
              > -->
              <el-button
                type="primary"
                icon="Check"
                @click="submitForm"
                size="large"
                :disabled="editStatus"
                >提交</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-dialog title="联系人信息" v-model="openList" width="600px" append-to-body>
        <div>
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="85px">
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入姓名" @input="customerList" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" circle @click="customerList" />
              <el-button type="info" icon="Refresh" circle @click="resetCustomerList" />
            </el-form-item>
          </el-form>
          <div class="customerBox">
            <div class="customerItem" v-for="item in tableData" :key="item.id">
              <div class="top">
                <div class="right">
                  <el-button type="primary" size="small" @click="handleExport(item)"
                    >导入联系人</el-button
                  >
                </div>
              </div>
              <div class="bottom">
                <div class="left">
                  <div class="infoItem">
                    <span>姓名：</span>
                    <span> {{ item.name || '暂无' }}</span>
                  </div>
                  <div class="infoItem">
                    <span>性别：</span>
                    <span>
                      <dict-tag :options="fetchDictData('sys_gender')" :value="item.gender"
                    /></span>
                  </div>
                  <div class="infoItem">
                    <span>年龄：</span>
                    <span> {{ item.age || '暂无' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- <div v-else class="domEmpty" v-loading="loading"></div> -->
    <Phone
      @close="handleCloseDrawer"
      :showDrawer="showPhoneDrawer"
      :drawerInfo="drawerInfo"
      :phoneMenuList="phoneMenuList"
      :phoneQuickList="phoneQuickList"
      @confirmDrawer="confirmDrawer"
    />
    <Address
      @close="handleCloseDrawer"
      :showAddressDrawer="showAddressDrawer"
      :drawerInfo="drawerInfo"
      :addressMenuList="addressMenuList"
      :addressQuickList="addressQuickList"
      @confirmDrawer="confirmDrawer"
    />
    <Country
      :showCountryDrawer="showCountryDrawer"
      @close="handleCloseDrawer"
      @confirmCountry="confirmDrawer"
    />
  </div>
</template>
<script setup name="beneficiaryInfo">
import { validateEnglish } from '@/utils/validate'
import { ArrowRight } from '@element-plus/icons-vue'
import beneficiaryDomData from '@/formJson/beneficiary'
import Country from '@/views/components/country'
import Phone from '@/views/components/phone'
import Address from '@/views/components/address'

import { watch, nextTick } from 'vue'
import { addCustomer, getCustomerDetail, editCustomer, getCustomerList } from '@/api/sign/fna'
import { editBeneficiaryInfo, delBeneficiary } from '@/api/sign/appointment'
import useDictStore from '@/store/modules/dict'

const dictStore = useDictStore() //获取字典数据
const props = defineProps({
  activeName: { type: String, default: '' }, //tab名称
  fearthStatus: { type: String, default: '' }, //父组件状态，新增、修改
  formStatus: { type: String, default: '' }, //父组件状态，新增、修改
  idsObj: { type: Object, default: () => ({}) }, //父组件传递过来的id对象
  apiBeneficiaryInfoDtoList: { type: Object, default: () => ({}) }, //父组件传递过来的预约信息的详情
  appointmentStatus: { type: Number }, //父组件传递过来的预约的状态
  customerInfo: { type: Object, default: () => ({}) } //客户详情回显表单用
})
const emit = defineEmits(['handleSuccessEdit'])
const { proxy } = getCurrentInstance()
// const { sys_gender } = proxy.useDict('sys_gender')
const showPhoneDrawer = ref(false) //电话抽屉开关
const showAddressDrawer = ref(false) //地址抽屉开关
const showCountryDrawer = ref(false) //国家/地区抽屉开关
const drawerInfo = ref({}) // 用于存储所有arrowRight类型的输入框输入值
const saveKey = ref({}) // 用于存储当前点击的drawer框返回的对象,修改的时候回显值也要存key
const tempSaveKey = ref({}) // 用于tab切换的时候保存一份临时的值，防止切换的时候数据丢失
const errorFields = ref([]) // 存储校验失败的字段信息
const editStatus = ref(true) // 表单是否可编辑,若是修改初始不可编辑
const openList = ref(false) // 客户列表弹窗
const oldObjInfo = ref({}) // 修改时存储原始数据，便于撤销操作
const phoneOraddressKey = ref([]) // 存储当前点击的drawer框返回的对象,修改的时候回显值也要存key

const tableLoading = ref(false)
const tableData = ref([])
const total = ref(0)
// 地址组件菜单数据
const addressMenuList = ref([
  {
    name: '国家/地区',
    icon: false,
    value: '',
    placeholder: '请输入国家/地区',
    key: 'region'
  },
  {
    name: '省市',
    icon: false,
    value: '',
    placeholder: '请输入省市',
    key: 'city'
  },
  {
    name: '街道',
    icon: false,
    value: '',
    placeholder: '请输入街道',
    key: 'street'
  },
  {
    name: '详细地址',
    icon: false,
    value: '',
    placeholder: '请输入详细地址',
    key: 'location'
  }
])
// 快捷地址的数据
const addressQuickList = ref([])
const phoneMenuList = ref([
  {
    name: '区号',
    icon: true,
    value: '',
    placeholder: '请输入区号',
    arrow: true,
    type: 'string'
  },
  {
    name: '电话号码',
    icon: false,
    value: '',
    placeholder: '请输入电话号码',
    type: 'number'
  }
])
const phoneQuickList = ref([])
const tempAddressQuickList = ref([])
const tempPhoneQuickList = ref([])
const personalObj = ref({}) //存储个人key
const companyObj = ref({}) //存储公司key
const deleteKeyList = ref([
  'objType',
  'mailingAddress',
  'residentialAddress',
  'residenceAddress',
  'companyAddress',
  'txAddress',
  'companyEnterAddress',
  'phoneString',
  'phoneCode'
]) // 存储需要删除的key
const data = reactive({
  form: { apiBeneficiaryInfoDtoList: [] },
  tempBeneficiaryForm: {}, //由于切换tab的时候，表单数据会重置，所以需要
  processedBeneficiaryData: [], // 处理后的表单数据
  tempBeneficiaryDomData: [], //保存旧的表单Dom,便于撤销操作
  oldAppointmentData: [], // 保存旧的表单Dom,便于撤销操作
  rules: {}, //表单验证规则,
  queryParams: {
    pageNo: 1,
    pageSize: 4,
    name: undefined
  }
})
const {
  form,
  rules,
  processedBeneficiaryData,
  queryParams,
  oldAppointmentData,
  tempBeneficiaryForm,
  tempBeneficiaryDomData
} = toRefs(data)
// 获取表单项的校验规则
const getRules = child => {
  const rules = []

  // 必填校验
  if (child.required) {
    rules.push({
      required: true,
      message: `${child.label}不能为空`,
      trigger: 'blur'
    })
  }

  // 为英文姓名添加自定义校验
  if (child.key === 'nameEn') {
    rules.push({
      validator: validateEnglish,
      trigger: 'change'
    })
  }

  return rules
}
// const handleInputChange = (father, child, index) => {
//   switch (child.key) {
//     case 'nameEn':
//       validateEnglish(form.value['apiBeneficiaryInfoDtoList'][index][child.key], child.key)
//       break

//     default:
//       break
//   }
// }
// 新增受益人
const addBeneficiary = () => {
  let oneMoudle = JSON.parse(JSON.stringify(processedBeneficiaryData.value[0]))
  oneMoudle.id = Date.now() + Math.floor(Math.random() * 1000) //唯一标识，用于删除
  processedBeneficiaryData.value.push(oneMoudle)
  form.value.apiBeneficiaryInfoDtoList.push({ id: oneMoudle.id })
}
// 删除受益人
const deleteBeneficiary = (l1, level1) => {
  if (editStatus.value) {
    proxy.$modal.confirm(`编辑状态下才能删除`, { showCancel: '0', title: '填写提示' })
    return
  }
  if (processedBeneficiaryData.value.length == 1) {
    proxy.$modal.confirm(`至少保留一个受益人`, { showCancel: '0', title: '填写提示' })
    return
  }
  if (level1.beneficiaryBizId) {
    delBeneficiary(level1.beneficiaryBizId).then(res => {
      if (res.code == 200) {
        proxy.$message.success('受益人删除成功')
        processedBeneficiaryData.value.splice(l1, 1)
        form.value.apiBeneficiaryInfoDtoList.splice(l1, 1)
      }
    })
  } else {
    proxy.$message.success('受益人删除成功')
    processedBeneficiaryData.value.splice(l1, 1)
    form.value.apiBeneficiaryInfoDtoList.splice(l1, 1)
  }
}
const disabledDate = time => {
  return time.getTime() > Date.now()
}
const exportInfo = () => {
  if (props.customerBizId && editStatus.value) {
    proxy.$modal.confirm(`请先点击编辑在导入客户信息`, { showCancel: '0', title: '填写提示' })
    return
  }
  openList.value = true
  customerList()
}
const customerList = () => {
  console.log('触发了')

  tableLoading.value = true
  getCustomerList(queryParams.value).then(res => {
    if (res.code == 200) {
      tableData.value = res.data.records
      total.value = res.data.total
      tableLoading.value = false
    }
  })
}
const resetCustomerList = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 4,
    name: undefined
  }
  customerList()
}
// 从客户列表中导入客户信息到当前表单
const handleExport = row => {
  oldObjInfo.value = JSON.parse(JSON.stringify(form.value)) // 修改时存储原始数据，便于撤销操作
  processFormData({
    domdata: processedBeneficiaryData.value,
    customerInfo: row,
    exportValue: true
  })
  openList.value = false
}

// 获取字典数据
const fetchDictData = dictType => {
  let options = []
  try {
    dictStore.dictTypeLists.forEach(item => {
      if (item.dictType == dictType) {
        options = item.dictItemList
      }
    })
    return options
  } catch (error) {
    console.error('获取字典数据失败:', error)
    return []
  }
}
// // 添加英文校验函数
// const validateEnglish = (rule, value, callback) => {
//   if (value && !/^[A-Za-z]*$/.test(value)) {
//     // 清空非英文字符
//     form.value.firstNamePinyin = ''
//     callback(new Error('只能输入英文字母'))
//   } else {
//     callback()
//   }
// }

// 处理表单配置，添加字典数据
/**
 * domdata:表单的dom数据
 * customerInfo:根据客户信息回显表单
 * exportValue:是否从导入联系人列表中导入客户信息到当前表单
 */
const processFormData = async obj => {
  // 深拷贝原始数据
  const processedData = JSON.parse(JSON.stringify(obj.domdata))
  for (const item of processedData) {
    if (tempBeneficiaryDomData.value.length == 0) {
      form.value.apiBeneficiaryInfoDtoList.push({ id: item.id })
    }
    if (item.children) {
      for (const section of item.children) {
        if (section.data) {
          for (const field of section.data) {
            if (section.key == 'customer' || section.key == 'other') {
              personalObj.value[field.key] = field.key
              companyObj.value[field.key] = field.key
            }
            // 收集key,区分个人和企业
            if (section.key == 'person') {
              personalObj.value[field.key] = field.key
            } else if (section.key == 'company') {
              companyObj.value[field.key] = field.key
            }
            if (field.dictType) {
              // 获取字典数据
              field.options = fetchDictData(field.dictType)
            }
          }
        }
      }
    }
  }
  if (tempBeneficiaryDomData.value.length > 0 && !props.idsObj.appointmentBizId) {
    form.value = { ...tempBeneficiaryForm.value }
    saveKey.value = { ...tempSaveKey.value }
    addressQuickList.value = JSON.parse(JSON.stringify(tempAddressQuickList.value))
    phoneQuickList.value = JSON.parse(JSON.stringify(tempPhoneQuickList.value))
    processedBeneficiaryData.value = JSON.parse(JSON.stringify(tempBeneficiaryDomData.value))
  } else {
    processedBeneficiaryData.value = oldAppointmentData.value = processedData
  }
  if (props.idsObj.appointmentBizId) {
    editStatus.value = true
  } else {
    editStatus.value = false
    processedBeneficiaryData.value = oldAppointmentData.value = processedData
  }
}

//弹出右侧抽屉
const handleFoucs = (child, l1, level1) => {
  if (child.disabled) return
  child.l1 = l1
  child.id = level1.id
  drawerInfo.value = JSON.parse(JSON.stringify(child))
  console.log('drawerInfo', drawerInfo.value)
  switch (child.drawerType) {
    case 'phone':
      phoneMenuList.value[0].key = child.code
      phoneMenuList.value[1].key = child.key
      phoneMenuList.value.forEach(item => {
        item.value = ''
      })
      let phoneString = form.value.apiBeneficiaryInfoDtoList[l1][child.key]
      if (phoneString) {
        phoneMenuList.value[0].value = phoneString.split(' ')[0]
        phoneMenuList.value[1].value = phoneString.split(' ')[1]
      }
      showPhoneDrawer.value = true
      break
    case 'address':
      console.log('2222', phoneOraddressKey.value)

      addressMenuList.value.forEach(item => {
        item.value = ''
        phoneOraddressKey.value.forEach(item1 => {
          if (item1.id == level1.id && item1.type == child.key) {
            for (const key in item1) {
              if (item.key == key) {
                item.value = item1[key]
              }
            }
          }
        })
      })
      showAddressDrawer.value = true
      break
    case 'country':
      showCountryDrawer.value = true
      break
    default:
      break
  }
}
// 处理抽屉关闭
const handleCloseDrawer = () => {
  showPhoneDrawer.value = false
  showAddressDrawer.value = false
  showCountryDrawer.value = false
  drawerInfo.value = {}
}
const confirmDrawer = info => {
  // info 为抽屉返回的值
  if (drawerInfo.value.domType == 'arrowRight' && drawerInfo.value.drawerType) {
    let newObj = info[drawerInfo.value.key]
    //要判断drawerType
    switch (drawerInfo.value.drawerType) {
      case 'phone':
        form.value.apiBeneficiaryInfoDtoList[drawerInfo.value.l1][drawerInfo.value.key] = `${
          newObj[drawerInfo.value.code]
        } ${newObj[drawerInfo.value.key]}`
        break
      case 'address':
        //因为可以添加多个受益人，所以需要判断是哪个受益人，一定要有id
        newObj.type = drawerInfo.value.key
        newObj.id = drawerInfo.value.id
        newObj.drawerType = drawerInfo.value.drawerType
        form.value.apiBeneficiaryInfoDtoList[drawerInfo.value.l1][
          drawerInfo.value.key
        ] = `${newObj.region} ${newObj.city} ${newObj.street} ${newObj.location}`
        // 检查数组中是否已存在相同ID的地址
        const existingIndex = phoneOraddressKey.value.findIndex(
          item => item.id === newObj.id && item.type === newObj.type
        )

        if (existingIndex !== -1) {
          // 更新已存在的地址
          phoneOraddressKey.value[existingIndex] = { ...newObj }
        } else {
          // 添加新地址
          phoneOraddressKey.value.push({ ...newObj })
        }

        break
      case 'country':
        // info.objType = drawerInfo.value.drawerType
        // form.value[drawerInfo.value.key] = info.name
        // saveKey.value[drawerInfo.value.key] = info
        break
      default:
        break
    }
  }

  handleCloseDrawer()
}
// 根据联动重置表单项的显示与否
const resetShow = obj => {
  for (const section of processedBeneficiaryData.value) {
    switch (obj.type) {
      case 'father':
        if (section.key == obj.key) {
          section.showMoudle = obj.status
        }

        break
      case 'child':
        if (section.data) {
          for (const field of section.data) {
            if (field.key == obj.key) {
              // 获取字典数据
              field.show = obj.status
            }
          }
        }
        break

      default:
        break
    }
  }
}
const handleSelectChange = (child, l1, l2) => {
  let customerType = form.value['apiBeneficiaryInfoDtoList'][l1]['customerType']
  let insurantRel = form.value['apiBeneficiaryInfoDtoList'][l1]['insurantRel']
  switch (child.key) {
    case 'customerType':
      const newDOM = JSON.parse(JSON.stringify(processedBeneficiaryData.value))
      //这里存在一个对index得问题，暂不解决先放在这
      for (const section of newDOM[l1].children) {
        if (
          (customerType == 'COMPANY' || customerType == 'INDIVIDUAL') &&
          insurantRel &&
          insurantRel == 'MYSELF' &&
          section.key == 'customer'
        ) {
          section.showMoudle = true
        } else if (customerType == 'COMPANY' && insurantRel && insurantRel !== 'MYSELF') {
          if (section.key == 'person') {
            section.showMoudle = false
          } else {
            section.showMoudle = true
          }
        } else if (customerType == 'INDIVIDUAL' && insurantRel && insurantRel !== 'MYSELF') {
          if (section.key == 'company') {
            section.showMoudle = false
          } else {
            section.showMoudle = true
          }
        } else if (customerType == 'COMPANY' && !insurantRel) {
          if (section.key == 'company') {
            section.showMoudle = true
          } else if (section.key == 'person') {
            section.showMoudle = false
          }
        } else if (customerType == 'INDIVIDUAL' && !insurantRel) {
          if (section.key == 'company') {
            section.showMoudle = false
          } else if (section.key == 'person') {
            section.showMoudle = true
          }
        }
      }
      processedBeneficiaryData.value = newDOM

      break
    case 'insurantRel':
      const newDOM1 = JSON.parse(JSON.stringify(processedBeneficiaryData.value))
      for (const child of newDOM1[l1].children) {
        if (insurantRel == 'MYSELF') {
          if (child.key == 'customer') {
            child.showMoudle = true
          } else {
            child.showMoudle = false
          }
        } else {
          if (customerType == 'COMPANY') {
            if (child.key == 'company') {
              child.showMoudle = true
            } else if (child.key == 'person') {
              child.showMoudle = false
            }
          } else {
            if (child.key == 'company') {
              child.showMoudle = false
            } else {
              child.showMoudle = true
            }
          }
        }
      }
      processedBeneficiaryData.value = newDOM1

      break
    case 'smokingAllowed':
      // 选择吸烟，展示吸烟数量
      if (form.value[child.key] == '1') {
        resetShow({ type: 'child', key: 'smokingVolume', status: true })
      } else {
        resetShow({ type: 'child', key: 'smokingVolume', status: false })
      }

      break
    default:
      break
  }
}
// 改变编辑状态
const handleEditStatus = status => {
  editStatus.value = status
  console.log('触发了编辑状态', editStatus.value)

  // 深拷贝原始数据
  const processedData = JSON.parse(JSON.stringify(processedBeneficiaryData.value))
  for (const section of processedData) {
    for (const child of section.children) {
      for (const field of child.data) {
        if (editStatus.value) {
          field.disabled = true
        } else {
          field.disabled = false
        }
      }
    }
  }
  processedBeneficiaryData.value = processedData
}

// 数组去重
function removeDuplicates(arr, key) {
  const seen = new Map()
  const result = []

  for (const item of arr) {
    if (item[key] && !seen.has(item[key])) {
      seen.set(item[key], true)
      result.push(item)
    }
  }

  return result
}
// 修改状态下，处理表单数据
const setFormValue = () => {
  personalObj.value = {}
  companyObj.value = {}
  processedBeneficiaryData.value = []
  let quickMobile = []
  let qucikAddress = []
  // 深拷贝原始数据
  const oldDom = JSON.parse(JSON.stringify(beneficiaryDomData))
  // 先收集key,区分个人和企业
  for (const item of oldDom) {
    if (props.apiBeneficiaryInfoDtoList.length == 0) {
      form.value.apiBeneficiaryInfoDtoList.push({ id: item.id })
    }
    if (item.children) {
      for (const section of item.children) {
        if (section.data) {
          for (const field of section.data) {
            if (section.key == 'customer' || section.key == 'other') {
              personalObj.value[field.key] = field.key
              companyObj.value[field.key] = field.key
            }
            // 收集key,区分个人和企业
            if (section.key == 'person') {
              personalObj.value[field.key] = field.key
            } else if (section.key == 'company') {
              companyObj.value[field.key] = field.key
            }
            if (field.dictType) {
              // 获取字典数据
              field.options = fetchDictData(field.dictType)
            }

            if (props.idsObj.appointmentBizId) {
              field.disabled = true
            }
          }
        }
      }
    }
  }
  let newInfoList = JSON.parse(JSON.stringify(props.apiBeneficiaryInfoDtoList))
  // 详情中有数据，dom应该根据详情中的数据来渲染
  if (newInfoList.length > 0) {
    let newDOM1 = JSON.parse(JSON.stringify(oldDom))
    newInfoList.forEach((info, index) => {
      for (const item of newDOM1) {
        if (item.children) {
          for (const section of item.children) {
            // 根据选择得客户类型和与受保人关系，展示对应的模块
            if (
              (info.customerType == 'COMPANY' || info.customerType == 'INDIVIDUAL') &&
              info.insurantRel &&
              info.insurantRel == 'MYSELF' &&
              section.key == 'customer'
            ) {
              section.showMoudle = true
            } else if (
              info.customerType == 'COMPANY' &&
              info.insurantRel &&
              info.insurantRel !== 'MYSELF'
            ) {
              if (section.key == 'person') {
                section.showMoudle = false
              } else {
                section.showMoudle = true
              }
            } else if (
              info.customerType == 'INDIVIDUAL' &&
              info.insurantRel &&
              info.insurantRel !== 'MYSELF'
            ) {
              if (section.key == 'company') {
                section.showMoudle = false
              } else {
                section.showMoudle = true
              }
            } else if (
              (info.customerType == 'COMPANY' || info.customerType == 'INDIVIDUAL') &&
              info.insurantRel &&
              info.insurantRel == 'MYSELF' &&
              section.key !== 'customer'
            ) {
              section.showMoudle = false
            }
          }
        }
      }
      let phone = JSON.parse(JSON.stringify(info))
      if (info.authMobile) {
        quickMobile.push({
          code: phone.authMobileCode,
          mobile: phone.authMobile,
          phoneString: `${phone.authMobileCode} ${phone.authMobile}`
        })
        info.authMobile = `${info.authMobileCode} ${info.authMobile}`
      }
      if (info.companyMobile) {
        quickMobile.push({
          code: phone.companyMobileCode,
          mobile: phone.companyMobile,
          phoneString: `${phone.companyMobileCode} ${phone.companyMobile}`
        })
        info.companyMobile = `${info.companyMobileCode} ${info.companyMobile}`
      }
      if (info.addressList && info.addressList.length > 0) {
        info.addressList.forEach(address => {
          if (address.type == 'companyEnterAddress') {
            info.companyEnterAddress = `${address.region} ${address.city} ${address.street} ${address.location}`
          }
          if (address.type == 'txAddress') {
            info.txAddress = `${address.region} ${address.city} ${address.street} ${address.location}`
          }
          qucikAddress.push({
            ...address,
            id: info.id,
            drawerType: 'address',
            addressString: `${address.region} ${address.city} ${address.street} ${address.location}`
          })
        })
      }
      processedBeneficiaryData.value.push({
        ...newDOM1[0],
        id: info.id,
        beneficiaryBizId: info.beneficiaryBizId
      })
    })
    form.value.apiBeneficiaryInfoDtoList = newInfoList
    phoneQuickList.value = removeDuplicates(quickMobile, 'phoneString')
    phoneOraddressKey.value = qucikAddress
    addressQuickList.value = removeDuplicates(qucikAddress, 'addressString')
  } else {
    processedBeneficiaryData.value.push(oldDom[0]) // 详情中没有数据 ，dom应该根据默认数据来渲染
  }
}
// 获取校验失败的字段信息
const getInvalidFields = fields => {
  const errors = []
  for (const field in fields) {
    if (fields[field] && fields[field].length > 0) {
      errors.push({
        field: field,
        message: fields[field][0].message
      })
    }
  }
  return errors
}

// 处理表单填写得数据
const handleFormValues = () => {
  //提交的时候记得填写区号的电话，把相对应的区号字段加上
  //地址相关的还没处理

  let submitForm = []
  let result = {}
  if (props.activeName == 'beneficiary') {
    result = JSON.parse(JSON.stringify(form.value))
  } else {
    result = JSON.parse(JSON.stringify(tempBeneficiaryForm.value))
  }
  const pattern = /Time$/ // 以Time结尾
  for (const section of result['apiBeneficiaryInfoDtoList']) {
    let submitObj = {}
    if (phoneOraddressKey.value.length > 0) {
      submitObj.addressList = []
    }

    for (const key in section) {
      if (pattern.test(key) && section[key]) {
        section[key] = proxy.formatToDateTime(section[key])
      }
      // if (section['customerType'] == 'COMPANY') {
      //   for (const key1 in companyObj.value) {
      //     if (key == key1 && section[key]) {
      //       submitObj[key1] = section[key]
      //     }
      //     if (key == 'companyMobile' && section[key]) {
      //       submitObj[key] = section[key].split(' ')[1]
      //       submitObj['companyMobileCode'] = section[key].split(' ')[0]
      //     }
      //     if (key == 'authMobile' && section[key]) {
      //       submitObj[key] = section[key].split(' ')[1]
      //       submitObj['authMobileCode'] = section[key].split(' ')[0]
      //     }
      //   }
      // }
      if (section['customerType'] == 'INDIVIDUAL' && section[key]) {
        for (const key1 in personalObj.value) {
          if (key == key1) {
            submitObj[key1] = section[key]
          }
        }
      }
    }
    if (submitObj['companyMobile']) {
      submitObj['companyMobileCode'] = submitObj['companyMobile'].split(' ')[0]
      submitObj['companyMobile'] = submitObj['companyMobile'].split(' ')[1]
    }
    if (submitObj['mobile']) {
      submitObj['mobileCode'] = submitObj['mobile'].split(' ')[0]
      submitObj['mobile'] = submitObj['mobile'].split(' ')[1]
    }
    if (submitObj['authMobile']) {
      submitObj['authMobileCode'] = submitObj['authMobile'].split(' ')[0]
      submitObj['authMobile'] = submitObj['authMobile'].split(' ')[1]
    }
    phoneOraddressKey.value.forEach(item => {
      if (item.drawerType == 'address' && item.id === section.id) {
        submitObj.addressList.push({
          type: item.type,
          location: item.location,
          street: item.street,
          city: item.city,
          region: item.region
        })
      }
    })
    deleteKeyList.value.forEach(item => {
      delete submitObj[item]
    })
    if (Object.keys(submitObj).length > 0) {
      submitForm.push(submitObj)
    }
  }

  console.log('====================================')
  console.log('受益人', submitForm)
  console.log('====================================')
  // 删除多余字段

  return submitForm
}
// 表单提交
const submitForm = () => {
  console.log('form.value', form.value)

  proxy.$refs['beneficiaryInfoFormRef'].validate((valid, fields) => {
    if (valid) {
      let submitObj = handleFormValues()
      console.log('====================================')
      console.log('submitObj', submitObj)
      console.log('====================================')
      // return

      if (props.idsObj.appointmentBizId) {
        editBeneficiaryInfo({
          appointmentBizId: props.idsObj.appointmentBizId,
          apiBeneficiaryInfoDtoList: submitObj
        }).then(res => {
          if (res.code == 200) {
            handleEditStatus(true)
            proxy.$message.success('受益人修改成功')
            emit('handleSuccessEdit')
          }
        })
      }

      errorFields.value = [] // 清空错误信息
    } else {
      // 获取校验失败的字段信息
      errorFields.value = getInvalidFields(fields)
      if (errorFields.value.length > 0) {
        proxy.$message.error(errorFields.value[0].message)
      }
    }
  })
}
const resetForm = () => {
  proxy.$modal
    .confirm('是否确认撤销所作操作？')
    .then(function () {
      if (props.customerBizId) {
        form.value = { ...oldObjInfo.value }
        editStatus.value = true
      } else {
        // resetShow('smokeQuantity', false)
        proxy.$refs['beneficiaryInfoFormRef'].resetFields()
      }
      processedBeneficiaryData.value = JSON.parse(JSON.stringify(oldAppointmentData.value))
    })

    .catch(() => {})
}

watch(
  () => props.activeName,
  newVal => {
    // 切换tab的时侯把表单值保存在临时变量里，方便切换回来的时候回显
    tempBeneficiaryForm.value = { ...form.value }
    tempSaveKey.value = { ...saveKey.value }
    tempAddressQuickList.value = JSON.parse(JSON.stringify(addressQuickList.value))
    tempPhoneQuickList.value = JSON.parse(JSON.stringify(phoneQuickList.value))
    tempBeneficiaryDomData.value = JSON.parse(JSON.stringify(processedBeneficiaryData.value))
    if (newVal === 'beneficiary') {
      openList.value = false
      setTimeout(() => {
        // 修改状态
        if (props.idsObj.appointmentBizId) {
          setFormValue()
        } else {
          // 新增状态
          processFormData({
            domdata: beneficiaryDomData,
            exportValue: null
          })
        }
      }, 500)
    }
  }
)

// 暴露给父组件
defineExpose({
  handleFormValues,
  handleEditStatus
})
</script>
<style lang="scss" scoped>
.domEmpty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  color: #a8abb2;
  margin-top: 100px;
}
.topBtn {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.formBox {
  width: 100%;
  .level1Label {
    font-size: 18px;
    margin: 15px 0;
    display: flex;
    align-items: center;
  }
  .fatherLable {
    font-size: 15px;
    border-left: 4px solid #165dff;
    padding-left: 5px;
    margin-bottom: 10px;
  }
  .fatherDes {
    font-size: 14px;
    color: #a8abb2;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .inputBox {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 0px 11px;
    .rightArrow {
      font-size: 14px;
      color: #a8abb2;
    }
  }
  .desBox {
    display: flex;
    justify-content: flex-start;
    .title {
      width: 120px;
      font-size: 14px;
      text-align: right;
    }
    .informationBox {
      margin-left: 5px;
      font-size: 14px;
      border: 1px solid #dcdfe6;
      width: 100%;
      border-radius: 4px;
      padding: 2px 4px;
      box-sizing: border-box;
    }
  }
}
.tabButton {
  box-shadow: 0 -1px 14px #00000014;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-right: 20px; */
  padding-top: 20px;
  .sumbitBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 60px;
    background-color: #165dff;
    color: #fff;
    padding: 0 30px;
    .buttonIcon {
      font-size: 16px;
      color: #fff;
    }
  }
}
.customerBox {
  .customerItem {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 -1px 14px #00000014;
    .top {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      .left {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .gender {
          display: flex;
          align-items: center;
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .left {
        .infoItem {
          display: flex;
          align-items: center;
          margin: 5px 10px;
        }
      }
    }
  }
  .customerItem:last-child {
    margin-bottom: 0px;
  }
}
</style>
