<template>
	<view class="content">
		<view class="content-top">
			<view class='hs_box'>
				<view class='hs-row '>
					<view class='hs-row-hd'>
						姓名
					</view>
					<view class='hs-row-bd' style="width: 95%;">
						<input type="text" class='hs-input' placeholder='请填写姓名' v-model="name" ></input>
					</view>
				</view>
				<view class='hs-row '>
					<view class='hs-row-hd'>
						手机号
					</view>
					<view class='hs-row-bd' style="width: 95%;">
						<input type="number" class='hs-input' placeholder='请填写手机号' v-model="mobile" ></input>
				 	</view>
				</view>
				<view class='hs-row '>
					<view class='hs-row-hd'>
						省市区
					</view>
					<view class='hs-row-bd'style="width: 95%;">
						<uni-data-picker placeholder="请选择省市区" popup-title="请选择省市区" :localdata="dataTree"  :clear-icon="false" v-model="classes"
							@change="onchangearea">
						</uni-data-picker></view>
				</view> 
				
				<view class='hs-row '>
					<view class='hs-row-hd'>
						地址
					</view>
					<view class='hs-row-bd' style="width: 95%;">
							<view class="hs-input"     style="width:78%">{{address}} </view>
							<view @click="getLocation" style="position: absolute;right: 10px;line-height: 24px;color: #000;">
								选择位置      
								<image class="fr icon" src="/static/img/right.png">
								</image>
							 </view>
					 </view>
				</view>
				<view class='hs-row '>
					<view class='hs-row-hd'>
						详细地址
					</view>
					<view class='hs-row-bd' style="width: 95%;">
						<input type="text" class='hs-input' placeholder='如:楼号/门牌号' v-model="room_number"></input>
					</view>
				</view>
				<view class='hs-row' @click="defaultChange">
					<view class='hs-row-hd'>
						设为默认
					</view>
					<view class='lidiv-ft' >
						<label class="radio" ><radio value="1" :checked="checked" color="#FF7159"/></label>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			
			<button class="btn btn-primary" @click="delAddress" v-if="id && id != 0"   :disabled='submitStatus' :loading='submitStatus'>删除</button>
			
			<button class="btn btn-success" @click="saveAddress"   :disabled='submitStatus' :loading='submitStatus'>保存</button>
		</view>
	</view>

</template>

