<template>
	<view class="page">
		<view class="box">
			<view :class="item.type==3?'item':'itemk'" v-for="(item,index) in accountlist" :key="index">
				<view v-if="item.type!=3" >
					<view class="info infok flextwo" @click="seltype(item)">
						<view class="name" >
							<image src="../../static/ticard.png" class="icon iconk" /> 提现到我的钱包
						</view>

						<image src="../../static/del.png" mode="widthFix" class="right" @click.stop="delaccount(item)"></image>
					</view>
					<view class="btnBox" @click="editcard(item)">
						<view class="edit">编辑</view>
						<image src="../../static/right.png" mode="widthFix" class="right"></image>
					</view>

				</view>
				<view class='bankitem' v-if="item.type==3">
					<view class="info" @click="seltype(item)">
						<view class="flextwo" style="width:100%" @click.stop="delaccount(item)">
							<view class="name">
								<image :src="item.image" mode="widthFix" class="icon" /> {{item.bank_name}}
							</view>
							<image src="../../static/del.png" mode="widthFix" class="right"></image>
						</view>
						
						<view class="num">
							<view class="numItem">
								<view class="dian" />
								<view class="dian" />
								<view class="dian" />
								<view class="dian" />
							</view>
							<view class="numItem">
								<view class="dian" />
								<view class="dian" />
								<view class="dian" />
								<view class="dian" />
							</view>
							<view class="numItem">
								<vieitemw class="dian" />
								<view class="dian" />
								<view class="dian" />
								<view class="dian" />
							</view>
							<view class="numItem">{{item.card_number}}</view>
						</view>
					</view>
					<view class="btnBox" @click="editcard(item)">
						<view class="edit">编辑</view>
						<image src="../../static/right.png" mode="widthFix" class="right"></image>
					</view>
				</view>

			</view>

		</view>
		<view class="add" @click='addcart'>
			<view class="addcount">添加银行卡</view>
		</view>

	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				page: 1,
				pageNum: 10,
				accountlist: []
			}
		},
		onLoad() {

		},
		methods: {
			//获取账户信息
			getaccount() {
				let that = this;
				var url = 'bank/get_list';
				var params = {
					page: that.page,
					pageNum: 10
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.accountlist = that.accountlist.concat(res.data.data);
					that.accountlist.forEach(function(value, index, array) {
						value.card_number = value.card_number.substr(-4)
					})
					that.accountlist = that.accountlist;

				}).catch((err) => {
					console.log(err)

				})
			},
			
			// 删除银行卡
			delaccount(item){
				 let that = this;
				uni.showModal({
					 title: '提示',
					    content: '是否删除账户',
					    success: function (res) {
					        if (res.confirm) {
					           
					            var url = 'bank/delete';
					            var params = {
					            	bank_id:item.id
					            }
					            console.log('7766554', params)
					            app.post(url, params).then((res) => {
					            	uni.showToast({
					            		title:"删除账户成功",
										icon:'none'
					            	})
									setTimeout(function(){
										that.accountlist=[];
										that.getaccount()
									},1500)
					            
					            }).catch((err) => {
					            	console.log(err)
					            
					            })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				})
			},
			// 选择银行卡信息
			seltype(item) {
				console.log(item)
				uni.$emit('accountinfo', item)

				uni.navigateBack({
					checked: true
				})
			},
			// 添加银行卡
			addcart() {
				uni.navigateTo({
					url: '/pages/usercenter/addCard'
				})
			},
			// 编辑银行卡
			editcard(item) {
				let newitem = JSON.stringify(item);
				uni.navigateTo({
					url: '/pages/usercenter/addCard?item=' + newitem + '&type=' + 1
				})
			}

		},
		onShow() {
			this.page = 1;
			this.accountlist = []
			this.getaccount()
		},
		onReachBottom() {
			let newpage=this.page;
			newpage++;
			this.page=newpage;
			this.getaccount()
		}

	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.box {
		margin-top: 18rpx;
		padding: 32rpx;
		box-sizing: border-box;
		padding-bottom: 140rpx;
		;
	}

	.item {
		width: 100%;
		height: 244rpx;
		background: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
	}

	.itemk {
		width: 100%;
		height: 184rpx;
		background: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}
	.infok{
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
		/* line-height:44rpx; */
		display: flex;
		align-items: center;
	}

	.icon {
		width: 36rpx;

		margin-right: 8rpx;
	}

	.iconk {
		width: 36rpx;
		height: 36rpx;

	}

	.num {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.numItem {
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFangHK-Medium, PingFangHK;
		font-weight: 500;
		color: rgba(194, 148, 69, 1);
		line-height: 58rpx;
	}

	.numItem:last-child {
		margin-right: 0;
	}

	.dian {
		width: 18rpx;
		height: 18rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 10rpx;
		margin-right: 12rpx;

	}

	.numItem .dian:last-child {
		margin-right: 0;
	}

	.btnBox {
		height: 86rpx;
		border-top: 1px solid #EAEAEA;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.edit {
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.right {
		width: 32rpx;
	}
</style>