<template>
	<view class="main">
		<view class="top flex flex-center flex-column">
			<text class="font46 title">绑定银行卡</text>
			<!-- <text class="font32">请绑定姓名本人的支付宝账号</text> -->
		</view>
		<view class="form">
			<view class="form-item flex flex-align-center">
				<text class="label font32">户名：</text>
				<input type="text" placeholder="户名" :disabled="isView" v-model="paymentInfo.name">
			</view>
			<view class="form-item flex flex-align-center">
				<text class="label font32">手机号：</text>
				<input type="number" :maxlength="11" placeholder="手机号" :disabled="isView" v-model="paymentInfo.phone">
			</view>
			<view class="form-item flex flex-align-center">
				<text class="label font32">身份证号：</text>
				<input type="text" :maxlength="20" placeholder="持卡人身份证号" :disabled="isView" class="flex-grow" v-model="paymentInfo.idNumber">
			</view>
			<view class="form-item flex flex-align-center">
				<text class="label font32">银行卡号：</text>
				<input type="number" :maxlength="25" placeholder="银行卡号" :disabled="isView" class="flex-grow" v-model="paymentInfo.account">
			</view>
			<view class="form-item flex flex-align-center flex-space-between" @click="goPage">
				<view class="flex flex-align-center" >
					<text class="label font32">所属银行：</text>
					<view :style="{color: bankName ?'#000':'gray'}">
						{{bankName || '请选择所属银行'}}
					</view>
				</view>
				<u-icon name="arrow-right" color="grey" size="32rpx"></u-icon>
			</view>
			<view class="form-item flex flex-align-center">
				<text class="label font32">所属支行：</text>
				<input type="text" :maxlength="40" placeholder="所属支行" :disabled="isView" class="flex-grow" v-model="branch">
			</view>
			<!-- <view class="form-item flex flex-align-center">
				<text class="label font32">预留号码：</text>
				<input type="number" placeholder="预留号码" :disabled="isView" :maxlength="11" v-model="paymentInfo.phone">
			</view>
			<view class="form-item flex flex-align-center" v-if="!isView">
				<text class="label font32">登录密码：</text>
				<input type="password" placeholder="登录密码" v-model="password">
			</view> -->
		</view>
		<button type="primary" class="bg-base" v-if="!isView" :loading="loading" :disabled="loading" @tap="onSave()">确定</button>
	</view>
</template>

<script>
	import mix from "./mix.js";
	import { regIdCard, regPhone, regBank,regIdCardTaiWan,regIdCardAoMen,regIdCardHongKong } from '@/utils/regular.js';
	export default {
		mixins: [mix],
		data(){
			return {
				branch: "",
				bankName: ""
			}
		},
		onShow() {
			this.bankName = uni.getStorageSync('shopBank') || '';
			uni.removeStorageSync('shopBank')
		},
		methods: {
			goPage () {
				uni.navigateTo({
					url: '/pages/user/bankList?enterType=shop'
				})
			},
			onSave(){
				if (!this.paymentInfo.name) return this.$msg("请输入持卡人姓名")
				if (this.paymentInfo.idNumber) {
						if (regIdCard.test(this.paymentInfo.idNumber) || regIdCardTaiWan.test(this.paymentInfo.idNumber) || regIdCardAoMen.test(this.paymentInfo.idNumber) || regIdCardHongKong.test(this.paymentInfo.idNumber)) {
							console.log("验证通过")
						}else{
							return this.$msg("请输入正确的身份证号")
						}
				}
				if (this.paymentInfo.phone) {
					if (this.paymentInfo.phone.length != 11) return this.$msg("请输入正确的手机号")
				}
				if (!this.paymentInfo.account) return this.$msg("请输入银行卡号")
				if(!regBank.test(this.paymentInfo.account)) return this.$msg("请输入正确的银行卡号")
				if (!this.bankName) return this.$msg("请输入所属银行")
				if (!this.branch) return this.$msg("请输入所属支行")
				// if (!this.paymentInfo.phone) return this.$msg("请输入银行预留号码")
				this.onSubmit()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.main{
		padding: 30rpx 50rpx;
		.top{
			margin-top: 40rpx;
			.title{
				margin-bottom: 20rpx;
			}
		}
		.form{
			margin-top: 100rpx;
			&-item{
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #eee;
				margin-bottom: 50rpx;
				.label{
					width: 170rpx;
				}
			}
		}
	}
</style>
