<template>
	<view class="bank-card-page">
		<!-- 顶部导航栏 -->
		 <view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
			left-icon="left"
			title="常用银行卡"
			@clickLeft="goBack"
			right-icon="plusempty"
			right-icon-color="#8B2316"
			@clickRight="addBankCard"
			color="#8B2316"
			
			:border="false"
			backgroundColor="#eeeeee"
		>
		</uni-nav-bar>

		 </view>
		<!-- 银行卡列表 -->
		<view class="card-list">
			<uni-swipe-action>
				<uni-swipe-action-item
					v-for="(card, index) in bankCards"
					:key="card.uuid"
					
					@change="onSwipeChange($event, card)"
				>
					<template v-slot:right>
						<view class="swipe-right">
							
							<view class="card-delete-btn" @click.stop="handleDeleteBankCard(card)">删除</view>
						</view>
					</template>
					<view class="card-item" :class="{ 'is-swiping': openedSwipeUuid === card.uuid }">
						<view class="card-logo">
							<image
								v-if="getBankLogoImg(card.open_bank)"
								class="bank-logo-img"
								:src="getBankLogoImg(card.open_bank)"
								mode="aspectFit"
							></image>
							<view v-else 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>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="empty-container" v-if="bankCards.length === 0">
			<image :src="emptyBankImg" class="empty-image"></image>
			<text class="empty-text">使用常用卡，支付更快捷</text>
		</view>
		<!-- <empty v-if="bankCards.length === 0" :imgWidth="'218rpx'" :imgHeight="'164rpx'" :emptyImage="emptyBankImg" emptyDesc="使用常用卡，支付更快捷"></empty> -->

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

<script setup>
import { ref, onMounted } from 'vue';
import navTo from '@/utils/navTo';
import api from '@/api/api';
import empty from "@/components/empty/empty.vue"
import emptyBankImg from "@/static/empty_bank.png"
const bankCards = ref([]);
const openedSwipeUuid = ref('');
import { onLoad,onBackPress,onShow } from '@dcloudio/uni-app';
const from = ref('');
const returnTo = ref('');
onLoad((options) => {
	if(options.from){
		from.value = options.from;
	}
	if (options.returnTo) {
		returnTo.value = decodeURIComponent(options.returnTo);
	}
});
onShow(() => {
	getBankCardList();
});
onBackPress(() => {
	if(!from.value){
		plus.runtime.quit();
		return true;
	}
});
// 银行卡数据
const getBankCardList = () => {
	api.bankCardList({}).then(res => {

		if (res.code === 200 && res.data) {
			bankCards.value = res.data;
		}
	});
};

const goBack = () => {
	if(!from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
};

const addBankCard = () => {
	const target = returnTo.value
		? `/pages_app/idcardAuth/idcardAuth?returnTo=${encodeURIComponent(returnTo.value)}`
		: '/pages_app/idcardAuth/idcardAuth';
	navTo({
		url: target
	});
};

const bankLogoMap = {
	'工商银行': '/static/icon_bankcard_gongshang.png',
	'中国银行': '/static/icon_bankcard_zhongguo.png',
	'建设银行': '/static/icon_bankcard_jianseyinhang.png',
	'农业银行': '/static/icon_bankcard_nongyeyinhang.png',
	'交通银行': '/static/icon_bankcard_jiatong.png',
	'招商银行': '/static/icon_bankcard_zhaoshangyinhang.png',
	'民生银行': '/static/icon_bankcard_minshneg.png',
	'兴业银行': '/static/icon_bankcard_xingye.png',
	'浦发银行': '/static/icon_bankcard_shanghaipudongfazhanyinhang.png',
	'光大银行': '/static/icon_bankcard_guangda.png',
	'华夏银行': '/static/icon_bankcard_huaxiayinhnag.png',
	'中信银行': '/static/icon_bankcard_zhongxinshiye.png',
	'平安银行': '/static/icon_bankcard_pingan.png',
	'广发银行': '/static/icon_bankcard_guangfa.png',
	'邮储银行': '/static/icon_bankcard_youzheng.png',
	'上海银行': '/static/icon_bankcard_shanghai.png',
	'北京银行': '/static/icon_bankcard_beijingyinhang.png'
};

const getBankLogoImg = (bankName) => {
	let name1=bankName.split(',')[0];
	let name2=bankName.split(',')[1];
	return bankLogoMap[name1] || bankLogoMap[name2];
};

const handleDeleteBankCard = (card) => {
	uni.showModal({
		title: '确认删除',
		content: `确定删除尾号${card.card_number}的银行卡吗？`,
		success: async (modalRes) => {
			if (!modalRes.confirm) return;
			try {
				const res = await api.deleteBankCard({
					uuid: card.uuid
				});
				if (res.code === 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					getBankCardList();
					return;
				}
				uni.showToast({
					title: res.msg || '删除失败',
					icon: 'none'
				});
			} catch (error) {
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		}
	});
};

const onSwipeChange = (e, card) => {
	const state = typeof e === 'string'
		? e
		: e?.position || e?.show || e?.detail?.position || e?.detail?.show || 'none';
	openedSwipeUuid.value = state === 'right' ? card.uuid : '';
};

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

</script>

<style lang="scss" scoped>
.empty-container {
	height:800rpx;
	min-width:600rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.empty-image {
		width: 218rpx;
		height: 164rpx;
	}
	.empty-text {
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #999;
	}
}
.bank-card-page {
	min-height: 100vh;
	background: #F5F5F5;
	position: relative;

	:deep(.uni-nav-bar-right-text) {
		font-size: 32rpx;
	}
	:deep(.uni-swipe){
		margin-bottom: 20rpx!important;
	}
}

/* 银行卡列表样式 */
.card-list {
	top: calc(var(--status-bar-height) + 44px);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0rpx;
	overflow-y: scroll;
	z-index: 1;
	padding: 30rpx;
	box-sizing: border-box;

	.swipe-right {
		height: 100%;
		display: flex;
		align-items: stretch;
		padding-right: 0;
		box-sizing: border-box;
	}

	.card-delete-btn {
		min-width: 112rpx;
		height: 100%;
		padding: 0 24rpx;
		border-radius: 0 16rpx 16rpx 0;
		background: #E60012;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.card-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		&.is-swiping {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		
		.card-logo {
			margin-right: 30rpx;

			.bank-logo-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			
			.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>
