<template>
	<view>
		<u-navbar :title="tit" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
			back-icon-color="#fff" height='50'></u-navbar>
		<view class="cont">

			<view class="tip">注意：绑定非一类卡，会因转账额度受限导致转账失败 </view>
			<view class="input_box">
				<view class="text">持卡人姓名</view>
				<view class="ipt">
					<u-input v-model="name" placeholder='请输入持卡人姓名' placeholder-style='font-size: 24rpx;' />
				</view>

			</view>
			<view class="input_box">
				<view class="text">身份证号码</view>
				<view class="ipt">
					<u-input v-model="idnum" placeholder='请输入身份证号码' placeholder-style='font-size: 24rpx;' />
				</view>

			</view>
			<view class="input_box">
				<view class="text" style="margin-right: 126rpx;">银行卡号</view>
				<view class="ipt">
					<u-input v-model="cardnum" placeholder='请输入银行卡号' placeholder-style='font-size: 24rpx;' />
				</view>

			</view>

			<view class="input_box">
				<view class="text" style="margin-right: 150rpx;">手机号</view>
				<view class="ipt" style="width: 240rpx;">
					<u-input v-model="tel" placeholder='请输入手机号' placeholder-style='font-size: 20rpx;color: red;' />
				</view>
				<!-- <view class="yzmbtn">
						获取验证码
					</view> -->
			</view>
			<view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view>
			<view v-if="flag" class="btn" @click="band()">
				确认
			</view>
			<view v-else class="btn" @click="banedit()">
				修改
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnmsk:false,
				bgc: {
					backgroundColor: "#8883F0",
				},
				name: '',
				idnum: '',
				cardnum: '',
				status: false,
				tit: '银行卡收款',
				stause: false,
				accountId: '',
				tel: '',
				imglist:{},
				flag:true
			}
		},
		onLoad(option) {
			if (option.accountId) {
				this.accountId = option.accountId
				this.getcha()
			}

		},
		methods: {
			tobd() {
				uni.navigateTo({
					url: ''
				})
			},
			banedit(){
				this.btnmsk = true
				let data = {
					accountId:this.accountId,
					accountType:1,
					name: this.name,
					idCard: this.idnum,
					accountNo: this.cardnum,
					mobile: this.tel
				}
				this.$u.put("/app/account",data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
						  title: res.msg,
						  icon: 'success',
						  duration: 1000
						})
						setTimeout(()=>{
							this.btnmsk = false
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
						  title: res.msg,
						  icon: 'none',
						  duration: 2000
						})
						this.btnmsk = false
					}
				})
			},

			band() {
				this.btnmsk = true
				let data = {
					accountType: 1,
					name: this.name,
					idCard: this.idnum,
					accountNo: this.cardnum,
					mobile: this.tel
				}
				this.$u.post('/app/account', data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							this.btnmsk = false
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						this.btnmsk = false
					}
				})
			},
			getcha() {
				this.$u.get(`/app/account/${this.accountId}`).then((res) => {
					if (res.code == 200) {
						// this.imglist = res.data.accountNo
						this.name = res.data.name
						this.idnum = res.data.idCard
						this.cardnum = res.data.accountNo
						this.tel = res.data.mobile
						if(res.data.accountNo){
							this.flag = false
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}

	page {
		background: #F7FAFE;
	}

	.cont {
		display: flex;
		// justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 594rpx;

		.tip {
			margin-top: 62rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF8D1A;
			line-height: 36rpx;
		}

		.input_box {
			margin-top: 66rpx;
			width: 594rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			.text {
				margin-right: 102rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #262B37;
			}

			.ipt {
				width: 360rpx;

				.u-input::placeholder {
					font-size: 20px;
					color: red;
				}
			}

			.yzmbtn {
				margin-left: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 50rpx;
				background: #8EA9E4;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 218rpx;
			width: 590rpx;
			height: 84rpx;
			background: #8883F0;
			border-radius: 40rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;

		}
	}
</style>