<template>
	<view class="wb-page">
		<view class="wb-section">
			<view class="form-item">
				<text class="label">银行名称</text>
				<view class="picker-value" @click="showPicker = true">
					{{ blankName }}
					<text class="arrow">▼</text>
				</view>
			</view>
			<view class="form-item">
				<text class="label">开户行</text>
				<input class="wb-input" v-model="openingBank" placeholder="请输入开户行" />
			</view>
			<view class="form-item">
				<text class="label">银行卡号</text>
				<input class="wb-input" v-model="cardNum" type="number" placeholder="请输入银行卡号" />
			</view>
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="wb-input" v-model="name" placeholder="请输入您的姓名" />
			</view>
		</view>
		<view class="wb-btn primary" @click="submit">添加银行卡</view>

		<u-picker
			:show="showPicker"
			:columns="[banklist]"
			keyName="bankName"
			@cancel="showPicker = false"
			@confirm="onSelect"
		></u-picker>
	</view>
</template>

<script>
import { addBnak } from '@/api/index'

const MOCK_BANK_LIST = [
	{ id: '1', bankName: '中国工商银行' },
	{ id: '2', bankName: '中国农业银行' },
	{ id: '3', bankName: '中国银行' },
	{ id: '4', bankName: '中国建设银行' },
	{ id: '5', bankName: '交通银行' },
	{ id: '6', bankName: '招商银行' },
	{ id: '7', bankName: '中信银行' },
	{ id: '8', bankName: '光大银行' },
]

export default {
	data() {
		return {
			blankName: '请选择',
			openingBank: '',
			cardNum: '',
			name: '',
			showPicker: false,
			banklist: MOCK_BANK_LIST,
			bankId: '',
		}
	},
	methods: {
		onSelect(e) {
			this.bankId = e.value[0].id
			this.blankName = e.value[0].bankName
			this.showPicker = false
		},
		submit() {
			const bankCardRegex = /^[1-9]\d{15,18}$/
			if (!bankCardRegex.test(this.cardNum)) {
				uni.showToast({ title: '请输入正确的银行卡号', icon: 'none' })
				return
			}
			if (!this.bankId) {
				uni.showToast({ title: '请选择银行', icon: 'none' })
				return
			}
			if (!this.openingBank) {
				uni.showToast({ title: '请输入开户行', icon: 'none' })
				return
			}
			addBnak({
				bankCardNum: this.cardNum,
				bankId: this.bankId,
				openId: uni.getStorageSync('wx_copenid'),
				openingBank: this.openingBank,
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: '添加成功', icon: 'none' })
					setTimeout(() => uni.navigateBack(), 1000)
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
@import '../common/page.scss';

.form-item {
	margin-bottom: 24rpx;
}

.label {
	display: block;
	font-size: 26rpx;
	color: #666;
	margin-bottom: 12rpx;
}

.picker-value {
	height: 72rpx;
	line-height: 72rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.arrow {
	font-size: 20rpx;
	color: #999;
}
</style>
