<template>
	<!-- 添加银行卡 -->
	<view class="shop_login" :style="'height:'+body_height+'px'">
		<view class="shop_tit" >添加银行卡</view>
		<view class="s_login"> 
			<picker @change="bindPickerChange" :value="index" :range="isselectcard" range-key="bank_name" >
				<view class="biao_01 ali-c">
					<view class="biao_01_l">开户行：</view>
					<view class="biao_01_r">
						<input class="uni-input" disabled="disabled" v-model="isselectcard[index].bank_name" placeholder="请输入" />
					</view>
				</view>
			</picker>
			<view class="biao_01 ali-c">
				<view class="biao_01_l">姓名：</view>
				<view class="biao_01_r">
					<input class="uni-input" v-model="realname" placeholder="请输入" />
				</view>
			</view>
			<view class="biao_01 ali-c">
				<view class="biao_01_l" style="white-space:nowrap;">银行卡号：</view>
				<view class="biao_01_r">
					<input class="uni-input" v-model="cardno" placeholder="请输入" />
				</view>
			</view>
			<view class="biao_01 ali-c">
				<view class="biao_01_l">开户支行：</view>
				<view class="biao_01_r">
					<input class="uni-input" v-model="branch" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="btn" @click="tijiao" >提交</view>
		
	</view>
</template>

<script>
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
	import {addBank,bankinfoList} from "@/utils/api/api.js";
	export default {
		data() {
			return {
				id:'',
				edit:true,
				body_height: 640,
				from:{username:'',bank_num:'',bank_name:''},
				index:0,
				isselectcard:[
					{bank_name:""}
				],//可选列表
				realname:"",//姓名
				cardno:"",//银行卡号
				branch:"",//支行
			};
		},
		onLoad(option) {  
			
			
			
		},
		onShow() {
			this.getbankinfoList();//获取可选列表
		},
		components: {
			uniIcon
		},
		methods:{
			//获取可选的银行卡列表
			async getbankinfoList(){
				let res = await bankinfoList({
					
				});
				if(res.code==0){
					this.isselectcard = res.data;
				}else{
					this.$api.msg(res.msg)
				}
			},
			//添加银行卡
			async tijiao(){ 
				let res = await addBank({
					bank_id:this.isselectcard[this.index].id,//银行卡类型 id
					realname:this.realname,//持卡人姓名
					cardno:this.cardno,//银行卡号
					branch:this.branch,//开户支行
				});
				if(res.code==0){
					this.$api.msg(res.msg);
					setTimeout(()=>{
						uni.navigateBack({
						})
					},1000)
				}else{
					this.$api.msg(res.msg)
				}
					
			},
			//银行卡选中后
			bindPickerChange(e){
				this.index = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.shop_login {
		
		padding-bottom: 1px;

		.shop_tit {
			background:  $base_color;
			font-size: 22px;
			color: #fff;
			padding: 20px 20px;
		}
		.uni-input{background-color: #fff;padding-top: 5px;
			height: 88upx;
			line-height: 88upx;
		}
		.s_login {
			margin: 0 10px;
			border-radius: 5px; 
			padding:40px 10px;
			background-color: #fff;
		}

		.l_01 {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #FBFBFB;
			height: 40px;
			line-height: 40px;
		}

		.l_02 {
			border-bottom: 1px solid #FBFBFB;
			height: 40px;
			line-height: 40px;
			color: #C2C2C2;
		} 

		.biao_01 {
			padding: 10px 10px 10px;
			border-bottom: 1px solid #EDEDED;
			line-height: 30px;
			display: flex;
		}

		.biao_01_l {
			width: 30%;
			text-align: right;
			padding-right:15upx;
		}
		.btn{background-color: #ff6900;color: #fff;margin: 10px 20px;height: 40px;line-height: 40px;text-align: center;
			border-radius: 20px;position: fixed;left: 0;bottom: 20px;z-index: 99;width: 90%;
		}
		.add_btn{
			position: fixed;left: 0;bottom: 20px;z-index: 99;width: 90%;margin: 10px 20px;height: 40px;line-height: 40px;
			display: flex;justify-content: space-between;
			.add_btn_l{width: 47%;background-color: #DBD6D6;text-align: center;border-radius: 20px;}
			.add_btn_r{width: 47%;background-color: #DE411C;color: #fff;text-align: center;border-radius: 20px;}
		}

	}
</style>
