<template>
	<view class="bankCardWrapper" @click="onClick">
		<view class="decoration">
			<view class="left"></view>
			<view class="right"></view>
		</view>
		<view class="bankCardContent">
			<view class="cardTitle">
				<view class="bankName">{{ values.bank_name }}</view>
				<view class="bankStatusWrapper">
					<view
						class="bankStatus"
						:style="{
							color: applyStatusMap[getStatus()]?.color,
							backgroundColor: applyStatusMap[getStatus()]?.bgc
						}"
					>
						{{ applyStatusMap[getStatus()]?.text ?? '-' }}
					</view>
					<view
						v-if="values.bank_standby_1 !== 'B1' && Number(values.apply_status) === 0 && Number(values.verify_email) === 0"
						class="toVerifyBtn"
						@click.stop="() => toVerify(values)"
					>
						{{ this.$t('form.personalData.financialInformation.bankStatus.toVerify') }}
					</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="bankCardDetails">
				<view class="detailItem">
					<view class="point"></view>
					<text>{{ values.bank_no }}</text>
				</view>
				<view class="detailItem">
					<view class="point"></view>
					<text>{{ values.bank_currency }}</text>
				</view>
				<view class="detailItem">
					<view class="point"></view>
					<text>{{ values.bank_cards }}</text>
				</view>
				<view class="detailItem" v-if="values.bank_standby_1 === 'B1'">
					<view class="point"></view>
					<text>{{ values.bank_sub_name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { sendBankMail } from '@/services/user/completeInfo.ts';
export default {
	name: 'BankCard',
	props: {
		values: {
			type: Object,
			required: true,
			default: () => ({})
		},
		onClick: {
			type: Function,
			required: true
		}
	},
	data() {
		return {
			current: 0,
			items: ['全部账户', this.$t('form.bankAccount.label'), this.$t('form.personalData.financialInformation.digitalCurrency.label')],
			applyStatusMap: {
				approved: {
					color: 'rgba(67, 207, 124, 1)',
					bgc: 'rgba(67, 207, 124, 0.2)',
					text: this.$t('form.personalData.financialInformation.bankStatus.approved')
				},
				verified: {
					color: 'rgba(67, 207, 124, 1)',
					bgc: 'rgba(67, 207, 124, 0.2)',
					text: this.$t('form.personalData.financialInformation.bankStatus.verified')
				},
				pending: {
					color: 'rgba(255, 195, 0, 1)',
					bgc: 'rgba(255, 195, 0, 0.2)',
					text: this.$t('form.personalData.financialInformation.bankStatus.pending')
				},
				unverified: {
					color: 'rgba(255, 195, 0, 1)',
					bgc: 'rgba(255, 195, 0, 0.2)',
					text: this.$t('form.personalData.financialInformation.bankStatus.unverified')
				},
				rejected: {
					color: 'rgba(255, 87, 51, 1)',
					bgc: 'rgba(255, 87, 51, 0.2)',
					text: this.$t('form.personalData.financialInformation.bankStatus.rejected')
				}
			}
		};
	},
	methods: {
		getStatus() {
			if (this.values.bank_standby_1 === 'B1') {
				switch (Number(this.values.apply_status)) {
					case 0:
						return 'approved';
						break;
					case 1:
						return 'pending';
						break;
					case 2:
						return 'rejected';
						break;
				}
			} else {
				switch (true) {
					case Number(this.values.apply_status) === 0 && Number(this.values.verify_email) === 1:
						return 'verified';
						break;
					case Number(this.values.apply_status) === 0 && Number(this.values.verify_email) === 0:
						return 'unverified';
						break;
					case Number(this.values.apply_status) === 1:
						return 'pending';
						break;
					case Number(this.values.apply_status) === 2:
						return 'rejected';
						break;
				}
			}
		},
		async toVerify(bank) {
			const res = await sendBankMail({ id: bank.id });
			if (res && res.code === 0) {
				this.$cusModal.showModal({
					type: 'message',
					status: 'success',
					contentText: this.$t('form.personalData.financialInformation.saveBankStatus.B1_1')
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
