<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="form.receiveAreasName" placeholder="请选择省市区" @click="show = true" type="select" />
				<u-picker v-model="show" @confirm="chooseArea" mode="region"></u-picker>
			</u-form-item>
			<u-form-item label="详细地址" required prop="receiveAddress">
				<u-input type="textarea" placeholder="请输入收货详细地址(最多500个字符)" :maxlength="500" v-model="form.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'
	export default {
		data() {
			return {
				show: false,
				form: {
					receiverName: '',
					receiverPhone: '',
					receiveAreasName: '', // 地址名称
					receiveAddress: '' // 详细地址
				},
				receiveAreas: '', //地址编码
				areaName: '', //地址
				rules: {
					receiverName: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					receiverPhone: [
						{ 
							required: true, 
							message: '请输入电话', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					receiveAreasName: [
						{
							required: true, 
							message: '请选择省市区', 
							trigger: ['change','blur']
						}
					],
					receiveAddress: [
					]
				}
			};
		},
		onLoad(option) {
			this.form = this.$store.state.vuex_OrderAddress
			if (this.form.receiveAreasName) {
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '新增地址'
				})
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let params = {
							receiverName: this.form.receiverName,
							receiverPhone: this.form.receiverPhone,
							receiveAreasName: this.areaName, // 地址名称
							receiveAreas: this.receiveAreas, 
							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 {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选择地址
			chooseArea(e){
				console.log(e)
				this.form.receiveAreasName = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.areaName = e.province.label + ',' + e.city.label + ',' + e.area.label
				this.receiveAreas = e.province.value + ',' + e.city.value + ',' + e.area.value
			}
		},
		// 必须要在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;
		}
	}
</style>
