ucard-back-front/src/views/components/VirtualCard/index.vue

<template>
  <div id="TradingDetailedInfoAdd" class="InfoBox" :class="{ active: dialogInfoTradingAdd }">
    <div class="header">
      <div v-if="addType == '1'">
        <span class="title">{{ $t('Ucard.CardVirtualCard.d1') }}</span>
      </div>
      <div v-if="addType == '2'">
        <span class="title">{{ $t('Ucard.CardVirtualCard.d2') }}</span>
      </div>
      <div v-if="addType == '3'">
        <span class="title">{{ $t('Ucard.CardVirtualCard.d3') }}</span>
      </div>
      <div v-if="addType == '4'">
        <span class="title">{{ $t('R-CardOrder-Btn3') }}</span>
      </div>
      <div v-if="addType == '5'">
        <span class="title">{{ $t('R-CardKycAuth-Btn1') }}</span>
      </div>
      <div v-if="addType == '6'">
        <span class="title">{{ $t('Ucard.CardVirtualCard.d6') }}</span>
      </div>
      <div v-if="addType == '7'">
        <span class="title">{{ $t('R-CardVirtualCard-Btn6') }}</span>
      </div>
      <div v-if="addType == '8'">
        <span class="title">{{ $t('R-CardVirtualCard-Btn7') }}</span>
      </div>
      <div v-if="addType == '9'">
        <span class="title">{{ $t('R-CardVirtualCard-Btn3') }}</span>
      </div>
      <div v-if="addType == '10'">
        <span class="title">{{ $t('R-Business-Btn1') }}</span>
      </div>
      <div v-if="addType == '11'">
        <span class="title">{{ $t('R-Recharge-Btn3') }}</span>
      </div>
      <div v-if="addType == '12'">
        <span class="title">{{ $t('Ucard.CardKycAuth.b3') }}</span>
      </div>
      <div v-if="addType == '13'">
        <span class="title">{{ $t('R-CardVirtualCard-Btn11') }}</span>
      </div>
      <span class="close crm-cursor" @click="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>

    <template v-if="addType == '1'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item prop="uniqueId" :label="$t('Ucard.CardVirtualCard.item7') + '：'">
          <el-input
            v-model="form.uniqueId"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cardNumber" :label="$t('Ucard.CardVirtualCard.item2') + '：'">
          <el-input v-model="form.cardNumber" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="activeCode" :label="$t('card.Form.f26') + '：'">
          <el-input v-model="form.activeCode" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="pin" :label="$t('card.Form.f25') + '：'">
          <el-input v-model="form.pin" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>
    <template v-if="addType == '2'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item
          prop="cId
