<template>
	<view class="bank-item" :style="bankThem || 'background-color: #f40;'">
		<view class="bank-head">
			<image :src="image" mode="aspectFit" @error="onImageError"></image>
			<view class="bank-info">
				<text class="bank-name">{{bankName}}</text>
				<text class="card-type">{{cardType}}</text>
			</view>
		</view>
		<view class="card-code">
			<text class="omit">****</text>
			<text class="omit">****</text>
			<text class="omit">****</text>
			<text>{{endNumber}}</text>
		</view>
		<image class="bank-watermark" :src="image" mode="aspectFit"></image>
	</view>
</template>

<script>
export default {
	name: 'mallBank',
	props: {
		bankCode: { type: String, required: true },
		bankName: { type: String, required: true },
		cardType: { type: String, default: 'Card' },
		cardCode: { type: String, required: true }
	},
	computed: {
		endNumber() {
			let length = this.cardCode.length
			return this.cardCode.substr(length - 4, length)
		}
	},
	data() {
		return {
			bankThem: '',
			image: ''
		}
	},
	created() {
		this.buildItem()
	},
	methods: {
		onImageError(e) {
			console.error('[mall-bank] 图片加载失败:', this.image)
		},
		resolveBankCode(code) {
			const nameMap = {
				'工商银行': 'ICBC', '中國工商銀行': 'ICBC', '工商銀行': 'ICBC',
				'农业银行': 'ABC', '中國農業銀行': 'ABC', '農業銀行': 'ABC', '農業銀行(香港)': 'ABC',
				'中国银行': 'BOC', '中國銀行': 'BOC',
				'建设银行': 'CCB', '中國建設銀行': 'CCB', '建設銀行': 'CCB',
				'招商银行': 'CMB', '招商銀行': 'CMB',
				'民生银行': 'CMBC', '中國民生銀行': 'CMBC', '民生銀行': 'CMBC',
				'交通银行': 'COMM', '交通銀行': 'COMM',
				'邮储银行': 'PSBC', '郵儲銀行': 'PSBC', '中國郵政儲蓄銀行': 'PSBC',
				'平安银行': 'PAB', '平安銀行': 'PAB',
				'浦发银行': 'SPDB', '浦發銀行': 'SPDB', '上海浦東發展銀行': 'SPDB',
				'广发银行': 'GDB', '廣發銀行': 'GDB',
				'光大银行': 'CEB', '光大銀行': 'CEB', '中國光大銀行': 'CEB',
				'兴业银行': 'CIB', '興業銀行': 'CIB', '興業銀行(香港)': 'CIB',
				'中信银行': 'CITIC', '中信銀行': 'CITIC', '中國中信銀行': 'CITIC',
				'支付宝': 'ALIPAY', '支付寶': 'ALIPAY',
				'微信': 'WECHAT', '微信支付': 'WECHAT'
			}
			const upper = (code || '').toUpperCase()
			const englishCodes = ['ICBC','ABC','BOC','CCB','CMB','CMBC','COMM','PSBC','PAB','SPDB','GDB','CEB','CIB','CITIC','ALIPAY','WECHAT']
			if (englishCodes.includes(upper)) return upper
			return nameMap[code] || upper
		},
		buildItem() {
			const code = this.resolveBankCode(this.bankCode)
			this.image = `/static/images/bank/${code}.png`
			this.bankThem = uni.getStorageSync(`BANK_${code}`)
			if (this.bankThem) return
			const colorMap = {
				ICBC: ['#d4272c', '#b71c1c'], ABC: ['#43a047', '#2e7d32'], BOC: ['#c62828', '#a31515'],
				CCB: ['#1565c0', '#0d47a1'], CMB: ['#e65100', '#bf360c'], CMBC: ['#00838f', '#006064'],
				COMM: ['#1b5e20', '#0a3d0a'], PSBC: ['#2e7d32', '#1b5e20'], PAB: ['#f57f17', '#e65100'],
				SPDB: ['#283593', '#1a237e'], GDB: ['#c62828', '#b71c1c'], CEB: ['#6a1b9a', '#4a148c'],
				CIB: ['#00695c', '#004d40'], CITIC: ['#d32f2f', '#b71c1c'],
				ALIPAY: ['#1677ff', '#0958d9'], WECHAT: ['#07c160', '#06ad56']
			}
			const colors = colorMap[code] || ['#ff6b35', '#e55a2b']
			this.bankThem = `background-image: linear-gradient(45deg, ${colors[0]}, ${colors[1]});`
			uni.setStorageSync(`BANK_${code}`, this.bankThem)
		}
	}
}
</script>

<style>
.omit {
	font-size: 48rpx;
	margin-right: 30rpx;
}

.card-code {
	margin-top: 15rpx;
	display: flex;
	justify-content: flex-end;
	color: #FFFFFF;
	font-size: 38rpx;
}

.card-type {
	font-size: 24rpx;
	color: #F1F1F1;
}

.bank-name {
	font-size: 32rpx;
	color: #FFFFFF;
}

.bank-info {
	display: flex;
	flex-direction: column;
	margin-left: 30rpx;
}

.bank-head {
	display: flex;
	flex: 1;
	align-items: center;
}

.bank-head image {
	width: 100rpx;
	height: 100rpx;
	padding: 15rpx;
	background-color: #FFFFFF;
	border-radius: 50%;
	overflow: hidden;
}

.bank-watermark {
	position: absolute;
	right: 60rpx;
	bottom: -30rpx;
	width: 120rpx;
	height: 120rpx;
	filter: grayscale(100%) brightness(400%);
	opacity: 0.1;
}

.bank-item {
	flex: 1;
	margin-top: 20rpx;
	position: relative;
	border-radius: 20rpx;
	padding: 20rpx;
}
</style>