gypsy-crm-frontend-vu/pages/mine/components/BankInfoTab.vue

<template>
  <view class="user-form crm-form">
    <uni-row class="demo-uni-row uni-row1">
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <view class="card">
          <view class="bank-menu card-header">
            <view v-for="item in bankTypes" :key="item.key" class="bank-menu-item"
                  :class="{ active: selectedBankType === item.key }" @click="selectedBankType = item.key">
              <!--                        <image class="bank-icon" :src="item.icon" mode="widthFix" />-->
              <text>{{ item.label }}</text>
            </view>
          </view>
          <view class="card-body">
            <view class="bank-content" v-if="selectedBankType === 'crypto'">
              <view class="d-flex flex-wrap align-items-center header-title mb-3 card-header">
                <view class="h4">
                  {{ t('blockchain.item2') }}
                </view>
                <button type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()" v-if="cryptoWallets.length < 2">
                  <view class="d-flex align-items-center">
                  <cwg-icon name="crm-plus" :size="14" color="#fff" />
                  <text>{{ `${t('Btn.New')}${t('blockchain.item2')}` }}</text>
                  </view>
                </button>
              </view>

              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in cryptoWallets" :key="item.id">
                <view class="bank-header card-header">
                  <uni-row style="width: 100%;">
                    <uni-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                      <view class="bank-title">
                        <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
                      </view>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                      <view class="actions">
                        <view class="bank-actions">
                          <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
                                type="primary" v-t="'State.ToCertified'"
                                @click="doReady(item.id, item)" />
                          <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
                                type="primary" @click="openCardDialog(item.id, item)"
                                v-t="'PersonalManagement.CardVerify.Title'" />
                          <view class="action-btn btn-gray"
                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                v-t="'Btn.Editor'" />
                          <template v-if="editingId === item.id">
                            <view class="action-btn  btn-gray" @tap="saveBank(item)"
                                  v-t="'Btn.Save'" />
                            <view class="action-btn  btn-gray" @tap="cancelEdit()"
                                  v-t="'Btn.Cancel'" />
                          </template>
                          <view class="action-btn  btn-gray" @tap="confirmDelete(item)"
                                v-t="'Btn.Delete'" />
                        </view>
                      </view>

                    </uni-col>
                  </uni-row>
                </view>
                <uni-forms :model="item" labelWidth="200" label-position="top">
                  <uni-row class="card-body custom-row" :gutter="20">
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                      <uni-forms-item :label="t('blockchain.item3')">
                        <uni-easyinput :clearable="false" v-model="item.addressName"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                      <uni-forms-item :label="t('blockchain.item4')">
                        <uni-easyinput :clearable="false" v-model="item.address"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                             v-if="item.cardFiles && item.cardFiles.length">
                      <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
                        <view class="photo-upload">
                          <view v-for="(file, idx) in item.cardFiles" :key="idx" class="photo-item">
                            <image class="photo-preview" :src="updateUrl + file.path"
                                   mode="aspectFill" />
                          </view>
                        </view>
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" class="mt-3">
                      <uni-forms-item class="checkbox-item">
                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1" multiple
                                           :localdata="hobbys" />
                      </uni-forms-item>
                    </uni-col>
                  </uni-row>
                </uni-forms>

              </view>
            </view>
            <view class="bank-content" v-if="selectedBankType === 'unionpay'">
              <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
                <view class="h4">
                  {{ t('PersonalManagement.Title.ChinaUnionPayCard') }}
                </view>
                <button type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()" v-if="unionpayCards.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.ChinaUnionPayCard')}` }}</text>
                  </view>
                </button>
              </view>
              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in unionpayCards" :key="item.id">
                <view class="bank-header card-header">
                  <uni-row style="width: 100%;">
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <view class="bank-title">
                        <text>{{ currentBankType?.label }}{{ index + 1 }}</text>
                      </view>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                      <view class="bank-actions">
                        <view class="action-btn  btn-gray"
                              v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                              v-t="'Btn.Editor'" />
                        <template v-if="editingId === item.id">
                          <view class="action-btn  btn-gray" @tap="saveBank(item)"
                                v-t="'Btn.Save'" />
                          <view class="action-btn  btn-gray" @tap="cancelEdit()"
                                v-t="'Btn.Cancel'" />
                        </template>
                        <view class="action-btn btn-gray" @tap="confirmDelete(item)"
                              v-t="'Btn.Delete'" />
                      </view>
                    </uni-col>
                  </uni-row>
                </view>
                <uni-forms :model="item" labelWidth="200" label-position="top">
                  <uni-row class="card-body custom-row" :gutter="20">
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
                        <cwg-combox :clearable="false" :filterable="true" v-model:value="item.bankName"
                                    :options="bankOptions" :placeholder="t('placeholder.choose')"
                                    :disabled="editingId !== item.id" @change="onStateChange" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')">
                        <uni-easyinput :clearable="false" v-model="item.bankBranchName"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                      <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
                        <cwg-file-picker-wrapper
                          v-model="item.bankFront"
                          :disabled="editingId !== item.id"
                          :delIcon="editingId === item.id"
                          :limit="1"
                          uploadUrl="/custom/bank/upload"
                          :baseUrl="updateUrl"
                          :imageWidth="120"
                          :imageHeight="120"
                          uploadText="点击上传"
                          replaceText="点击替换" noImageText="暂无图片"
                          :showPreviewDelete="editingId === item.id"
                          @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" class="mt-3">
                      <uni-forms-item class="checkbox-item">
                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
                                           multiple :localdata="hobbys" />
                      </uni-forms-item>
                    </uni-col>

                  </uni-row>
                </uni-forms>
              </view>

            </view>
            <view class="bank-content" v-if="selectedBankType === 'bank'">
              <view class="d-flex flex-wrap align-items-center card-header header-title mb-3">
                <view class="h4">
                  {{ t('PersonalManagement.Title.BankWireTransfer') }}
                </view>
                <button type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()" v-if="wireTransfers.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.BankWireTransfer')}` }}</text>
                  </view>
                </button>
              </view>
              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in wireTransfers" :key="item.id">
                <view class="bank-header card-header ">
                  <uni-row style="width: 100%;">
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <view class="bank-title">
                        <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
                      </view>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                      <view class="bank-actions">
                        <view class="action-btn  btn-gray"
                              v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                              v-t="'Btn.Editor'" />
                        <template v-if="editingId === item.id">
                          <view class="action-btn  btn-gray" @tap="saveBank(item)"
                                v-t="'Btn.Save'" />
                          <view class="action-btn  btn-gray" @tap="cancelEdit()"
                                v-t="'Btn.Cancel'" />
                        </template>
                        <view class="action-btn  btn-gray" @tap="confirmDelete(item)"
                              v-t="'Btn.Delete'" />
                      </view>
                    </uni-col>
                  </uni-row>
                </view>
                <uni-forms :model="item" labelWidth="200" label-position="top">
                  <uni-row class="card-body custom-row" :gutter="20">
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" >
                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
                                       :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
                        <uni-easyinput :clearable="false" v-model="item.bankName"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')">
                        <uni-easyinput :clearable="false" v-model="item.bankAddr"
                                       :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')"
                                       :disabled="editingId !== item.id" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')">
                        <uni-easyinput :clearable="false" v-model="item.swiftCode"
                                       :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')"
                                       :disabled="editingId !== item.id" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.BankCode')">
                        <uni-easyinput :clearable="false" v-model="item.bankCode"
                                       :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')"
                                       :disabled="editingId !== item.id" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item
                        :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
                        <uni-easyinput :clearable="false" v-model="item.agencyNo"
                                       :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')"
                                       :disabled="editingId !== item.id" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" class="mt-3">
                      <uni-forms-item class="checkbox-item">
                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
                                           multiple :localdata="hobbys" />
                      </uni-forms-item>
                    </uni-col>
                  </uni-row>
                </uni-forms>
              </view>

            </view>
            <view class="bank-content" v-if="selectedBankType === 'credit'">
              <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
                <view class="h4">
                  {{ t('PersonalManagement.Label.CreditCard') }}
                </view>
                <button type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()" v-if="creditCards.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Label.CreditCard')}` }}</text>
                  </view>
                </button>
              </view>
              <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in creditCards" :key="item.id">
                <view class="bank-header card-header">
                    <uni-row style="width: 100%;">
                      <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                        <view class="bank-title">
                          <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
                        </view>
                      </uni-col>
                      <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                        <view class="bank-actions">
                          <view class="action-btn  btn-gray"
                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                v-t="'Btn.Editor'" />
                          <template v-if="editingId === item.id">
                            <view class="action-btn  btn-gray" @tap="saveBank(item)"
                                  v-t="'Btn.Save'" />
                            <view class="action-btn  btn-gray" @tap="cancelEdit()"
                                  v-t="'Btn.Cancel'" />
                          </template>
                          <view class="action-btn  btn-gray" @tap="confirmDelete(item)"
                                v-t="'Btn.Delete'" />
                        </view>
                      </uni-col>
                    </uni-row>
                  </view>
                <uni-forms :model="item" labelWidth="200" label-position="top">
                  <uni-row class="card-body custom-row" :gutter="20">
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
                        <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
                                       :placeholder="t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
                        <uni-easyinput :clearable="false" v-model="item.bankCardNum"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
                        <uni-easyinput :clearable="false" v-model="item.expiryYearMonth"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                      <uni-forms-item :label="t('CVV')">
                        <uni-easyinput :clearable="false" v-model="item.cvv"
                                       :disabled="editingId !== item.id"
                                       :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" class="mt-3">
                      <uni-forms-item class="checkbox-item">
                        <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
                                           multiple :localdata="hobbys" />
                      </uni-forms-item>
                    </uni-col>

                  </uni-row>
                </uni-forms>
              </view>

            </view>
          </view>

        </view>
      </uni-col>
    </uni-row>
  </view>
  <!-- 删除确认弹窗 -->
  <uni-popup ref="deletePopup" type="dialog">
    <uni-popup-dialog :title="t('Msg.SystemPrompt')" :content="t('Msg.Delete')" @confirm="deleteBank"
                      @close="closeDeletePopup" />
  </uni-popup>
  <!-- 新增银行弹窗 -->
  <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
  <!-- kyc认证弹窗 -->
  <kyc-auth-dialog ref="kycDialogRef" />
  <!-- 证件认证弹窗 -->
  <card-auth-dialog ref="cardDialogRef" />
