<template>
	<view class="wb-page">
		<view class="wb-section" v-if="cardList.length">
			<view
				class="card-item"
				v-for="(item, index) in cardList"
				:key="index"
				@click="goDetail(item)"
			>
				<view class="card-left">
					<view class="bank-name">{{ item.bankName }}</view>
					<view class="bank-num">**** **** **** {{ tailNum(item.bankCardNum) }}</view>
					<view class="bank-branch">{{ item.openingBank || '' }}</view>
				</view>
				<text class="arrow">&gt;</text>
			</view>
		</view>
		<view class="wb-empty" v-else>暂无银行卡</view>

		<view class="wb-footer-bar">
			<view class="wb-btn primary" @click="goAdd">添加新卡</view>
		</view>
		<u-gap height="120"></u-gap>
	</view>
</template>

<script>
import { myBank } from '@/api/index'

export default {
	data() {
		return {
			cardList: [],
		}
	},
	onShow() {
		this.loadList()
	},
	methods: {
		loadList() {
			myBank().then(res => {
				if (res.data.code == 200 && Array.isArray(res.data.data)) {
					this.cardList = res.data.data
				}
			})
		},
		tailNum(num) {
			return num ? String(num).slice(-4) : '****'
		},
		goDetail(item) {
			const str = uni.$u.queryParams({
				id: item.id,
				bankName: item.bankName,
				bankCardNum: item.bankCardNum,
				openingBank: item.openingBank || '',
			})
			uni.navigateTo({ url: `/workbench/bank/detail${str}` })
		},
		goAdd() {
			uni.navigateTo({ url: '/workbench/bank/add' })
		},
	},
}
</script>

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

.card-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}

.bank-name {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.bank-num {
	font-size: 28rpx;
	color: #666;
	margin: 12rpx 0;
}

.bank-branch {
	font-size: 24rpx;
	color: #999;
}

.arrow {
	color: #999;
	font-size: 28rpx;
}
</style>
