<template>
	<!-- 银行卡管理 -->
	<view class="bankcard">
		
		<view @touchstart="gotouchstart(index,item)" @touchmove="gotouchmove" @touchend="gotouchend" @tap="childcard(item)"  :style="{backgroundImage: 'url('+joinurl+'images/bank/'+item.bank_code.toLowerCase()+'.png)'}" class="card" v-for="(item,index) in cardList" :key="item.id">
			<view class="card_l">
				<!-- <img :src="require('@/imgs/icbc2.png')" /> -->
			</view>
			<view class="card_r">
				<view class="card_r_1">{{item.bank_name}}</view>
				<view class="card_r_2">{{item.realname}}</view>
				<view class="card_r_3">尾号{{item.cardno.slice(-4)}}</view>
			</view>
		</view>
		
		<empty v-if="cardList.length==0" ref="empty"></empty>
		
		
		
		
		<navigator url="/pages/user/fenxiao/addcard/addcard"><view class="btn">添加银行卡</view></navigator>
	</view>
</template>

<script>
	import {bankList,deleteBank} from "@/utils/api/api.js";
	import empty from "@/components/empty/empty.vue"
	let timeOutEvent=0;//定时器  
	export default {
		components:{
			empty
		},
		data() {
			return {
				cardList:[],
			};
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			joinurl(){
				return this.$store.state.joinurl;
			}
		},
		onLoad(opdata) {
			if(opdata.issel==1){
				//选择银行卡
				this.issel = 1;
				uni.setNavigationBarTitle({
					title:"选择银行卡"
				})
			}
		},
		onShow() {
			this.getbankList();
		},
		methods:{
			childcard(item){
				//选择银行卡回调
				if(this.issel==1){
					
					uni.setStorageSync('selcard', item);//存
					uni.navigateBack({//返回上一页
						delta: 1
					});
				}
			},
			//获取银行卡列表
			async getbankList(){
				let res = await bankList({
					
				});
				if(res.code==0){
					this.cardList = res.data;
				}else{
					this.$api.msg(res.msg);
				}
			},
			//处理长按事件
			gotouchstart(index,item){
			   let that = this;
			   clearTimeout(timeOutEvent);//清除定时器
			   timeOutEvent = 0;
			   timeOutEvent = setTimeout(()=>{
			        //执行长按要执行的内容，
					console.log("长按的事件处理");
					
					uni.showModal({
					    title: '提示',
					    content: '确定解绑尾号为'+item.cardno.slice(-4)+'的银行卡吗?',
					    success:  (res)=> {
					        if (res.confirm) {
					            //console.log('用户点击确定');
								this.deleteBankfun(index,item);
								
					        } else if (res.cancel) {
					            //console.log('用户点击取消');
					        }
					    }
					});
					
					
			     },600);//这里设置定时
			 },
			 //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
			 gotouchend(){
			     clearTimeout(timeOutEvent);
			       if(timeOutEvent!=0){
			         //这里写要执行的内容（尤如onclick事件）
			      }
			 },
			 //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
			 gotouchmove(){
			      clearTimeout(timeOutEvent);//清除定时器
			      timeOutEvent = 0;
			 },
			//删除 解绑 银行卡
			async deleteBankfun(index,item){
				let res = await deleteBank({
					bankid:item.bank_id,//会员银行卡记录id
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					this.cardList.splice(index,1);//本地删除
				}else{
					this.$api.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
.bankcard{
	.card{background-color: #45AAF0;margin: 40upx 40upx 60upx;border-radius: 20upx;padding: 40upx 20upx;color: #fff;display: flex;
	box-shadow: 0px 10upx 20upx #A5CBEA;}
	.card_l{width: 30%;text-align: center;}
	.card_l img{width: 90upx;height: 90upx;}
	.card_r{
		width: 80%;
		.card_r_1{font-size: 32upx;padding-bottom: 20upx;}
		.card_r_2{font-size: 28upx;padding-bottom: 40upx;}
		.card_r_3{font-size: 28upx;}
	}
	.card_two{background-color: #FF5661;margin: 40upx;border-radius: 20upx;padding: 40upx 20upx;color: #fff;display: flex;
	box-shadow: 0px 10upx 20upx #F0B7B9;}
	.btn{background-color: $base_color;color: #fff;margin: 20upx 40upx;height: 80upx;line-height: 80upx;text-align: center;
	border-radius: 40upx;position: fixed;left: 0;bottom: 40upx;z-index: 99;width: 90%;}
}
</style>