</template>

<script setup lang="ts">
  import { computed, ref, onMounted } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { personalApi } from '@/service/personal'
  import KycAuthDialog from './KycAuthDialog.vue'
  import CardAuthDialog from './CardAuthDialog.vue'
  import AddBankDialog from '@/components/AddBankDialog.vue'
  import config from '@/config'
  import { BankType } from './bank'

  const { t, locale } = useI18n()

  interface BankListType {
    key: string;
    label: string;
    icon: string;
  }

  interface BankInfo {
    id?: string;
    type: number;
    defaultBank: boolean;
    approveStatus?: number;
    authStatus?: number;
    blockchainName: string;
    walletAddress: string;
    photos?: string[];
    expiryYearMonth?: string;
    expiryYear?: string;
    expiryMonth?: string;

    [key: string]: any;
  }

  const selectedBankType = ref<string>('crypto')
  const bankTypes = computed<BankListType[]>(() => [
    { key: 'crypto', label: t('blockchain.item2'), icon: '/static/images/info/bank-info_1.png' },
    {
      key: 'unionpay',
      label: t('PersonalManagement.Title.ChinaUnionPayCard'),
      icon: '/static/images/info/bank-info_2.png',
    },
    { key: 'bank', label: t('PersonalManagement.Title.BankWireTransfer'), icon: '/static/images/info/bank-info_3.png' },
    { key: 'credit', label: t('PersonalManagement.Label.CreditCard'), icon: '/static/images/info/bank-info_4.png' },
  ])
  const currentBankType = computed(() => bankTypes.value.find((item: BankListType) => item.key === selectedBankType.value))
  const hobbys = computed(() => {
    switch (selectedBankType.value) {
      case 'crypto':
        return [{ value: 1, text: t('blockchain.item8') }]
      case 'unionpay':
        return [{ value: 1, text: t('PersonalManagement.Title.DefaultBank') }]
      case 'bank':
        return [{ value: 1, text: t('PersonalManagement.Title.DefaultWire') }]
      case 'credit':
        return [{ value: 1, text: t('PersonalManagement.Title.DefaultCredit') }]
    }
  })
  // 状态
  const updateUrl = config.Host05
  const editingId = ref(null)
  const bankList = ref([])
  const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value))

  const getLangName = (item: any) => (isZh.value ? item.name : item.enName)
  const createOptions = (list: any[], valueKey = 'code') => {
    return list.map((item) => ({
      text: getLangName(item),
      value: getLangName(item),
    }))
  }

  const bankOptions = computed(() => createOptions(bankList.value, 'name'))
  // 银行数据
  const bankData = ref({
    [BankType.CRYPTO]: [],
    [BankType.UNIONPAY]: [],
    [BankType.WIRE_TRANSFER]: [],
    [BankType.CREDIT_CARD]: [],
  })

  // 计算属性 - 各类型银行列表
  const cryptoWallets = computed(() => bankData.value[BankType.CRYPTO] || [])
  const unionpayCards = computed(() => bankData.value[BankType.UNIONPAY] || [])
  const wireTransfers = computed(() => bankData.value[BankType.WIRE_TRANSFER] || [])
  const creditCards = computed(() => bankData.value[BankType.CREDIT_CARD] || [])


  // 弹出层ref
  const deletePopup = ref(null)
  const deleteTarget = ref(null)


  // 开始编辑
  const startEdit = (item) => {
    editingId.value = item.id
  }

  // 取消编辑
  const cancelEdit = () => {
    editingId.value = null
    getBankInfo() // 重新加载数据
  }

  // 保存银行信息
  const saveBank = async (item) => {

    if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
      uni.showToast({
        title: '加密钱包认证审核中',
        icon: 'none',
      })
      return
    }
    try {
      const params = { ...item }
      params.defaultBank = params.defaultBank1[0] ? 1 : 0

      if (params.type === BankType.CREDIT_CARD && params.expiryYearMonth) {
        const [year, month] = params.expiryYearMonth.split('/')
        params.expiryYear = year
        params.expiryMonth = month
      }
      const res = await personalApi.customBankUpdate(params)
      if (res.code === 200) {
        uni.hideLoading()
        uni.showToast({
          title: t('Msg.Success'),
          icon: 'success',
        })
        editingId.value = null
        getBankInfo()
      } else {
        throw new Error(res.msg)
      }
    } catch (error) {
      uni.hideLoading()
      uni.showToast({
        title: error.message || t('Msg.Fail'),
        icon: 'none',
      })
    }
  }
  // 删除
  const confirmDelete = (item) => {
    if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
      uni.showToast({
        title: '加密钱包认证审核中',
        icon: 'none',
      })
      return
    }
    deleteTarget.value = item
    deletePopup.value.open()
  }

  // 关闭删除弹窗
  const closeDeletePopup = () => {
    deletePopup.value.close()
    deleteTarget.value = null
  }

  // 执行删除
  const deleteBank = async () => {
    if (!deleteTarget.value) return
    try {
      const res = await personalApi.customBankDelete({
        ids: [deleteTarget.value.id],
      })
      if (res.code === 200) {
        uni.hideLoading()
        uni.showToast({
          title: t('Msg.DeleteSuccess'),
          icon: 'success',
        })
        deletePopup.value.close()
        deleteTarget.value = null
        getBankInfo()
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
    } catch (error) {
      uni.hideLoading()
      uni.showToast({
        title: error.msg,
        icon: 'none',
      })
      deletePopup.value.close()
    }
  }
  // 新增银行信息
  const addBankDialogRef = ref(null)

  function addBank() {
    switch (selectedBankType.value) {
      case 'crypto':
        openAddCrypto()
        break
      case 'unionpay':
        openAddUnionpay()
        break
      case 'bank':
        openAddBank()
        break
      case 'credit':
        openAddCredit()
        break
    }
  }

  function openAddCrypto() {
    const wallets = cryptoWallets.value || []
    // 1️⃣ 没有钱包
    if (wallets.length === 0) {
      addBankDialogRef.value?.open(4)
      return
    }
    // 2️⃣ 是否存在未认证钱包
    const hasUnAuth = wallets.some(
      item => item.authStatus === 0 || item.approveStatus === 1,
    )
    if (hasUnAuth) {
      uni.showToast({
        title: '加密钱包未认证',
        icon: 'none',
      })
      return
    }
    // 3️⃣ 是否达到上限
    if (wallets.length >= 2) {
      uni.showToast({
        title: t('blockchain.item9'),
        icon: 'none',
      })
      return
    }
    // 4️⃣ 正常打开
    addBankDialogRef.value?.open(4)
  }

  function openAddUnionpay() {
    const wallets = unionpayCards.value || []
    if (wallets.length === 0) {
      addBankDialogRef.value?.open(1)
      return
    }
    if (wallets.length >= 2) {
      uni.showToast({
        title: t('Msg.UnionPayCARDS'),
        icon: 'none',
      })
      return
    }
    addBankDialogRef.value?.open(1)
  }

  function openAddBank() {
    const wallets = wireTransfers.value || []
    if (wallets.length === 0) {
      addBankDialogRef.value?.open(2)
      return
    }
    if (wallets.length >= 2) {
      uni.showToast({
        title: t('Msg.WireTransfers'),
        icon: 'none',
      })
      return
    }
    addBankDialogRef.value?.open(2)
  }

  function openAddCredit() {
    const wallets = creditCards.value || []
    if (wallets.length === 0) {
      addBankDialogRef.value?.open(3)
      return
    }
    addBankDialogRef.value?.open(3)
  }

  // 新增银行信息成功回调
  const addSuccess = (e) => {
    if (selectedBankType.value === 'crypto') {
      openKycDialog(e)
    }
    getBankInfo()
  }

  // kyc认证和证件认证
  const kycDialogRef = ref(null)
  const cardDialogRef = ref(null)
  // kyc认证
  const doReady = (bankId, item) => {
    if (item.approveStatus == 1) {
      uni.showToast({
        title: '加密钱包认证审核中',
        icon: 'none',
      })
      return
    }
    if (item.authStatus == 1) {
      uni.showToast({
        title: '加密钱包已认证',
        icon: 'none',
      })
      return
    }
    openKycDialog(bankId)
  }

  // 打开kyc认证弹窗
  function openKycDialog(e) {
    kycDialogRef.value?.open(e)
  }

  // 打开证件认证弹窗
  function openCardDialog(e, item) {
    if (item.approveStatus == 1) {
      uni.showToast({
        title: '加密钱包认证审核中',
        icon: 'none',
      })
      return
    }
    if (item.authStatus == 1) {
      uni.showToast({
        title: '加密钱包已认证',
        icon: 'none',
      })
      return
    }
    cardDialogRef.value?.open(e, item)
  }


  // 掩码卡号
  const maskCardNumber = (num) => {
    if (!num) return '--'
    if (num.length <= 4) return num
    return '**** **** **** ' + num.slice(-4)
  }

  // 获取银行列表
  const getBankList = async () => {
    const res = await personalApi.BankList({})
    if (res.code === 200) {
      bankList.value = res.data
    }
  }
  // 文件更新处理
  const handleFileUpdate = (newValue, item, field) => {
    item[field] = newValue
  }

  // 或者如果你需要在上传成功后做其他操作
  const handleUploadComplete = (result, item, field) => {
    if (result.success) {
      console.log('上传完成:', result.paths)
      // 可以在这里做其他操作，比如保存到服务器
    }
  }
  // 获取银行信息
  const getBankInfo = async () => {
    try {
      const res = await personalApi.customBankList({})
      if (res.code === 200) {
        // 清空数据
        bankData.value = {
          [BankType.CRYPTO]: [],
          [BankType.UNIONPAY]: [],
          [BankType.WIRE_TRANSFER]: [],
          [BankType.CREDIT_CARD]: [],
        }
        // 分类数据
        res.data.forEach(item => {
          item.defaultBank1 = item.defaultBank == 1 ? [1] : []
          if (item.type === BankType.UNIONPAY) {
            bankData.value[BankType.UNIONPAY].push(item)
          } else if (item.type === BankType.WIRE_TRANSFER) {
            bankData.value[BankType.WIRE_TRANSFER].push(item)
          } else if (item.type === BankType.CREDIT_CARD) {
            item.expiryYearMonth = item.expiryYear && item.expiryMonth
              ? `${item.expiryYear}/${item.expiryMonth}`
              : ''
            bankData.value[BankType.CREDIT_CARD].push(item)
          } else if (item.type === BankType.CRYPTO) {
            bankData.value[BankType.CRYPTO].push(item)
          }
        })
      }
    } catch (error) {
      uni.showToast({
        title: error.message || t('Msg.Fail'),
        icon: 'none',
      })
    }
  }
  // 获取银行信息
  onMounted(() => {
    getBankList()
    getBankInfo()
  })
</script>


<style scoped lang="scss">
  @import "@/uni.scss";
  .btn {
    margin: 0;
  }
  .user-form {
    margin-top: px2rpx(30);
  }

  :deep(.uni-row1) {
    .uni-col {
    }

    .uni-forms-item {
      min-height: px2rpx(79);
      margin-bottom: px2rpx(10);
    }

    .uni-easyinput__content {
      background-color: var(--bs-secondary-bg) !important;
    }
  }

  .bank-menu {
    // background: #fff;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    &.card-header {
      padding: px2rpx(10) px2rpx(20);
    }

    .bank-menu-item {
      flex: 1;
      min-width: px2rpx(260);
      display: flex;
      align-items: center;
      justify-content: center;
      //gap: px2rpx(12);
      padding: 0 px2rpx(16);
      cursor: pointer;
      font-size: px2rpx(16);
      font-weight: bold;
      color: var(--bs-emphasis-color);
      transition: all 0.3s;
      height: px2rpx(36);
      border-radius: px2rpx(8);

      .bank-icon {
        width: px2rpx(50);
      }

      &.active {
        background: #f5f5f5;
        color: #000;
        border-radius: px2rpx(8);

        &:hover {
          background: var(--bs-link-hover-color-rgb);
          color: #333;
        }
      }

      &:hover {
        background: #f5f5f5;
        color: #333;
      }

      &.active:hover {
        background: #f5f5f5;
      }
    }
  }

  .bank-content {
    //border-radius: px2rpx(8);

    .bank-info {
      margin-bottom: px2rpx(20);
      .bank-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        //border-bottom: 1px solid #f3f4f6;

        .bank-title {
          display: flex;
          align-items: center;
          font-size: px2rpx(20);
          font-weight: 600;
          line-height: px2rpx(32);
          color: #1f2937;
          //margin-bottom: px2rpx(20);
        }

        .actions {
          display: flex;
          flex-direction: column;
        }

        @media screen and (max-width: 992px) {
          .bank-actions {
            justify-content: flex-start !important;
          }
        }

        .bank-actions {
          display: flex;
          gap: px2rpx(20);
          align-items: center;
          flex-wrap: wrap;
          //margin-bottom: px2rpx(10);
          justify-content: flex-end;

          .action-btn {
            padding: px2rpx(8) px2rpx(16);
            border: 1px solid #d1d5db;
            border-radius: px2rpx(4);
            font-size: px2rpx(14);
            cursor: pointer;
            background: #fff;
            transition: all 0.3s;

            &:hover {
              background: #f3f4f6;
            }

            &.delete {
              background: var(--bs-btn-bg);
              color: #fff;
              border-color: var(--bs-btn-bg);

              &:hover {
                background: var(--bs-btn-hover-bg);
              }
            }
          }
        }
      }
    }

    .photo-upload {
      display: flex;
      flex-wrap: wrap;

      gap: px2rpx(16);

      .photo-item {
        width: px2rpx(120);
        height: px2rpx(120);
        border-radius: px2rpx(8);
        overflow: hidden;
        background: #f3f4f6;

        .photo-preview {
          width: 100%;
          height: 100%;
        }
      }
    }

    .header-title {
      justify-content: space-between;
      padding: 0 0 px2rpx(20) 0;
    }

    .add-wallet-btn {
      height: px2rpx(40);
      background: var(--bs-secondary);
      color: #fff;
      border-radius: px2rpx(8);
      padding: 0 px2rpx(20);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: px2rpx(8);
      font-size: px2rpx(16);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #d11920;
      }
    }

    .bankFront {
      width: 100%;

      // 上传包装器
      .upload-wrapper {
        :deep(.uni-file-picker) {
          .file-picker__box {
            border: none;
            background: transparent;
          }

          // 文件列表容器
          .file-picker__box-list {
            display: flex;
            gap: px2rpx(16);
            flex-wrap: wrap;

            // 已上传的文件项
            .file-picker__box-item {
              width: px2rpx(300) !important;
              height: px2rpx(300) !important;
              margin: 0;
              border: 1px solid #e5e7eb;
              border-radius: px2rpx(8);
              overflow: hidden;
              position: relative;

              // 图片预览
              .file-picker__box-item-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              // 删除按钮
              .file-picker__box-item-close {
                position: absolute;
                top: px2rpx(4);
                right: px2rpx(4);
                width: px2rpx(24);
                height: px2rpx(24);
                background: rgba(0, 0, 0, 0.5);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                &::before {
                  content: '×';
                  color: var(--bs-emphasis-color);
                  font-size: px2rpx(28);
                  line-height: 1;
                }

                .close-icon {
                  display: none;
                }
              }
            }
          }

          // 上传按钮
          .file-picker__box-add {
            width: px2rpx(300) !important;
            height: px2rpx(300) !important;
            margin: 0;
            border: 2rpx dashed #d1d5db;
            border-radius: px2rpx(8);
            background: #f9fafb;
            transition: all 0.3s;

            &:hover {
              border-color: #ea2027;
              background: #fef2f2;
            }

            // 自定义上传按钮内容
            .custom-upload-btn {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .plus {
                font-size: px2rpx(48);
                color: #9ca3af;
                line-height: 1;
                margin-bottom: px2rpx(8);
              }

              .tip {
                font-size: px2rpx(24);
                color: #6b7280;
              }
            }

            // 隐藏默认的加号
            .add-icon {
              display: none;
            }
          }

          // 上传进度
          .file-picker__box-progress {
            width: px2rpx(300);
            height: px2rpx(300);
            border-radius: px2rpx(8);
            background: rgba(0, 0, 0, 0.5);
            color: var(--bs-emphasis-color);
          }
        }
      }

      // 图片预览
      .image-preview {
        .preview-image {
          width: px2rpx(300);
          height: px2rpx(300);
          border-radius: px2rpx(8);
          object-fit: cover;
          cursor: pointer;
          border: 1px solid #e5e7eb;
        }

        .no-image {
          width: px2rpx(300);
          height: px2rpx(300);
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          border-radius: px2rpx(8);
          color: var(--bs-heading-color);
          font-size: px2rpx(24);
          border: 1px solid #e5e7eb;
        }
      }
    }
  }

  .custom-row {
    gap: px2rpx(20); // 使用 gap 替代 gutter
    :deep(.cwg-combox) {
      .disabled-text{
        height: 100%;
      }
      height: 3rem;
    }
  }
</style>