<template>
	<view class="bank-card-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="常用银行卡"
			@clickLeft="goBack()"
			right-text="添加"
			@clickRight="addBankCard"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
		</uni-nav-bar>

		<!-- 银行卡列表 -->
		<view class="card-list">
			<view class="card-item" v-for="(card, index) in bankCards" :key="card.uuid">
				<view class="card-logo">
					<view class="logo-bg">
						<text class="logo-text">{{ getBankLogo(card.open_bank) }}</text>
					</view>
				</view>
				<view class="card-info">
					<view class="card-number">尾号{{ card.card_number }}储蓄卡</view>
					<view class="bank-name">{{ card.open_bank }}</view>
				</view>
			</view>
		</view>

		<!-- 底部导航指示器 -->
		<view class="bottom-indicator"></view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import navTo from '@/utils/navTo';
import api from '@/api/api';
const bankCards = ref([]);

// 银行卡数据
const getBankCardList = () => {
	api.bankCardList({}).then(res => {
		if (res.code === 200 && res.data.bankList) {
			bankCards.value = res.data.bankList;
		}
	});
};

const goBack = () => {
	uni.navigateBack();
};

const addBankCard = () => {
	navTo({
		url: '/pages_app/idcardAuth/idcardAuth'
	});
};

// 获取银行logo文字
const getBankLogo = (bankName) => {
	const bankLogos = {
		'工商银行': '工',
		'中国银行': '中',
		'建设银行': '建',
		'农业银行': '农',
		'交通银行': '交',
		'招商银行': '招',
		'民生银行': '民',
		'兴业银行': '兴',
		'浦发银行': '浦',
		'光大银行': '光',
		'华夏银行': '华',
		'中信银行': '信',
		'平安银行': '平',
		'广发银行': '广',
		'邮储银行': '邮'
	};
	return bankLogos[bankName] || bankName.charAt(0);
};

onMounted(() => {
	getBankCardList();
});
</script>

<style lang="scss" scoped>
.bank-card-page {
	min-height: 100vh;
	background: #F5F5F5;
	position: relative;
}

/* 银行卡列表样式 */
.card-list {
	padding: 30rpx;
	
	.card-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		.card-logo {
			margin-right: 30rpx;
			
			.logo-bg {
				width: 80rpx;
				height: 80rpx;
				background: #E60012;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #E60012;
				
				.logo-text {
					color: #ffffff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		
		.card-info {
			flex: 1;
			
			.card-number {
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 8rpx;
				font-weight: 500;
			}
			
			.bank-name {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
}

/* 底部指示器 */
.bottom-indicator {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 6rpx;
	background: #333333;
	border-radius: 3rpx;
}
</style>