"
          :label="$t('Label.CidAccount') + '：'"
        >
          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="lastName" :label="$t('Ucard.CardKycAuth.item4') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="firstName" :label="$t('Ucard.CardKycAuth.item5') + '：'">
          <el-input
            v-model="form.firstName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mobile" :label="$t('Ucard.CardKycAuth.item2') + '：'">
          <el-input
            v-model="form.mobile"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" :label="$t('Label.Email') + '：'">
          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>

        <el-form-item prop="cardNumber" :label="$t('Ucard.CardVirtualCard.item2') + '：'">
          <el-input
            v-model="form.cardNumber"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>

        <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '3'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item prop="currency" :label="$t('Ucard.CardVirtualCard.item9') + '：'">
          <el-select v-model="form.currency" :placeholder="$t('Placeholder.Choose')">
            <el-option
              v-for="(item, index) in currencyList"
              :key="index"
              :value="item.currency"
              :label="item.currency"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Ucard.CardVirtualCard.b9') }}</span>
      <el-form v-if="isOk" ref="receivedRef" :model="received" label-width="120PX">
        <el-form-item :label="$t('Ucard.Recharge.item7') + '：'">
          {{ received.receivedCurrency }}
        </el-form-item>
        <el-form-item :label="$t('Ucard.Recharge.item6') + '：'">
          {{ received.receivedAmount }}
        </el-form-item>
        <el-form-item :label="$t('Ucard.Recharge.item8') + '：'">
          {{ received.exchangeRate }}
        </el-form-item>
      </el-form>
      <span v-if="isOk" class="btn crm-cursor" @click="close">{{
        $t('Ucard.CardVirtualCard.b10')
      }}</span>
    </template>

    <template v-if="addType == '4'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('Ucard.CardKycAuth.item8') + '：'">
          <el-input v-model="form.cId" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item9') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-input
            v-model="form.firstName"
            disabled
            style="width: 45%; display: inline-block; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item10') + '：'">
          <el-input v-model="form.email" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item11') + '：'">
          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
          <el-select
            v-model="form.status"
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
            @change="cardNumberList"
          >
            <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
            <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
          <el-select
            v-model="form.approveDesc"
            filterable
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
            allow-create
          >
            <el-option
              v-for="item in reasons"
              :key="item.id"
              :label="Session.Get('lang') == 'cn' ? item.content : item.enContent"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.status == 2"
          prop="cardTypeId"
          :label="$t('Ucard.CardKycAuth.item1') + '：'"
        >
          <el-select
            v-model="form.cardTypeId"
            :placeholder="$t('Placeholder.Choose')"
            @change="changeCardType"
          >
            <el-option
              v-for="(item, index) in cardType"
              :key="index"
              :value="item.cardTypeId"
              :label="item.cardName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="cardTypes && form.status == 2"
          prop="cardNumber"
          :label="$t('card.Form.f24') + '：'"
        >
          <el-select v-model="form.cardNumber" filterable :placeholder="$t('Placeholder.Choose')">
            <el-option
              v-for="(item, index) in cardNumbersList"
              :key="index"
              :value="item.cardNumber"
              :label="item.cardNumber"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '5'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('Ucard.CardKycAuth.item8') + '：'">
          <el-input v-model="form.cId" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item9') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-input
            v-model="form.firstName"
            disabled
            style="width: 45%; display: inline-block; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item10') + '：'">
          <el-input v-model="form.email" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item11') + '：'">
          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
          <el-select
            v-model="form.status"
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
          >
            <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
            <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
          <el-select
            v-model="form.approveDesc"
            filterable
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
            allow-create
          >
            <el-option
              v-for="item in reasons"
              :key="item.id"
              :label="Session.Get('lang') == 'cn' ? item.content : item.enContent"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Ucard.CardVirtualCard.b9') }}</span>
    </template>

    <template v-if="addType == '6'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item prop="cardNumber" :label="$t('Ucard.CardVirtualCard.item2') + '：'">
          <el-input
            v-model="form.cardNumber"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pin" :label="$t('card.Form.f25') + '：'">
          <el-input v-model="form.pin" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '7' || addType == '8'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item prop="cardNumber" :label="$t('Ucard.CardVirtualCard.item2') + '：'">
          <el-input
            v-model="form.cardNumber"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('card.Form.f27') + '：'">
          <el-input v-model="form.clientRemark" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '9'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('card.Form.f26') + '：'">
          <el-input v-model="activationCode" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('card.Form.f62') }}</span>
    </template>

    <template v-if="addType == '10'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item
          prop="cId
