<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==1" @click="seltype(item)">
					<view class="info flextwo">
						<view class="name">
							<image src="../../static/ticard.png" class="icon iconk"/> 提现到我的钱包
						</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="name">
							<image :src="item.image" mode="widthFix" class="icon"/> {{item.bank_name}}
						</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)
				
				})
			},
			// 选择银行卡信息
			seltype(item){
				console.log(item)
				uni.$emit('accountinfo',item);
				uni.navigateTo({
					url:'/pages/usercenter/cashOut'
				})
			},
			// 添加银行卡
			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()
		}
			
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.infok{
		
	}
	.box{     
		margin-top: 38rpx;
		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: 124rpx;
		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);
	}
	.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>