<template>
	<view class="p-30">
		<view class="c-menu p-r-20">
			<u--form labelPosition="left" labelWidth="100" ref="uForm">
				<u-form-item borderBottom label="收款户名">
					<u--input border="none" placeholder="请输入(必填)" v-model="form.bankCardAccountName"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="银行名称">
					<picker @change="bindPickerChange" :value="chooseBank" :range="bankList">
						<view style="color: #303133;">{{ chooseBank === null ? '请选择银行' : bankList[chooseBank] }}</view>
					</picker>
				</u-form-item>
				<u-form-item borderBottom label="支行所在地">
					<!-- <u--input border="none" placeholder="请选择" v-model="form.bankCardArea"></u--input> -->
					<view style="color: #303133;" @click="visible = true">
						{{ !form.bankCardArea ? '请选择支行所在地' : form.bankCardArea }}</view>
				</u-form-item>
				<u-form-item borderBottom label="支行名称">
					<u--input border="none" placeholder="请输入(必填)" v-model="form.bankCardSubBranchName"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="银行卡号">
					<u--input border="none" placeholder="请输入(必填)" v-model="form.bankCardNumber"></u--input>
				</u-form-item>
				<u-form-item borderBottom label="确认卡号">
					<u--input border="none" placeholder="请输入(必填)" v-model="form.reBankCardNumber"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view style="padding: 50rpx 30upx;position: fixed;left: 0;bottom: 0;width: 100%;box-sizing: border-box;">
			<u-button shape="circle" type="primary" @click="submit">提交</u-button>
		</view>

		<cityPicker column="3" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
			@cancel="cancel" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				form: {
					bankCardAccountName: '',
					bankCardArea: '',
					bankCardNumber: '',
					reBankCardNumber: '',
					bankCardSubBranchName: '',
					bankCardType: ''
				},
				bankList: [
					'农业银行',
					'建设银行',
					'工商银行',
					'交通银行',
					'中国银行'
				],
				chooseBank: null,
				visible: false,
				maskCloseAble: true,
				defaultValue: '110101',
			}
		},
		methods: {
			confirm(val) {
				console.log(val);
				this.form.bankCardArea = val.name
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			bindPickerChange(e) {
				this.chooseBank = parseInt(e.detail.value)
			},
			submit() {
				if(!this.form.bankCardAccountName) return uni.$u.toast('请输入您的收款账户')
				if(!this.form.bankCardType) return uni.$u.toast('请选择银行')
				if(!this.form.bankCardArea) return uni.$u.toast('请选择支行所在地区')
				if(!this.form.bankCardSubBranchName) return uni.$u.toast('请输入支行名称')
				if(!this.form.bankCardNumber) return uni.$u.toast('请输入银行卡号')
				if(!this.form.reBankCardNumber) return uni.$u.toast('请再次输入银行卡号')
			}
		}
	}
</script>

<style>

</style>