<template>
	<view class="bankCard">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="p30">
				<view class="bankCard_add" @click="addBank">
					<u-icon name="plus" color="#333" size="28"></u-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 style="font-size: 28rpx; display: flex; align-items: center">
							<view>
								<u-tag :text="item.type == 1 ? '个人' : '企业'" size="mini" :type="item.type == 1 ? 'success' : 'error'" plain plainFill></u-tag>
							</view>
							<view style="width: 30rpx"></view>
							<view style="font-size: 26rpx">{{ item.name }}</view>
							<view style="width: 30rpx"></view>
							<view style="font-size: 26rpx">{{ item.phone || '' }}</view>
						</view>
						<view style="height: 20rpx"></view>
						<view style="color: #232323">
							<view style="font-size: 28rpx" v-if="item.type == 2">开户行：{{ item.subbranchName }}</view>
							<view style="height: 10rpx"></view>
							<view style="font-size: 28rpx">银行卡号：{{ item.bankCard }}</view>
							<view style="height: 10rpx"></view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import { getUsersAccountInfo } from '@/api/api';
export default {
	data() {
		return {
			dataList: []
		};
	},
	onShow() {},
	onLoad(options) {
		if (options.type) {
			this.type = options.type;
		}
	},
	methods: {
		addBank() {
			uni.showActionSheet({
				itemList: ['个人', '企业'],
				success: (res) => {
					if (res.tapIndex + 1 == 0) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					} else {
						uni.navigateTo({
							url: `/pages/users/bank/addBankCard?type=${res.tapIndex + 1}`
						});
					}
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		bankSele(e) {
			if (this.type) {
				uni.$emit('bank', e);
				uni.navigateBack();
			}
		},
		queryList(pageNo, pageSize) {
			const params = {
				current: pageNo,
				pageSize: pageSize
			};
			getUsersAccountInfo(params)
				.then(({ data }) => {
					this.$refs.paging.complete(data);
				})
				.catch((res) => {
					this.$refs.paging.complete(false);
				});
		}
	}
};
</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>
