<template>
	<view class="container">
	
		<view class='addAddress'>
			<!-- <view class="pad30">
				<view class='default acea-row row-middle borderRadius15'>
					<input v-model="addressValue" type="text" placeholder="粘贴地址信息，自动拆分姓名、电话和地址" 
					placeholder-class='placeholder' style="width:100%;" 
					@blur="identify()">
				</view>
			</view> -->
			<view class="pad30 mt-22">
				<view class='list borderRadius15'>
					<uni-forms ref="form"  label-position="left"  :modelValue="userAddress">
						<uni-forms-item  label="姓名"  name="real_name" class='item acea-row row-between-wrapper'>
							
							<input type='text' placeholder='请输入姓名' name='real_name' :value="userAddress.real_name"
								placeholder-class='placeholder' class="width100"></input>
						</uni-forms-item>
						
						<uni-forms-item label="联系电话" name="phone" class='item acea-row row-between-wrapper'>
							
							<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
								placeholder-class='placeholder' pattern="\d*"></input>
						</uni-forms-item>
						
						<uni-forms-item label="所在地区"  name="region" class='item acea-row row-between-wrapper'>
							
							<view class="address acea-row row-between height100" @click="chooseAddress">
								<input type='text' placeholder='请选择地址' :disabled="true" name='region' placeholder-class='placeholder'
									v-model='userAddress.region' class="detail"></input>
									<view class="icon-ymt to-right font14 fcor666">
										
									</view>
							</view>
							
						</uni-forms-item>	
						
						<uni-forms-item label="详细地址" name="detail" class='item acea-row row-between-wrapper'>
							
							
								<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
									v-model='userAddress.detail' class="detail"></input>
							
						</uni-forms-item>		
					</uni-forms>
				</view>
			</view>
			<button class='keepBnt bg-color' @click="formSubmit">立即保存</button>
		</view>
			
		
		
		<AddressPicker ref="AddressPicker" @getAddress="getAddress"></AddressPicker>
	</view>
</template>
<script>
	import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue'
	import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue'
	
	import AddressPicker from '@/pages/address/addNewAddress/addressPicker.vue'
	let dataList = require('./address.json')
	export default {
		data() {
			return {
				userAddress: {
					real_name:"",
					phone:"",
					region:"",
					detail:"",
				}, //地址详情
				addressValue:"",
				addressId:null,
				/* rulesObject:{
					real_name:{
						rules:[
								// 校验 name 不能为空
								{
									required: true,
									errorMessage: '请填写姓名',
								},
								// 对name字段进行长度验证
								{
									minLength: 2,
									maxLength: 5,
									errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
								}
							],
					},
					phone:{
						rules:[
								{
									required: true,
									errorMessage: '请输入手机号',
								},
								{
									validateFunction: function(rule, value, data, callback) {
										let iphoneReg = /^1[0-9]{10}$/
										if (!iphoneReg.test(value)) {
											callback('手机号码格式不正确，请重新填写')
										}
										return true
									}
								}
								
							],
					},
					region:{
						rules:[
								{
									required: true,
									errorMessage: '请选择地址',
								},
								
							],
					},
					detail:{
						rules:[
								{
									required: true,
									errorMessage: '请填写详细地址',
								},
								{
									minLength: 5,
									
									errorMessage: '{label}长度不能少于{minLength}个字符',
								}
								
						],
					},
					
				}
				*/
			
			}
		},
		components:{
			AddressPicker,
			"uni-forms":uniForms,
			"uni-forms-item":uniFormsItem
			// uniForms,
			// uniFormsItem
		},
		onReady() {
				// 需要在onReady中设置规则
			// this.$refs.form.setRules(this.rulesObject)
			
			// if(this.addressId){
			// 	uni.setNavigationBarTitle({
			// 		title: '编辑地址'
			// 	});
			// }
		},
		onLoad(options){
			
			if(options.id){
				this.addressId = options.id
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				
			}
			
			
			
		},
		
		methods: {
			identify(){
				const options = {
				  type: 0, // 哪种方式解析，0：正则，1：树查找
				  textFilter: [], // 预清洗的字段
				  nameMaxLength: 4, // 查找最大的中文名字长度
				}
				// type参数0表示使用正则解析，1表示采用树查找, textFilter地址预清洗过滤字段。
				// if(!!this.addressValue){
				// 	const parseResult = AddressParse(this.addressValue, options)
				// 	// console.log(parseResult);
				// 	this.userAddress.real_name = parseResult.name;
				// 	this.userAddress.phone = parseResult.phone;
				// 	this.userAddress.detail = parseResult.detail;
				// 	this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area;
				// }
			},
			
			formSubmit(form) {
				
				// 暂时不起作用
				
					// this.$refs.form.validate().then(res => {
					// 	console.log('success', res);
					// 	uni.showToast({
					// 		title: `校验通过`
					// 	})
					// }).catch(err => {
					// 	console.log('err', err);
					// })
				
				let _this = this;
				
				this.$refs.form.validate().then(res=>{
					console.log(_this.userAddress,res)
				})
				
			},
			chooseAddress(){	
				this.$refs.AddressPicker.show()
			},
			getAddress(address){
				console.log(address,"address")
				this.userAddress.region=address
			}
			
			
		},
	}
</script>
<style lang="scss" scoped>
	.container{
		background-color: #f5f5f5;
		height: 100vh;
		box-sizing: border-box;
		padding-top:30rpx;
	}
	
	/deep/ .uni-forms-item__label .label-text{
		font-size: 30rpx !important;
	}
	
	/deep/ .uni-forms-item{
		width: 100% !important;
	}
	
	.pad30 {
		padding: 0 30rpx
	}
	
	
	
	.acea-row {
		display: flex;
		align-items: center;
	}
	.row-middle {
		align-items: center
	}
	.row-between-wrapper {
		align-items: center;
		justify-content: space-between
	}
	.borderRadius15 {
		border-radius: 15rpx !important;
	}
	
	.addAddress .list {
		background-color: #fff;
	}
	
	.addAddress .list .item {
		padding: 30rpx ;
		padding-bottom: 0;
		border-top: 1rpx solid #eee;
		position: relative;
	}
	
	.addAddress .list .item .detail{
		// width: 368rpx;
	}
	
	.addAddress .list .item .location{
		position: absolute;
		right: 46rpx;
		top: 50%;
		margin-top: -40rpx!important;
		font-size: 24rpx;
		text-align: center;
	}
	
	
	
	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.addAddress .list .item .address {
		flex: 1;
	}
	
	.addAddress .list .item .address .addressCon{
		width: 360rpx;
	}
	
	.addAddress .list .item .address .addressCon .tip{
		font-size: 21rpx;
		margin-top: 4rpx;
	}
	
	.addAddress .list .item input {
		// width: 475rpx;
		flex: 1;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	
	.placeholder {
		color: #ccc;
	}
	
	.addAddress .list .item .picker {
		width: 430rpx;
		font-size: 30rpx;
	}
	
	
	
	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
	}
	
	
	
	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}
	
	
	.mt-22{
		margin-top: 22rpx;
	}
	.bg-color {
		background-color: #dd524d;
	}
	
	
	
</style>
