<template>
	<view class="idCard">
		<van-cell-group>
			<van-field :value="idCard" label="身份证" maxlength='18' placeholder="请输入身份证号"/>
			<van-field :value="password" type="password" label="密码" placeholder="请输入密码" />
			<van-cell title="归属驾校地区" :value="area" @click='popup=!popup' />
		</van-cell-group>
		<van-button round type="info">提交绑定信息</van-button>
		<van-popup :show="popup" position="bottom">
			<van-area :columns-placeholder="['请选择', '请选择']" value="35" @cancel='popup=!popup' @confirm='popup=!popup' :area-list="areaList" @change='regionSelection'
			 columns-num='2' />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popup: false,
				idCard: null,
				password: null,
				areaCode: null,
				area: "请点击选择地区",
				areaList: {
					province_list: {
						35: '福建省',
					},
					city_list: {
						3501: '福州市',
						3502: '厦门市',
						3503: '莆田市',
						3504: '三明市',
						3505: '泉州市',
						3506: '漳州市',
						3507: '南平市',
						3508: '龙岩市',
						3509: '宁德市',
					}
				}
			}
		},
		methods: {
			regionSelection(e) {
				console.log(e)
				this.area = `${e.detail.values[0].name}  ${e.detail.values[1].name}`
				this.areaCode = e.detail.values[1].code
			}
		}
	}
</script>

<style lang="scss">
	.idCard {
		width: 600rpx;
		height: 100vh;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.btn-box{
		display: flex;
		justify-content: space-between;
	}
</style>
