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="6" :xl="6">
                <view class="bank-menu">
                    <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>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <view class="bank-content" v-if="selectedBankType === 'crypto'">
                    <view class="bank-info" v-for="(item, index) in cryptoWallets" :key="item.id">
                        <view class="card-header">
                            <view class="bank-header">
                                <uni-row style="width: 100%;">
                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                        <view class="bank-title">
                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
                                        </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" v-if="item.authStatus == 0"
                                                    type="primary" v-t="'State.ToCertified'"
                                                    @click="doReady(item.id, item)" />
                                                <view class="action-btn bg-secondary" v-if="item.authStatus == 0"
                                                    type="primary" @click="openCardDialog(item.id, item)"
                                                    v-t="'PersonalManagement.CardVerify.Title'" />

                                            </view>
                                            <view class="bank-actions">
                                                <view class="action-btn bg-secondary"
                                                    v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                                    v-t="'Btn.Editor'" />
                                                <template v-if="editingId === item.id">
                                                    <view class="action-btn bg-secondary" @tap="saveBank(item)"
                                                        v-t="'Btn.Save'" />
                                                    <view class="action-btn bg-secondary" @tap="cancelEdit()"
                                                        v-t="'Btn.Cancel'" />
                                                </template>
                                                <view class="action-btn delete" @tap="confirmDelete(item)"
                                                    v-t="'Btn.Delete'" />
                                            </view>
                                        </view>

                                    </uni-col>
                                </uni-row>
                            </view>
                        </view>
                        <uni-forms :model="item" labelWidth="200" label-position="top">
                            <uni-row class="demo-uni-row">
                                <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">
                                    <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 class="add-wallet-btn" @click="addBank()" v-if="cryptoWallets.length < 2">
                        <text>+</text>
                        <text>添加加密货币钱包</text>
                    </view>
                </view>
                <view class="bank-content" v-if="selectedBankType === 'unionpay'">
                    <view class="bank-info" v-for="(item, index) in unionpayCards" :key="item.id">
                        <view class="card-header">
                            <view class="bank-header">
                                <uni-row style="width: 100%;">
                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                        <view class="bank-title">
                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
                                            <text>{{ currentBankType?.label }}{{ index + 1 }} </text>
                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
                                        </view>
                                    </uni-col>
                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                                        <view class="bank-actions">
                                            <view class="action-btn bg-secondary"
                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                                v-t="'Btn.Editor'" />
                                            <template v-if="editingId === item.id">
                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
                                                    v-t="'Btn.Save'" />
                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
                                                    v-t="'Btn.Cancel'" />
                                            </template>
                                            <view class="action-btn delete" @tap="confirmDelete(item)"
                                                v-t="'Btn.Delete'" />
                                        </view>
                                    </uni-col>
                                </uni-row>
                            </view>
                        </view>
                        <uni-forms :model="item" labelWidth="200" label-position="top">
                            <uni-row class="demo-uni-row">
                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <uni-forms-item>
                                        <cwg-file-picker-wrapper v-model="item.bankFront"
                                            :editable="editingId === item.id" :limit="1" uploadUrl="/custom/bank/upload"
                                            :baseUrl="updateUrl" :imageWidth="150" :imageHeight="150" uploadText="点击上传"
                                            replaceText="点击替换" noImageText="暂无图片"
                                            :showPreviewDelete="editingId === item.id"
                                            @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
                                    </uni-forms-item>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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">
                                    <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 class="add-wallet-btn" @click="addBank()" v-if="unionpayCards.length < 2">
                        <text>+</text>
                        <text>添加中国银联卡</text>
                    </view>
                </view>
                <view class="bank-content" v-if="selectedBankType === 'bank'">
                    <view class="bank-info" v-for="(item, index) in wireTransfers" :key="item.id">
                        <view class="card-header">
                            <view class="bank-header">
                                <uni-row style="width: 100%;">
                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                        <view class="bank-title">
                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
                                        </view>
                                    </uni-col>
                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                                        <view class="bank-actions">
                                            <view class="action-btn bg-secondary"
                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                                v-t="'Btn.Editor'" />
                                            <template v-if="editingId === item.id">
                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
                                                    v-t="'Btn.Save'" />
                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
                                                    v-t="'Btn.Cancel'" />
                                            </template>
                                            <view class="action-btn delete" @tap="confirmDelete(item)"
                                                v-t="'Btn.Delete'" />
                                        </view>
                                    </uni-col>
                                </uni-row>
                            </view>
                        </view>
                        <uni-forms :model="item" labelWidth="200" label-position="top">
                            <uni-row class="demo-uni-row">
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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">
                                    <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 class="add-wallet-btn" @click="addBank()" v-if="wireTransfers.length < 2">
                        <text>+</text>
                        <text>添加银行电汇</text>
                    </view>
                </view>
                <view class="bank-content" v-if="selectedBankType === 'credit'">
                    <view class="bank-info" v-for="(item, index) in creditCards" :key="item.id">
                        <view class="card-header">
                            <view class="bank-header">
                                <uni-row style="width: 100%;">
                                    <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                        <view class="bank-title">
                                            <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
                                            <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
                                            <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
                                        </view>
                                    </uni-col>
                                    <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                                        <view class="bank-actions">
                                            <view class="action-btn bg-secondary"
                                                v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
                                                v-t="'Btn.Editor'" />
                                            <template v-if="editingId === item.id">
                                                <view class="action-btn bg-secondary" @tap="saveBank(item)"
                                                    v-t="'Btn.Save'" />
                                                <view class="action-btn bg-secondary" @tap="cancelEdit()"
                                                    v-t="'Btn.Cancel'" />
                                            </template>
                                            <view class="action-btn delete" @tap="confirmDelete(item)"
                                                v-t="'Btn.Delete'" />
                                        </view>
                                    </uni-col>
                                </uni-row>
                            </view>
                        </view>
                        <uni-forms :model="item" labelWidth="200" label-position="top">
                            <uni-row class="demo-uni-row">
                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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="12" :lg="12" :xl="12">
                                    <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">
                                    <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 class="add-wallet-btn" @click="addBank()">
                        <text>+</text>
                        <text>添加信用卡</text>
                    </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.Host80
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";
.user-form {
    margin-top: px2rpx(30);
}

:deep(.uni-row1) {
    .uni-col {
        padding: 0 0 !important;
    }

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

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

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

    .bank-menu-item {
        display: flex;
        align-items: center;
        gap: px2rpx(12);
        padding: px2rpx(10) px2rpx(16);
        cursor: pointer;
        border: 1px solid var(--bs-border-color);
        font-size: px2rpx(16);
        font-weight: 500;
        color: var(--bs-emphasis-color);
        transition: all 0.3s;
        height: px2rpx(50);
        border-radius: px2rpx(8);
        margin-bottom: px2rpx(8);

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

        &.active {
            background: var(--bs-secondary);
            color: #ffffff;
            border-radius: px2rpx(8);
        }

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

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

.bank-content {
    //background: #fff;
    border-radius: px2rpx(8);
    padding: 0 px2rpx(24);

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

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

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

            .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: #ea2027;
                        color: var(--bs-emphasis-color);
                        border-color: #ea2027;

                        &:hover {
                            background: #d11920;
                        }
                    }
                }
            }
        }
    }

    .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%;
            }
        }
    }

    .add-wallet-btn {
        margin-top: px2rpx(24);
        height: px2rpx(48);
        background: #ea2027;
        color: #fff;
        border-radius: px2rpx(4);
        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;
            }
        }
    }
}
</style>