"
          :label="$t('Label.CidAccount') + '：'"
        >
          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="lastName" :label="$t('Ucard.CardKycAuth.item4') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="firstName" :label="$t('Ucard.CardKycAuth.item5') + '：'">
          <el-input
            v-model="form.firstName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mobile" :label="$t('Ucard.CardKycAuth.item2') + '：'">
          <el-input
            v-model="form.mobile"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" :label="$t('Label.Email') + '：'">
          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="type" :label="$t('card.Form.f52') + '：'">
          <el-select v-model="form.type" :placeholder="$t('Placeholder.Choose')">
            <el-option :value="1" :label="$t('card.Form.f60')"></el-option>
            <el-option :value="2" :label="$t('card.Form.f61')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '11'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('Ucard.CardKycAuth.item8') + '：'">
          <el-input v-model="form.cId" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item9') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-input
            v-model="form.firstName"
            disabled
            style="width: 45%; display: inline-block; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item10') + '：'">
          <el-input v-model="form.email" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item11') + '：'">
          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
          <el-select
            v-model="form.status"
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
          >
            <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
            <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
          <el-select
            v-model="form.approveDesc"
            filterable
            class="crm_search_down"
            :placeholder="$t('Placeholder.Choose')"
            allow-create
          >
            <el-option
              v-for="item in reasons"
              :key="item.id"
              :label="Session.Get('lang') == 'cn' ? item.content : item.enContent"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '12'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item :label="$t('Ucard.CardKycAuth.item8') + '：'">
          <el-input v-model="form.cId" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item9') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            style="width: 45%; display: inline-block"
          ></el-input>
          <el-input
            v-model="form.firstName"
            disabled
            style="width: 45%; display: inline-block; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item10') + '：'">
          <el-input v-model="form.email" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item :label="$t('Ucard.CardKycAuth.item11') + '：'">
          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="cardTypeId" :label="$t('Ucard.CardKycAuth.item1') + '：'">
          <el-select
            v-model="form.cardTypeId"
            :placeholder="$t('Placeholder.Choose')"
            @change="changeCardType"
          >
            <el-option
              v-for="(item, index) in cardType"
              :key="index"
              :value="item.cardTypeId"
              :label="item.cardName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="nationality" :label="$t('card.Form.f7')">
          <el-select v-model="form.nationality" filterable :placeholder="$t('card.vaildate.v6')">
            <el-option
              v-for="item in countryCityList"
              :key="item.id"
              :label="item.cnName"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="town" :label="$t('card.Form.f9')">
          <el-select
            v-model="form.town"
            filterable
            :placeholder="$t('card.vaildate.v7')"
            :disabled="!form.nationality"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.enName"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="addressCn" :label="$t('card.Form.f10')">
          <el-input
            v-model="form.addressCn"
            :placeholder="$t('card.vaildate.v27')"
            @change="setAddress"
          />
        </el-form-item>
        <el-form-item prop="address" :label="$t('card.New.n11')">
          <el-input v-model="form.address" :placeholder="$t('card.vaildate.v27')" />
        </el-form-item>
        <el-form-item prop="postCode" :label="$t('card.Form.f11')">
          <el-input v-model="form.postCode" :placeholder="$t('card.vaildate.v8')" />
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>

    <template v-if="addType == '13'">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
        <el-form-item prop="cId" :label="$t('Label.CidAccount') + '：'">
          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
        <el-form-item prop="lastName" :label="$t('Ucard.CardKycAuth.item4') + '：'">
          <el-input
            v-model="form.lastName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="firstName" :label="$t('Ucard.CardKycAuth.item5') + '：'">
          <el-input
            v-model="form.firstName"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mobile" :label="$t('Ucard.CardKycAuth.item2') + '：'">
          <el-input
            v-model="form.mobile"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" :label="$t('Label.Email') + '：'">
          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>

        <el-form-item prop="cardNumber" :label="$t('Ucard.CardVirtualCard.item2') + '：'">
          <el-input
            v-model="form.cardNumber"
            disabled
            :placeholder="$t('Placeholder.Input')"
          ></el-input>
        </el-form-item>

        <el-form-item prop="amount" :label="$t('card.Form.f55') + '：'">
          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
        </el-form-item>
      </el-form>
      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, watch, onMounted, inject } from 'vue'
  import Config from '@/config'
  import Service from '@/service/ucard'
  import Service2 from '@/service/apply'
  import { pinyin } from 'pinyin-pro'
  import { useI18n } from 'vue-i18n'
  import { copyText } from '@/utils/untils'
  import { Close } from '@element-plus/icons-vue'

  const { Code, Host85 } = Config

  const Session = inject('session')
  const Pigeon = inject('pigeon')
  const { t } = useI18n()
  // Props
  const props = defineProps({
    dialogInfoTradingAdd: {
      type: Boolean,
      default: false,
    },
    addType: {
      default: '',
    },
    editor: {
      default: '',
    },
    myInfo: {
      default: '',
    },
    formList: {
      default: '',
    },
  })

  // Emits
  const emit = defineEmits(['closeAdd', 'confirmToReload'])

  // 响应式数据
  const form = ref({})
  const formRef = ref()
  const receivedRef = ref()
  const cardType = ref([])
  const cardTypes = ref(false)
  const isOk = ref(false)
  const currencyList = ref([])
  const imgUrl = ref(Host85)
  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
  const received = reactive({ receivedCurrency: '', receivedAmount: '', exchangeRate: '' })
  const activationCode = ref('')
  const reasons = ref([])
  const countryCityList = ref([])
  const cityList = ref([])
  const cardNumbersList = ref([])

  // 计算属性
  const AccessToken = computed(() => ({
    'Access-Token': sessionStorage.getItem('access_token'),
  }))

  const user = computed(() => {
    try {
      return JSON.parse(Session.Get('user', true) || '{}')
    } catch (error) {
      console.error('Error parsing user data:', error)
      return {}
    }
  })

  // 验证规则
  const rules = reactive({
    signaturePhoto: [
      {
        required: true,
        message: t('vaildate.img.empty'),
        trigger: 'change',
      },
    ],
    currency: [
      {
        required: true,
        message: t('Placeholder.Choose'),
        trigger: 'change',
      },
    ],
    cardNumber: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    activeCode: [
      {
        validator: (rule, value, callback) => {
          if (/^\d*$/.test(value)) {
            callback()
          } else {
            callback(new Error(t('card.vaildate.v24')))
          }
        },
        trigger: 'blur',
        required: true,
      },
    ],
    pin: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    uniqueId: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    amount: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    cardTypeId: [
      {
        required: true,
        message: t('vaildate.select.empty'),
        trigger: 'blur',
      },
    ],
    cardNo: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    status: [
      {
        required: true,
        message: t('vaildate.select.empty'),
        trigger: 'blur',
      },
    ],
    type: [
      {
        required: true,
        message: t('vaildate.select.empty'),
        trigger: 'blur',
      },
    ],
    approveStatus: [
      {
        required: true,
        message: t('vaildate.select.empty'),
        trigger: 'blur',
      },
    ],
    approveDesc: [
      {
        required: true,
        message: t('vaildate.select.empty'),
        trigger: 'blur',
      },
    ],
    nationality: [
      {
        required: true,
        message: t('card.vaildate.v6'),
        trigger: 'change',
      },
    ],
    country: [
      {
        required: true,
        message: t('card.vaildate.v6'),
        trigger: 'change',
      },
    ],
    town: [
      {
        required: true,
        message: t('card.vaildate.v7'),
        trigger: 'change',
      },
    ],
    address: [
      {
        required: true,
        message: t('card.vaildate.v27'),
        trigger: 'blur',
      },
      {
        validator: (rule, value, callback) => {
          const regex = /[\u4e00-\u9fa5]/
          if (value.length < 2 || value.length > 40) {
            callback(new Error(t('card.New.n1')))
          } else if (regex.test(value)) {
            callback(new Error(t('card.New.n1')))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
    addressCn: [
      {
        required: true,
        message: t('card.vaildate.v27'),
        trigger: 'blur',
      },
    ],
    postCode: [
      {
        required: true,
        message: t('card.vaildate.v8'),
        trigger: 'blur',
      },
      {
        validator: (rule, value, callback) => {
          const regex = /^[a-zA-Z0-9]{1,15}$/
          if (!regex.test(value)) {
            callback(new Error(t('card.New.n2')))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
  })

  // 方法
  const getCountryListForSelect = async () => {
    const res = await Service.ucardCountryCity({ code: '' })
    if (res.code === 200) {
      countryCityList.value = res.data || []
    }
  }

  const cardNumberList = async () => {
    const res = await Service.cardNumberDropdown({ status: 1 })
    if (res.code === 200) {
      cardNumbersList.value = res.data || []
    }
  }

  const getCityListForSelect = async (countryCode) => {
    const res = await Service.ucardCountryCity({ code: countryCode })
    if (res.code === 200) {
      cityList.value = res.data || []
    }
  }

  const setAddress = (e) => {
    const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
    if (containsChinese(e)) {
      form.value.address = formatText(e)
    } else {
      form.value.address = e
    }
  }

  const formatText = (input) => {
    const chinesePattern = /[\u4e00-\u9fa5]+/g
    let formattedText = input.replace(chinesePattern, (match) => {
      return ' ' + pinyin(match, { toneType: 'none', type: 'capitalize' }) + ' '
    })
    return formattedText
  }

  // 银行卡激活
  const ucardActivate = async () => {
    const res = await Service.ucardActivate({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success1'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 冻结卡片
  const ucardFreeze = async () => {
    const res = await Service.ucardFreeze({ ...form.value, cId: user.value.cId })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success4'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 解冻卡片
  const ucardUnfreeze = async () => {
    const res = await Service.ucardUnfreeze({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success5'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 银行卡充值
  const ucardRecharge = async () => {
    form.value.amount = Number(form.value.amount)
    if (form.value.amount <= 0) {
      Pigeon.MessageError(t('card.vaildate.v34'))
      return
    }
    const res = await Service.ucardRecharge({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success2'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  const ucardRithdraw = async () => {
    form.value.amount = Number(form.value.amount)
    if (form.value.amount <= 0) {
      Pigeon.MessageError(t('card.vaildate.v34'))
      return
    }
    const res = await Service.ucardRithdraw({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success2'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 获取币种
  const cardTypesList = async () => {
    const res = await Service.cardTypesList({
      cardTypeId: form.value.cardTypeId,
      page: {
        current: pagerInfo.current,
        row: pagerInfo.row,
      },
    })
    if (res.code == Code.StatusOK) {
      cardType.value = res.data
      currencyList.value = res.data[0]?.rechargeCurrencyInfoList || []
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  const changeCardType = (e) => {
    const res = cardType.value.find((item) => item.cardTypeId == e)
    if (res?.type == 'Physical') {
      cardTypes.value = true
    } else {
      cardTypes.value = false
    }
  }

  // 查询充值预估到账金额
  const ucardRechargeEstimate = async ({ cardTypeId, currency, amount }) => {
    const res = await Service.ucardRechargeEstimate({
      cardTypeId,
      currency,
      amount,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.SearchSuccess'))
      isOk.value = true
      Object.assign(received, res.data)
    } else {
      isOk.value = false
      Pigeon.MessageError(res.msg)
    }
  }

  //关闭
  const close = () => {
    emit('closeAdd', false)
  }

  //提交成功后回调
  const confirmToReload = () => {
    emit('confirmToReload', true)
  }

  //提交
  const confirm = async () => {
    const valid = await formRef.value.validate()
    if (valid) {
      toConfirm()
    }
  }

  const toConfirm = () => {
    if (form.value.cardNumber) {
      form.value.cardNumber = form.value.cardNumber.replace(/\s+/g, '')
    }
    switch (props.addType) {
      case '6':
        ucardResetPassword()
        break
      case '3':
        ucardRechargeEstimate({ ...form.value, cId: user.value.cId })
        break
      case '1':
        ucardActivate()
        break
      case '2':
        ucardRecharge()
        break
      case '4':
        if (form.value.status == 3) {
          applyApprove()
        } else {
          numberVerify()
        }
        break
      case '5':
        kycSubmit()
        break
      case '7':
        ucardFreeze()
        break
      case '8':
        ucardUnfreeze()
        break
      case '9':
        copyText(activationCode.value)
        break
      case '10':
        balanceUpdate()
        break
      case '11':
        rechargeApprove()
        break
      case '12':
        ucardApply()
        break
      case '13':
        ucardRithdraw()
        break
    }
  }

  // 申请审批
  const applyApprove = async () => {
    const res = await Service.applyApprove({
      cardTypeId: form.value.cardTypeId,
      cardNumber: form.value.cardNumber,
      uniqueId: form.value.uniqueId,
      approveDesc: form.value.approveDesc,
      approveStatus: form.value.status,
      id: form.value.id,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      if (form.value.status == 3) {
        Pigeon.MessageOK(t('Msg.Success11'))
      } else {
        Pigeon.MessageOK(t('Msg.Success17'))
      }
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 申请开卡
  const ucardApply = async () => {
    await Service.addressUpdate({
      ...form.value,
      mailingAddress: form.value.address,
      mailingAddressCn: form.value.addressCn,
    })
    const res = await Service.ucardApply({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success7'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 审核充值
  const rechargeApprove = async () => {
    const res = await Service.rechargeApprove({
      cardTypeId: form.value.cardTypeId,
      cardNumber: form.value.cardNumber,
      uniqueId: form.value.uniqueId,
      approveDesc: form.value.approveDesc,
      approveStatus: form.value.status,
      ids: [form.value.id],
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success12'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 找回密码
  const ucardResetPassword = async () => {
    const res = await Service.ucardResetPassword({
      ...form.value,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success3'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 审核KYC认证
  const kycSubmit = async () => {
    const res = await Service.kycSubmit({ ...form.value, cId: user.value.cId })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success13'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 卡是否可用
  const numberVerify = async () => {
    const res = await Service.numberVerify({
      cardNumber: form.value.cardNumber,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageConfirm(
        t('card.vaildate.v41'),
        t('Msg.SystemPrompt'),
        t('Btn.Confirm'),
        t('Btn.Cancel'),
        applyApprove,
        function () {}
      )
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  //获取原因列表
  const searchReasons = async () => {
    const res = await Service2.reasonsRefusalList({ type: 15 })
    if (res.code == Code.StatusOK) {
      reasons.value = res.data == null ? {} : res.data
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  //获取激活码
  const getActivationCode = async () => {
    const res = await Service.getActivationCode({
      cardNo: form.value.cardNo,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      activationCode.value = res.data.values
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 调整余额
  const balanceUpdate = async () => {
    form.value.amount = Number(form.value.amount)
    if (form.value.amount <= 0) {
      Pigeon.MessageError(t('card.vaildate.v34'))
      return
    }
    const res = await Service.balanceUpdate({
      amount: form.value.amount,
      cId: form.value.cId,
      uniqueId: form.value.uniqueId,
      type: form.value.type,
    })
    if (res.code == Code.StatusOK) {
      Pigeon.MessageOK(t('Msg.Success14'))
      confirmToReload()
    } else {
      Pigeon.MessageError(res.msg)
    }
  }

  // 生命周期
  onMounted(() => {
    cardNumberList()
  })

  // 监听器
  watch(
    () => props.formList,
    (formData) => {
      form.value = {}
      isOk.value = false

      Object.assign(received, {
        receivedCurrency: '',
        receivedAmount: '',
        exchangeRate: '',
      })

      form.value = {
        ...formData,
        signaturePhoto: '',
        currency: '',
        clientRemark: '',
        activePhoto: '',
        status: '',
      }

      if (props.addType == '9' && props.dialogInfoTradingAdd) {
        getActivationCode()
      }
    }
  )

  watch(
    () => props.addType,
    (type) => {
      if (type == '3' || type == '2' || type == '4' || type == '12') {
        cardTypesList()
      }
      if (type == '5' || type == '11' || type == '4') {
        searchReasons()
      }
      if (type == '12') {
        getCountryListForSelect()
        if (props.formList.nationality) {
          getCityListForSelect(props.formList.country)
        }
      }
      if (type == '4') {
        if (props.formList.type == 'Physical') {
          cardTypes.value = true
        } else {
          cardTypes.value = false
        }
      }
    }
  )
</script>

<style lang="scss" scoped>
  .imgs {
    width: 100%;
    height: 100%;
    position: relative;

    .el-upload-list__item-actions {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .dispute-submit-container {
    padding: 20px;
  }

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #303133;
  }

  .section-divider {
    margin: 30px 0 15px;
    border-top: 1px solid #ebeef5;
    padding-top: 15px;
  }

  .subsection-title {
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
  }

  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-bottom: 15px;
  }

  .note {
    font-size: 12px;
    color: #909399;
    margin-left: 10px;
  }

  .info-item,
  .file-item {
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px dashed #e4e7ed;
    border-radius: 4px;
  }

  .remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .add-btn-container {
    margin-bottom: 20px;
  }

  .upload-file {
    width: 148px;
    height: 148px;
    line-height: 148px;
  }

  .upload-file .el-upload {
    width: 148px;
    height: 148px;
    line-height: 148px;
  }

  .form-actions {
    margin-top: 30px;
  }
</style>