<script> 
export default {
	components: { 
	},
	data() {
		return {
			dataTree: [],
			classes:'',
			id: 0,
			name: '',
			mobile: '',
			room_number: '',
			longitude:'',
			latitude:'',
			region: ['', '', ''],
			areaId: 0,
			address: '',
			is_def: 2, 
			checked: false,
			pickerValue: '', 
			submitStatus: false
		}
	},
	computed: {},
	onLoad(e) { 
		if(e.address_id){ 
			this.id = e.address_id;
			this.getAddressInfo();
		}else{ 
		 	uni.setNavigationBarTitle({
				title: '添加地址'
			});
		} 
		//获取地区信息
		this.$api.getarealist({}, res => { 
			if (res.code ==1) { 
				this.dataTree = res.data  
				uni.setStorageSync('areaList',  res.data );   
			}
		}); 
	},
	methods: {  
		getLocation(){ 
			uni.chooseLocation({
				success: (e) => { 
					  this.address = e.name; 
					this.longitude = e.longitude
					this.latitude = e.latitude  
				},
				fail:(e)=>{
					console.log(e);
					uni.showToast({
						title:'右上角三个点设置位置授权',
						icon:'none',
					})
				}
			})
		}, 
		onchangearea(e) { 
			this.areaId =  e.detail.value[2].value 
		}, 
		onConfirm(e) {
			let province_name = e[0].name;
			let city_name = e[1].name;
			let county_name = e[2].name;
			this.pickerValue = e[0].name+ " "+ e[1].name+" "+e[2].name
			let data = {
				province_name: province_name,
				city_name: city_name,
				county_name: county_name
			}
			let regionName = [province_name, city_name, county_name];
			this.$api.getAreaId(data, res => {
				if (res.code ==1) {
					this.areaId = res.data
				} else {
					uni.showModal({
						title: '提示',
						content: '地区选择出现问题，请重新选择地区',
						showCancel: false
					});
				}
			});
		},
		// 信息验证
		checkData (data) {
			this.submitStatus = false;
			if (!data.name) {
				uni.showToast({ title: '请输入姓名' , icon: 'none' })  
				return false
			} else if (!data.mobile) {
				uni.showToast({ title: '请输入手机号' , icon: 'none' })  
				return false
			} else if (data.mobile.length !== 11) {
				uni.showToast({ title: '手机号格式不正确' , icon: 'none' })  
				return false
			} else if (!data.area_id) {
				uni.showToast({ title: '请选择地区信息' , icon: 'none' })  
				return false
			} else if (!data.address) {
				uni.showToast({ title: '请选择地址' , icon: 'none' })  
				return false
			} else if (!data.room_number) {
				uni.showToast({ title: '请输入详细地址' , icon: 'none' })  
				return false
			}  else {
				return true
			}
		},
		//默认
		defaultChange(){
			if(this.checked){
				this.checked = false;
				this.is_def = 2;
			}else{
				this.checked = true;
				this.is_def = 1;
			}
		}, 
		getAddressInfo() {
			let data = {
				'id': this.id
			}
			this.$api.detail(data, res => {
				if(res.code ==1){
					 let region = res.data.area_name.split(" ");
					this.name = res.data.name;
					this.mobile = res.data.mobile;
					this.region = region;
					this.areaId = res.data.area_id;
					this.classes= res.data.area_id; 
					this.room_number = res.data.room_number;
					this.longitude = res.data.longitude;
					this.latitude = res.data.latitude;
					
					this.address = res.data.address;
					this.is_def = res.data.is_def;
					if(res.data.is_def == 1){
						this.checked = true;
					}else{
						this.checked = false;
					}
				}else{
					uni.showToast({ title: '获取收货地址信息出现问题' , icon: 'none' })  
				}
			},res => {
				this.submitStatus = false;
			});
		}, 
		delAddress() {
			this.submitStatus = true;
			this.$api.removeAddress({'id': this.id}, res => {
				if(res.code ==1){
					
					let user_address = uni.getStorageSync('user_address');  
					if(user_address.id==this.id){
						let data={}
						this.$store.commit("user_address",data)
					}
					uni.showToast({ title: res.msg , icon: 'success' }) 
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					},2000); 
				}else{
					uni.showToast({ title: res.msg , icon: 'none' }) ; 
				}
			},res => {
				this.submitStatus = false;
			});
		}, 
		saveAddress() {
			this.submitStatus = true;
			let data = {
				name: this.name,
				address: this.address,
				mobile: this.mobile,
				is_def: this.is_def,
				room_number : this.room_number,
				longitude :  this.longitude,
				latitude :  this.latitude,
				area_id: this.areaId
			} 
			if(this.id && this.id != 0){ 
				data.id = this.id
				
				if (this.checkData(data)) {
					this.$api.editaddress(data, res => {
						if(res.code ==1){
							uni.showToast({ title: res.msg , icon: 'success' })
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							},2000); 
						}else{
							uni.showToast({ title: res.msg , icon: 'none' }) ;
							 this.submitStatus = false;
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}else{ 
				if (this.checkData(data)) {
					this.$api.editaddress(data, res => {
						if(res.code ==1 ){
							uni.showToast({ title: res.msg , icon: 'success' })
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							},2000); 
						}else{
							uni.showToast({ title: res.msg , icon: 'none' }) ; 
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}
		}
	}, 

}
</script>

<style>
.user-head{
	height: 100upx;
}
.user-head-img{
	height: 90upx;
	width: 90upx;
	border-radius: 50%;
} 
.hs-row-hd{
	width: 180rpx;
}
.hs-row-bd{
	color: #666;
	font-size: 26upx;
}
.button-bottom .btn {
	width: 50%;
}
.hs-input{
	width: 100%;
}
  .lidiv-ft{
	right: 26rpx;
}
.input-value{padding:0px ! important}
.arrow-area{display:none} 

</style>