<template>
	<view class="bankCardWrapper">
<!--		<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>
            <image v-if="values.bank_standby_1 == 'B1'" src="/static/user/yhzh.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
            <image v-else src="/static/user/szhb.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
          </view>
          <text v-if="values.bank_standby_1 == 'B1'" class="bankType">{{ $t('form.bankAccount.label') }}</text>
          <text v-else class="bankType">{{ $t('form.personalData.financialInformation.digitalCurrency.label') }}</text>
					<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"-->
<!--						class="toVerifyBtn"-->
<!--						@click.stop="() => toVerify(values)"-->
<!--					>-->
<!--						{{ this.$t('form.personalData.financialInformation.bankStatus.toVerify') }}-->
<!--					</view>-->
				</view>
        <view class="controls">
          <view class="controlsIcon" @click="onClick" ><image src="/static/user/edit.svg" mode="aspectFit" style="width: 14px; height: 14px"></image></view>
          <view v-show="values.apply_status == 2" class="controlsIcon" @click="handleDeleteBank"><image src="/static/user/del.svg" mode="aspectFit" style="width: 12px; height: 12px"></image></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';
import UploadImage from "../../../../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue";
export default {
	name: 'BankCard',
  components: {UploadImage},
	props: {
		values: {
			type: Object,
			required: true,
			default: () => ({})
		},
		onClick: {
			type: Function,
			required: true
		},
    handleDeleteBank: {
			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')
				}
			}
		};
	},
  inject: ["showDialog"],
	methods: {
    showDialog(bank = {}) {
      this.showDialog(bank);
    },
		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>
