<template>
	<view class="bankCard">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="p30">
				<view class="bankCard_add" @click="addBank">
					<up-icon name="plus" color="#333" size="28"></up-icon>
					<view style="font-size: 26rpx; color: #333; margin-top: 15rpx">添加银行卡</view>
				</view>
			</view>
			<view style="height: 30rpx"></view>
			<view v-for="(item, index) in dataList" :key="index" @click="bankSele(item)">
				<view class="p30">
					<view style="background-color: #ffffff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 20rpx">
						<view class="u-flex u-flex-y-center" style="font-size: 28rpx">
							<view>
								<u-tag :text="item.role == 1 ? '个人' : '企业'" size="mini" :type="item.role == 1 ? 'success' : 'error'" plain plainFill></u-tag>
							</view>
							<view style="width: 30rpx"></view>
							<view style="font-size: 26rpx">{{ item.realname }}</view>
							<view style="width: 30rpx"></view>
							<view style="font-size: 26rpx">{{ item.mobile || '' }}</view>
						</view>
						<view style="height: 20rpx"></view>
						<view style="color: #232323">
							<!-- 							<view style="font-size: 28rpx">开户行：{{ item.bankName }}</view>
							<view style="height: 10rpx"></view> -->
							<view style="font-size: 28rpx" v-if="item.role == 2">开户行：{{ item.subname }}</view>
							<view style="height: 10rpx"></view>
							<view style="font-size: 28rpx">银行卡号：{{ item.num }}</view>
							<view style="height: 10rpx"></view>
							<!-- 							<view style="font-size: 28rpx" v-if="item.type == 2 && item.taxNo">纳税人识别号：{{ item.taxNo}}</view>
							<view style="height: 10rpx"></view> -->
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getUsersAccountInfo } from '@/api/api.js';
import { onShow, onLoad } from '@dcloudio/uni-app';

const paging = ref(null);
let dataList = ref([]);
let numiNDE = ref(1);
let role = ref('');
const type = ref("");

onShow(() => {
	if (numiNDE.value != 1) {
		paging.value.reload();
	}
	numiNDE.value++;
});

onLoad((options) => {
	type.value = options.type;
});

let addBank = () => {
	uni.showActionSheet({
		itemList: ['个人', '企业'],
		success: (res) => {
			if(res.tapIndex + 1 == 0){
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			}else{
				uni.navigateTo({
					url: `/pages/bank/addBankCard?role=${res.tapIndex + 1}`
				});
			}
		},
		fail: function (res) {
			console.log(res.errMsg);
		}
	});
};

const queryList = (pageNo, pageSize) => {
	const params = {
		current: pageNo,
		pageSize: pageSize
	};
	getUsersAccountInfo(params)
		.then((res) => {
			paging.value.complete(res);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

function maskCardNumber(cardNumber) {
	if (!cardNumber || typeof cardNumber !== 'string') {
		throw new Error('Invalid card number');
	}
	const sanitizedNumber = cardNumber.replace(/\D/g, '');
	if (sanitizedNumber.length < 4) {
		throw new Error('Card number is too short');
	}
	const lastFourDigits = sanitizedNumber.slice(-4);
	const maskedNumber = '*'.repeat(sanitizedNumber.length - 4) + lastFourDigits;
	return maskedNumber;
}

let bankSele = (e) => {
	if (type.value) {
		uni.$emit('bank', e);
		uni.navigateBack();
	}
};
</script>

<style scoped lang="scss">
.bankCard {
	&_add {
		width: 690rpx;
		height: 174rpx;
		background: #eeeeee;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		@include flex($direction: column, $space: center);
		margin-top: 30rpx;
	}
}
</style>
