<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <el-form ref="cusCustomerQueryVoFormRef" v-loading="cusCustomerInfoVoLoading" :model="cusCustomerInfoVo" label-width="80px">
        <el-row>
          <el-form-item label="主客户号" prop="customerNo" label-width="100px">
            <el-input v-model="cusCustomerInfoVo.customerNo" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="姓名" prop="name" label-width="100px">
            <el-input v-model="cusCustomerInfoVo.name" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="性别" prop="gender" label-width="100px">
            <el-select v-model="cusCustomerInfoVo.gender" placeholder="" style="width: 195px" disabled>
              <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="英文名" prop="englishName" label-width="100px">
            <el-input v-model="cusCustomerInfoVo.englishName" placeholder="" disabled />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="出生日期" prop="birthday" label-width="100px">
            <el-date-picker
              v-model="cusCustomerInfoVo.birthday"
              clearable
              type="date"
              value-format="YYYY-MM-DD"
              placeholder=""
              style="width: 190px"
              disabled
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="年龄" prop="age" label-width="100px">
            <el-input v-model="age" placeholder="" disabled />
          </el-form-item>
          <el-form-item label="国籍" prop="country" label-width="100px">
            <el-select v-model="cusCustomerInfoVo.country" placeholder="" style="width: 195px" disabled>
              <el-option v-for="dict in nation" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状态" prop="marriage" label-width="100px">
            <el-select v-model="cusCustomerInfoVo.marriage" placeholder="" style="width: 195px" disabled>
              <el-option v-for="dict in marriage" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="客户验真标识" prop="verificationStatus" label-width="100px">
            <el-select v-model="cusCustomerInfoVo.verificationStatus" placeholder="" style="width: 195px" disabled>
              <el-option v-for="dict in verification_status" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="是否黑名单" prop="blackMark" label-width="100px">-->
          <!--            <el-select v-model="cusCustomerInfoVo.blackMark" placeholder="" style="width: 195px" disabled>-->
          <!--              <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-row>
      </el-form>
    </transition>
    <!--证件信息-->
    <el-collapse v-model="activeNames" @change="handleCustomerIdentification">
      <el-collapse-item title="证件信息" name="CustomerIdentification">
        <el-table v-loading="identificationLoading" :data="cusCustomerIdentificationVo">
          <el-table-column label="证件类型" align="center" prop="identificationType">
            <template #default="scope">
              <dict-tag :options="sys_id_type" :value="scope.row.identificationType" />
            </template>
          </el-table-column>
          <el-table-column label="证件号码" align="center" prop="identificationNumber" show-overflow-tooltip />
          <el-table-column label="证件有效起期" align="center" prop="validFrom" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ parseTime(scope.row.validFrom, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="证件有效止期" align="center" prop="validTo" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ parseTime(scope.row.validTo, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--客户子客户信息-->
    <el-collapse v-model="activeNames" @change="handleCustomerSubId">
      <el-collapse-item title="子客户信息" name="CustomerSubId">
        <el-table v-loading="customerSubIdLoading" :data="cusCustomerSubId">
          <el-table-column label="序号" align="center" width="50">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="归属系统" align="center" prop="system">
            <template #default="scope">
              <dict-tag :options="sys_from_system" :value="scope.row.system" />
            </template>
          </el-table-column>
          <el-table-column label="子客户号" align="center" prop="subCustomerNo" show-overflow-tooltip />
          <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip />
          <el-table-column label="性别" align="center" prop="gender" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="sys_user_sex" :value="scope.row.gender" />
            </template>
          </el-table-column>
          <el-table-column label="出生日期" align="center" prop="birthday" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="证件类型" align="center" prop="identificationType" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="sys_id_type" :value="scope.row.identificationType" />
            </template>
          </el-table-column>
          <el-table-column label="证件号码" align="center" prop="identificationNumber" width="180" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--客户标签信息-->
    <el-collapse v-model="activeNames" @change="handleCustomerTagInfo">
      <el-collapse-item title="客户标签信息" name="CustomerTagInfo">
        <el-form ref="cusCustomerTagInfoFormRef" v-loading="customerTagInfoLoading" :model="cusCustomerTagInfoVo" label-width="80px">
          <el-row>
            <el-form-item label="VIP客户" prop="vipCustomer" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.vipCustomer" placeholder="VIP客户等级" style="width: 200px" disabled>
                <el-option v-for="dict in vip_customer" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户来源" prop="customerSource" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.customerSource" placeholder="客户来源" style="width: 200px" disabled>
                <el-option v-for="dict in sys_from_system" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="股东客户标识" prop="englishName" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.shareholderSign" placeholder="股东客户标识" style="width: 200px" :disabled="true">
                <el-option v-for="dict in shareholder_sign" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="理赔类型" prop="claimType" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.claimType" placeholder="理赔类型" style="width: 200px" disabled>
                <el-option v-for="dict in claim_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否身故" prop="isDeath" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.isDeath" placeholder="是否身故" style="width: 200px" disabled>
                <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身故日期" prop="deathTime" label-width="120px">
              <el-date-picker
                v-model="cusCustomerTagInfoVo.deathTime"
                type="date"
                placeholder="选择身故日期"
                value-format="YYYY-MM-DD"
                style="width: 200px"
                disabled
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="渠道" prop="channel" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.channel" placeholder="渠道" style="width: 200px" disabled>
                <el-option v-for="dict in sales_channel" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="机构" prop="institution" label-width="120px">
              <el-select v-model="cusCustomerTagInfoVo.institution" placeholder="机构" style="width: 200px" disabled>
                <el-option v-for="dict in sys_managecom" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="年收入(万元)" prop="annualIncome" label-width="120px">
              <el-input v-model="cusCustomerTagInfoVo.annualIncome" placeholder="年收入(万元)" style="width: 200px" disabled />
            </el-form-item>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <!--联系方式-->
    <el-collapse v-model="activeNames" @change="handleCustomerContact">
      <el-collapse-item title="联系方式" name="CustomerContact">
        <el-table v-loading="customerContactLoading" :data="cusCustomerContactVo">
          <el-table-column label="序号" align="center" width="50">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="系统来源" align="center" prop="system">
            <template #default="scope">
              <dict-tag :options="sys_from_system" :value="scope.row.system" />
            </template>
          </el-table-column>
          <el-table-column label="固定电话" align="center" prop="phoneNumber" show-overflow-tooltip />
          <el-table-column label="手机号码" align="center" prop="mobileNumber" show-overflow-tooltip />
          <el-table-column label="Email" align="center" prop="email" show-overflow-tooltip />
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--联系地址-->
    <el-collapse v-model="activeNames" @change="handleCustomerAddress">
      <el-collapse-item title="联系地址" name="CustomerAddress">
        <el-table v-loading="customerAddressLoading" :data="cusCustomerAddressVo">
          <el-table-column label="序号" align="center" width="50">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="系统来源" align="center" prop="system">
            <template #default="scope">
              <dict-tag :options="sys_from_system" :value="scope.row.system" />
            </template>
          </el-table-column>
          <el-table-column label="通讯地址" align="center" prop="fullAddress" show-overflow-tooltip />
          <el-table-column label="通讯地址邮编" align="center" prop="postalCode" show-overflow-tooltip />
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--工作单位-->
    <el-collapse v-model="activeNames" @change="handleCustomerEmployment">
      <el-collapse-item title="工作单位" name="CustomerEmployment">
        <el-table v-loading="customerEmploymentLoading" :data="cusCustomerEmploymentVo">
          <el-table-column label="序号" align="center" width="50">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="系统来源" align="center" prop="system">
            <template #default="scope">
              <dict-tag :options="sys_from_system" :value="scope.row.system" />
            </template>
          </el-table-column>
          <el-table-column label="工作单位" align="center" prop="employerName" show-overflow-tooltip />
          <el-table-column label="职业编码" align="center" prop="occupationCode" show-overflow-tooltip />
          <el-table-column label="职业名称" align="center" prop="occupationCode" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="occupation" :value="scope.row.occupationCode" />
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--银行信息-->
    <el-collapse v-model="activeNames" @change="handleCustomerBankVo">
      <el-collapse-item title="银行信息" name="CustomerBank">
        <el-table v-loading="customerBankLoading" :data="cusCustomerBankVo">
          <el-table-column label="序号" align="center" width="50">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="系统来源" align="center" prop="system">
            <template #default="scope">
              <dict-tag :options="sys_from_system" :value="scope.row.system" />
            </template>
          </el-table-column>
          <el-table-column label="开户银行" align="center" prop="bankCode" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="sys_bank_code" :value="scope.row.bankCode" />
            </template>
          </el-table-column>
          <el-table-column label="户名" align="center" prop="accountName" show-overflow-tooltip />
          <el-table-column label="银行账号" align="center" prop="bankAccountNumber" show-overflow-tooltip />
          <el-table-column label="开户行所在省" align="center" prop="bankProvince" show-overflow-tooltip />
          <el-table-column label="开户行所在市" align="center" prop="bankCity" show-overflow-tooltip />
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <!--保单信息-->
    <el-collapse v-model="activeNames" @change="handleCustomerContVo">
      <el-collapse-item title="保单信息" name="CustomerCont">
        <!--团险险标签-->
        <el-tabs v-model="currentTab" @tab-click="handleCont">
          <el-tab-pane label="团险保单" name="group">
            <el-table v-loading="loading" :data="cusCustomerContVo">
              <el-table-column label="序号" align="center" width="50">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="子客户号" align="center" prop="subCustomerNo" show-overflow-tooltip />
              <el-table-column label="团体保单号" align="center" prop="grpcontno" show-overflow-tooltip />
              <el-table-column label="投保单位" align="center" prop="appntName" show-overflow-tooltip />
              <el-table-column label="产品名称" align="center" prop="riskname" show-overflow-tooltip />
              <el-table-column label="保单状态" align="center" prop="contStatus" show-overflow-tooltip>
                <template #default="scope">
                  <dict-tag :options="cont_status" :value="scope.row.contStatus" />
                </template>
              </el-table-column>
              <el-table-column label="保险起期" align="center" prop="startdate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.startdate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保险止期" align="center" prop="enddate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.enddate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保费(元)" align="center" prop="prem" show-overflow-tooltip />
            </el-table>
          </el-tab-pane>
          <!--个险标签-->
          <el-tab-pane label="个险保单" name="personal">
            <el-table v-loading="loading" :data="cusCustomerContVo">
              <el-table-column label="序号" align="center" width="50">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="子客户号" align="center" prop="subCustomerNo" show-overflow-tooltip />
              <el-table-column label="个人保单号" align="center" prop="contno" show-overflow-tooltip />
              <el-table-column label="投保人" align="center" prop="appntName" show-overflow-tooltip />
              <el-table-column label="产品名称" align="center" prop="riskname" show-overflow-tooltip />
              <el-table-column label="保单状态" align="center" prop="contStatus" show-overflow-tooltip>
                <template #default="scope">
                  <dict-tag :options="cont_status" :value="scope.row.contStatus" />
                </template>
              </el-table-column>
              <el-table-column label="保险起期" align="center" prop="startdate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.startdate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保险止期" align="center" prop="enddate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.enddate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保费(元)" align="center" prop="prem" show-overflow-tooltip />
            </el-table>
          </el-tab-pane>
          <!--健康险标签-->
          <el-tab-pane label="健康险保单" name="health">
            <el-table v-loading="loading" :data="cusCustomerContVo">
              <el-table-column label="序号" align="center" width="50">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="子客户号" align="center" prop="subCustomerNo" show-overflow-tooltip />
              <el-table-column label="健康险保单号" align="center" prop="contno" show-overflow-tooltip />
              <el-table-column label="投保单位" align="center" prop="appntName" show-overflow-tooltip />
              <el-table-column label="产品名称" align="center" prop="riskname" show-overflow-tooltip />
              <el-table-column label="保单状态" align="center" prop="contStatus" show-overflow-tooltip>
                <template #default="scope">
                  <dict-tag :options="cont_status" :value="scope.row.contStatus" />
                </template>
              </el-table-column>
              <el-table-column label="保险起期" align="center" prop="startdate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.startdate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保险止期" align="center" prop="enddate" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{ parseTime(scope.row.enddate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="保费(元)" align="center" prop="prem" show-overflow-tooltip />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
  </div>
  <!--相似客户合并/拆分轨迹-->
  <el-dialog v-model="mergeAndSplitRecordsDialog.visible" :title="mergeAndSplitRecordsDialog.title" width="80%" append-to-body>
    <el-table v-loading="loading" :data="customerMergeSplitInfo">
      <el-table-column label="操作时间" align="center" prop="operatingTime" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ parseTime(scope.row.operatingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="operatingType">
        <template #default="scope">
          <dict-tag :options="merger_split" :value="scope.row.operatingType" />
        </template>
      </el-table-column>
      <el-table-column label="发起系统" align="center" prop="formSystem">
        <template #default="scope">
          <dict-tag :options="sys_from_system" :value="scope.row.formSystem" />
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="operator" show-overflow-tooltip />
      <el-table-column label="被合并客户号" align="center" prop="beforeMerger" show-overflow-tooltip />
      <el-table-column label="合并后客户号" align="center" prop="afterMerger" show-overflow-tooltip />
      <el-table-column label="拆分客户号" align="center" prop="beforeSplit" show-overflow-tooltip />
      <el-table-column label="拆分后客户号" align="center" prop="afterSplit" show-overflow-tooltip />
    </el-table>
  </el-dialog>
  <!--客户信息变更轨迹-->
  <el-dialog v-model="customerInfoChangeDialog.visible" :title="customerInfoChangeDialog.title" width="80%" append-to-body>
    <el-table v-loading="loading" :data="callbackList">
      <el-table-column label="发起时间" align="center" prop="operationDate" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.operationDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起系统" align="center" prop="fromSystem" width="160">
        <template #default="scope">
          <dict-tag :options="sys_from_system" :value="scope.row.fromSystem" />
        </template>
      </el-table-column>
      <el-table-column label="变更内容" align="center" prop="changeMsg" width="160" show-overflow-tooltip />
      <el-table-column label="变更前姓名" align="center" prop="oldName" width="160" />
      <el-table-column label="变更前性别" align="center" prop="oldGender" width="160">
        <template #default="scope">
          <dict-tag :options="sys_user_sex" :value="scope.row.oldGender" />
        </template>
      </el-table-column>
      <el-table-column label="变更前出生日期" align="center" prop="oldBirthday" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.oldBirthday, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变更前证件类型" align="center" prop="oldIdType" width="160">
        <template #default="scope">
          <dict-tag :options="sys_id_type" :value="scope.row.oldIdType" />
        </template>
      </el-table-column>
      <el-table-column label="变更前证件号码" align="center" prop="oldIdNo" width="180" />

      <el-table-column label="变更后姓名" align="center" prop="newName" width="160" />
      <el-table-column label="变更后性别" align="center" prop="newGender" width="160">
        <template #default="scope">
          <dict-tag :options="sys_user_sex" :value="scope.row.newGender" />
        </template>
      </el-table-column>
      <el-table-column label="变更后出生日期" align="center" prop="newBirthday" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.newBirthday, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变更后证件类型" align="center" prop="newIdType" width="160">
        <template #default="scope">
          <dict-tag :options="sys_id_type" :value="scope.row.newIdType" />
        </template>
      </el-table-column>
      <el-table-column label="变更后证件号码" align="center" prop="newIdNo" width="160" />
    </el-table>
  </el-dialog>
  <div class="dialog-footer">
    <el-button
      v-if="customerSign === 'cusCustomer'"
      v-hasPermi="['customer:customerInfo:mergesplit']"
      :loading="buttonLoading"
      type="primary"
      icon="ZoomOut"
      @click="mergeAndSplitRecords"
    >
      合并/拆分记录查询
    </el-button>
    <el-button
      v-if="customerSign === 'cusCustomer'"
      v-hasPermi="['customer:customerInfo:changetrack']"
      :loading="buttonLoading"
      type="primary"
      icon="Sort"
      @click="informationChange"
      >重要资料变更查询
    </el-button>
  </div>
</template>
<script setup name="CustomerInfoDetail" lang="ts">
import {
  queryCustomerAddress,
  queryCustomerBank,
  queryCustomerCont,
  queryCustomerContact,
  queryCustomerEmployment,
  queryCustomerIdentification,
  queryCustomerInfo,
  queryCustomerSubIds,
  queryCustomerTagInfo,
  queryCusCustomerMergeSplitInfo,
  queryCustomerInfoChangeTrack
} from '@/api/customer/cus';
import {
  CusCustomerAddressVo,
  CusCustomerBankVo,
  CusCustomerContactVo,
  CusCustomerContVo,
  CusCustomerEmploymentVo,
  CusCustomerIdentificationVo,
  CusCustomerInfoVo,
  CusCustomerSubId,
  CusCustomerTagInfoVo,
  CustomerMergeSplitInfo,
  CusCustomerInfoChangeTrackVo
} from '@/api/customer/cus/types';
import { reactive, ref } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const buttonLoading = ref(false);
const customerSign = ref();
//字典转换
const {
  sys_id_type,
  sys_user_sex,
  verification_status,
  shareholder_sign,
  vip_customer,
  sys_from_system,
  customer_status,
  cont_status,
  merger_split,
  nation,
  occupation,
  sys_bank_code,
  sys_province,
  sys_city,
  sys_district,
  sales_channel,
  sys_managecom,
  sys_yes_no,
  claim_type,
  marriage
} = toRefs<any>(
  proxy?.useDict(
    'sys_id_type',
    'sys_user_sex',
    'verification_status',
    'shareholder_sign',
    'vip_customer',
    'sys_from_system',
    'customer_status',
    'cont_status',
    'merger_split',
    'nation',
    'occupation',
    'sys_bank_code',
    'sys_province',
    'sys_city',
    'sys_district',
    'sales_channel',
    'sys_managecom',
    'sys_yes_no',
    'claim_type',
    'marriage'
  )
);

//客户基本信息form初始化
const cusCustomerInfoVo: CusCustomerInfoVo = ref({
  customerNo: undefined,
  name: undefined,
  gender: undefined,
  birthday: undefined,
  customerStatus: undefined,
  verificationStatus: undefined,
  verificationExpiryDate: undefined,
  verificationIdentificationTypeId: undefined,
  namePinyin: undefined,
  englishName: undefined,
  country: undefined,
  blackMark: undefined,
  marriage: undefined
});
//年龄
const age = ref();
//年龄计算
const calculateAge = (birthdate) => {
  const today = new Date();
  const birthDate = new Date(birthdate);
  let age = today.getFullYear() - birthDate.getFullYear();
  const m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
};
const cusCustomerInfoVoLoading = ref(false);
//查询个人客户详细信息
const handleRowDblClick = (row) => {
  cusCustomerInfoVoLoading.value = true;
  queryCustomerInfo(row).then((res) => {
    cusCustomerInfoVo.value = res;
    age.value = calculateAge(cusCustomerInfoVo.value.birthday);
    viewAll();
    cusCustomerInfoVoLoading.value = false;
  });
};
// 用于控制各个折叠面板展开状态的对象
const activeNames = ref([]);
//证件信息
const cusCustomerIdentificationVo = ref<CusCustomerIdentificationVo>();
const identificationLoading = ref(false);
const handleCustomerIdentification = () => {
  identificationLoading.value = true;
  queryCustomerIdentification(cusCustomerInfoVo.value.customerNo)
    .then((res) => {
      cusCustomerIdentificationVo.value = res;
      identificationLoading.value = false;
    })
    .catch((err) => {});
};
//子客户号信息
const cusCustomerSubId = ref<CusCustomerSubId>();
const customerSubIdLoading = ref(false);
const handleCustomerSubId = () => {
  customerSubIdLoading.value = true;
  queryCustomerSubIds(cusCustomerInfoVo.value.customerNo)
    .then((res) => {
      cusCustomerSubId.value = res;
      customerSubIdLoading.value = false;
    })
    .catch((err) => {
      //  console.log('系统异常，请联系管理员');
    });
};
//客户标签
const cusCustomerTagInfoVo: CusCustomerTagInfoVo = ref({
  vipCustomer: undefined,
  customerSource: undefined,
  shareholderSign: undefined,
  claimType: undefined,
  isDeath: undefined,
  deathTime: undefined,
  channel: undefined,
  institution: undefined,
  annualIncome: undefined
});
const customerTagInfoLoading = ref(false);
const handleCustomerTagInfo = () => {
  customerTagInfoLoading.value = true;
  queryCustomerTagInfo(cusCustomerInfoVo.value.customerNo).then((res) => {
    cusCustomerTagInfoVo.value = res;
    customerTagInfoLoading.value = false;
  });
};
//联系方式
const cusCustomerContactVo = ref<CusCustomerContactVo>();
const customerContactLoading = ref(false);
const handleCustomerContact = () => {
  customerContactLoading.value = true;
  queryCustomerContact(cusCustomerInfoVo.value.customerNo).then((res) => {
    cusCustomerContactVo.value = res;
    customerContactLoading.value = false;
  });
};
//联系地址
const cusCustomerAddressVo = ref<CusCustomerAddressVo>();
const customerAddressLoading = ref(false);
const handleCustomerAddress = () => {
  customerAddressLoading.value = true;
  queryCustomerAddress(cusCustomerInfoVo.value.customerNo).then((res) => {
    cusCustomerAddressVo.value = res;
    cusCustomerAddressVo.value.forEach((customerAddress) => {
      customerAddress.fullAddress =
        (customerAddress.province || '') + (customerAddress.city || '') + (customerAddress.district || '') + (customerAddress.detailedAddress || '');
      console.log(customerAddress.fullAddress);
    });
    customerAddressLoading.value = false;
  });
};
//工作单位
const cusCustomerEmploymentVo = ref<CusCustomerEmploymentVo>();
const customerEmploymentLoading = ref(false);
const handleCustomerEmployment = () => {
  customerEmploymentLoading.value = true;
  queryCustomerEmployment(cusCustomerInfoVo.value.customerNo).then((res) => {
    cusCustomerEmploymentVo.value = res;
    customerEmploymentLoading.value = false;
  });
};
//银行信息
const cusCustomerBankVo = ref<CusCustomerBankVo>();
const customerBankLoading = ref(false);
const handleCustomerBankVo = () => {
  customerBankLoading.value = true;
  queryCustomerBank(cusCustomerInfoVo.value.customerNo).then((res) => {
    cusCustomerBankVo.value = res;
    customerBankLoading.value = false;
  });
};
// 当前选中的标签页，初始化为“团体保单”标签页
const currentTab = ref('group');
//保单信息
const cusCustomerContVo = ref<CusCustomerContVo>();
const handleCont = (tab) => {
  if (tab.props.name === 'group') {
    handleGroupCont();
  } else if (tab.props.name === 'personal') {
    handlePersonalCont();
  } else if (tab.props.name === 'health') {
    handleHealthCont();
  }
};
//团险保单
const handleGroupCont = () => {
  loading.value = true;
  queryCustomerCont(cusCustomerInfoVo.value.customerNo, 'GRP').then((res) => {
    cusCustomerContVo.value = res;
    loading.value = false;
  });
};
//个险保单
const handlePersonalCont = () => {
  loading.value = true;
  queryCustomerCont(cusCustomerInfoVo.value.customerNo, 'IND').then((res) => {
    cusCustomerContVo.value = res;
    loading.value = false;
  });
};
//健康险保单
const handleHealthCont = () => {
  loading.value = true;
  queryCustomerCont(cusCustomerInfoVo.value.customerNo, 'CORP').then((res) => {
    cusCustomerContVo.value = res;
    loading.value = false;
  });
};
//打开标签,默认显示团险信息
const handleCustomerContVo = () => {
  currentTab.value = 'group';
  handleGroupCont();
};
// 按钮显示的文本，初始为"查看全部"
const viewAll = () => {
  activeNames.value = [
    'CustomerIdentification',
    'CustomerSubId',
    'CustomerTagInfo',
    'CustomerAddress',
    'CustomerEmployment',
    'CustomerBank',
    'CustomerCont',
    'CustomerContact'
  ];
  handleCustomerIdentification();
  handleCustomerSubId();
  handleCustomerTagInfo();
  handleCustomerContact();
  handleCustomerAddress();
  handleCustomerEmployment();
  handleCustomerBankVo();
  handleGroupCont();
};

//合并/拆分记录查询弹窗控制
const mergeAndSplitRecordsDialog = reactive<DialogOption>({
  visible: false,
  title: '相似客户合并/拆分轨迹'
});
//合并/拆分轨迹对象
const customerMergeSplitInfo = ref<CustomerMergeSplitInfo>();
//合并/拆分轨迹查询
const mergeAndSplitRecords = () => {
  mergeAndSplitRecordsDialog.visible = true;
  queryCusCustomerMergeSplitInfo(cusCustomerInfoVo.value.customerNo)
    .then((res) => {
      customerMergeSplitInfo.value = res;
    })
    .catch((err) => {});
};

//客户信息变更轨迹查询弹窗控制
const customerInfoChangeDialog = reactive<DialogOption>({
  visible: false,
  title: '客户信息变更轨迹'
});
//客户信息变更轨迹对象
const callbackList = ref<CusCustomerInfoChangeTrackVo>();
//客户信息变更轨迹查询
const informationChange = () => {
  customerInfoChangeDialog.visible = true;
  queryCustomerInfoChangeTrack(cusCustomerInfoVo.value.customerNo)
    .then((res) => {
      callbackList.value = res.data.recordList;
    })
    .catch((err) => {});
};

const route = useRoute();

// 监听路由参数变化
watch(
  () => route.query.customerNo,
  (newCustomerNo) => {
    if (newCustomerNo) {
      handleRowDblClick(newCustomerNo);
      currentTab.value = 'group';
    }
  }
);

// 监听 customerSign 参数
watch(
  () => route.query.customerSign,
  (newCustomerSign) => {
    if (newCustomerSign) {
      customerSign.value = newCustomerSign;
    }
  }
);

onMounted(() => {
  handleRowDblClick(route.query.customerNo);
  customerSign.value = route.query.customerSign; // 初始化 customerSign
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 靠右对齐 */
  margin-top: 5px; /* 与上方内容保持距离 */
  padding-right: 20px; /* 与右侧保持距离 */
}
</style>
