<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
			<u-form-item label="姓名" required prop="receiverName">
				<u-input placeholder="请输入姓名" :maxlength="30" v-model="form.receiverName" />
			</u-form-item>
			<u-form-item label="电话" required prop="receiverPhone">
				<u-input placeholder="请输入电话" :maxlength="11" type="number" v-model="form.receiverPhone" />
			</u-form-item>
			<u-form-item label="省市区" required prop="receiveAreasName">
				<u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" />
				<Address ref="applyAddress" @onConfirm="areaConfirm"></Address>
			</u-form-item>
			<u-form-item label="详细地址" required prop="receiveAddress">
				<textarea :auto-height="true" placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/>
			</u-form-item>
		</u-form>
		<view class="buttons">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		saveAddress
	} from '@/api/receiveAddress.js'
	import Address from '@/components/address.vue'
	export default {
		components: {
			Address
		},
		data() {
			return {
				show: false,
				form: {
					receiverName: '',
					receiverPhone: '',
					receiveAddress: '' // 详细地址
				},
				receiveAreas: '', //地址编码
				areaName: '', //地址
				areaInfo: {},  //  省市区
				areaIdArr: [],  //  省市区id数组
				rules: {
				}
			};
		},
		onLoad(option) {
			this.form = this.$store.state.vuex_OrderAddress
			if (this.form.receiveAreasName) {
				this.areaIdArr = this.form.receiveAreas.split(',')
				this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-')
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '新增地址'
				})
			}
		},
		onUnload() {
			this.$u.vuex("vuex_OrderAddress",{})
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.form.receiverName ==='') {
							uni.showToast({
								title: '请输入姓名',
								icon: 'none'
							})
							return false
						}
						if (this.form.receiverPhone ==='') {
							uni.showToast({
								title: '请输入电话',
								icon: 'none'
							})
							return false
						}
						//  省市区
						if(this.areaIdArr.length == 0){
							uni.showToast({icon: 'none',title: '请选择省市区'})
							return
						}
						if (this.form.receiveAddress ==='') {
							uni.showToast({
								title: '请输入详细地址',
								icon: 'none'
							})
							return false
						}
						let params = {
							receiverName: this.form.receiverName,
							receiverPhone: this.form.receiverPhone,
							receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
							receiveAreas: this.areaIdArr.join(','), 
							receiveAddress: this.form.receiveAddress // 详细地址
						}
						if(this.form.id) {
							params.id = this.form.id
						}
						saveAddress(params).then(res=>{
							if(res.status == 200) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},300)
							} 
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.areaInfo = e
				this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
			},
			openAddress(){
				//  省市区  回显     参数为省市区id数组
				// console.log(this.areaIdArr,'this.areaIdArr')
				this.$refs.applyAddress.open(this.areaIdArr)
			},
		},
		// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss">
	.content{
		padding: 0 50upx;
		background: #FFFFFF;
		width: 100%;
		.buttons{
			padding: 80upx 100upx;
		}
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
	}
</style>