<template>
	<view class="">
	<navigation v-if="form.id==null">
		Add Address
	</navigation>
	<navigation v-if="form.id!=null">
		Modify Address
	</navigation>
		<view class="login-body">
			<u-form :model="form" ref="uForm" :rules="rules">
					<u-form-item  prop="name">
						<u-input v-model="form.name" :placeholder="'Full Name'" 
		
						/>
					</u-form-item>
					<u-form-item  prop="mobile">
						<u-input v-model="form.mobile" :placeholder="'Mobile Number'"/>
					</u-form-item>
					<u-form-item  prop="zip">
						<u-input v-model="form.zip" :placeholder="'Pincode'"/>
					</u-form-item>
					<u-form-item  prop="province">
						<u-input v-model="form.province" :placeholder="'State'"/>
					</u-form-item>
					<u-form-item  prop="city">
						<u-input v-model="form.city" :placeholder="'Town/City'"/>
					</u-form-item>
					<u-form-item  prop="areaInfo" >
						<u-input v-model="form.areaInfo" :placeholder="'Detail Address'"/>
					</u-form-item>
				</u-form>
		<button @click="submit" class="login-btn on">
			Confirm
		</button>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import md5 from 'js-md5'
	import store from '@/store'
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
			    // 判断按钮是否选中
				btncol: 0,
				
					form: {
								province: '',
								name:'',
								city:'',
								state:'',
								areaInfo:'',
								mobile:'',
								zip:'',
								ticket:'',
								
							},
							rules: {
								name: [
									{ 
										required: true, 
										message: 'Please enter your name', 
										// 可以单个或者同时写两个触发验证方式 
										trigger: ['blur'],
									},
								
								],
								mobile: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter mobile number', 
										trigger: 'blur'
									}
								],
								zip: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter Pincode', 
										trigger: 'blur'
									}
								],
								province: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter State', 
										trigger: 'blur'
									}
								],
								state: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter State/Territory', 
										trigger: 'blur'
									}
								],
								city: [
									{
										// min: 5, 
										message: 'Please enter city', 
										trigger: 'blur'
									}
								],
							}
			}
		},

		onLoad(item) {
			
		
	       if(JSON.stringify(item) != "{}"){
	       		var data=item.card.replace(/""/g,"");
	       		this.form=JSON.parse(data)	
	       		}
				this.form.ticket= uni.getStorageSync('logInfo').data;
				console.log(this.form.ticket,666666)
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			onReady() {
				this.$refs.uForm.setRules(this.rules);
			},
		methods: {
			btnControl() {
				this.btncol = 1;
				if (this.form.name == '') {
					this.btncol = 0;
				}
			},

		submit() {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							uni.showLoading({})
							const post = api.addressSave(this.form)
									post.then(res => {
										if(res.errCode=='SUCCESS'){
										if(this.form.id!=null){
											uni.showToast({
												title: 'Successfully',
												icon: 'success',
												duration: 2500
											})
										}else{
										uni.showToast({
											title: 'Successfully',
											icon: 'success',
											duration: 2500
										})	
										}
									 setTimeout(()=>{
										 uni.navigateTo({
										 	url:'../index'
										 })
									 },2000)
								}else{
										uni.hideLoading()
									uni.showToast({
										title: 'Fail',
										icon: 'none',
									duration: 2500,
									})
								}
										})
										.catch(e => {
											uni.hideLoading()
											uni.showToast({
												title: 'Fail',
												icon: 'none',
												duration: 2500
											})
										})
						} else {
							console.log('验证失败');
						}
					});
				}
		
}

			}

		
	
</script>

<style>
	@import './index.css';
</style>
