<template>
	<view class="AddaddressStyle" :style="{'height':contentHeight}">
		<!-- <view class="top">
			 <input class="uni-input" placeholder="自动获得焦点" style="width: 70%;"/>
			 <view style="display: flex;align-items: center;justify-content: center;border: 1px solid #F4AAA6;width:160rpx ;height: 60rpx;">
				 <Text style='color: #EA5A22;'>自动识别</Text>
			 </view>
		</view> -->
		<view class="addcenter">
			<view class="addcenter_item2">
				<Text>收货人</Text>
				<input class="uni-input inputM" v-model="msg.Name" />
			</view>
			<view style="width: 100%;height: 1px;background: #f5f5f5;"/>
		
			<view class="addcenter_item2">
				<Text>联系电话</Text>
				<input class="uni-input inputM" v-model="msg.Mobile" />
			</view>
			<view style="width: 100%;height: 1px;background: #f5f5f5;"/>
			<!-- TODO 动态获取地址数据 -->
			<view class="addcenter_item">
				<Text>所在地区</Text>
				<view style="display: flex;flex-direction: row;align-items: center;" @click="addressShow = true">
					<Text :style="{'color':address!=''? '#303133':'#9D9C9B'}">{{address!=''? address :'请选择'}}</Text>
					<u-icon name="arrow" color="#B2B2B2" size="30" ></u-icon>
					<pickerAddress v-model="addressShow" @confirm="addresspick" />
				</view>
			</view>
			<view style="width: 100%;height: 1px;background: #f5f5f5;"/>
			<view class="addcenter_item2" style="align-items: flex-start;">
				<Text>详细地址</Text>
				<textarea
				  style="height: 50px;"
				  class="inputM"
				  v-model="msg.Address"
				/>
			</view>
		</view>
		<!-- 智能识别 -->
		<view class="smart">
			<view>
				<span>智能识别</span>
				<textarea
				  placeholder="请粘贴或输入你的地址"
				  placeholder-style="font-size:13px"
				  :value="identifyinput"
				  @input='identifybtn'
				  class="inputsmart"
				/>
				<view style="display: flex;flex-direction: row;justify-content: flex-end;">
					<view class="btn_smart" :style="{'background':mainColor}" @click="addidentify">
						<Text>识别</Text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="btn" @click="preserve" :style="{'background':mainColor}">
			<Text>保存地址</Text>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	    
		import pickerAddress from './liudx-pickerAddress/index.vue'
		import AddressParse from './zh-address-parse.min.js'
	export default {
		components: {
		            pickerAddress
		        },
		data(){
			return{
				pageTitle:'收货地址',
				contentHeight:0,
				mainColor:'',
				msg:{
					 Id:0,
					 Name:'',
					 Mobile:'',
					 Province:'',
					 City:'',
					 District:'',
					 Address:'',
				},
				address:'',
				Pickershwo:false,
				addressShow: false,
				identifyinput:'',
				
			}
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			if(option.AddressId!=undefined){
				this.getAddressInfo(option.AddressId)
				
			}
		},
		methods:{
			preserve(){
				 let pages = getCurrentPages(); // 当前页面
				 let beforePage = pages[pages.length - 2]; // 前一个页面
				uni.showNavigationBarLoading();
				this.request2(
				  {
				  	url: '/api/AppletUser/SetUserShippingAddress',
				  	data: this.msg
				  
				  },
				
				  res => {
					  this.$refs.uToast.show({
					    title: "保存成功"
					  });
					  setTimeout(()=>{
						 uni.navigateBack({
						     success: function() {
						         beforePage.onLoad(); // 执行前一个页面的created方法
						     }
						 });
					  },1000)
				    
				    uni.hideNavigationBarLoading();
				  },
				  
				);
			},
			getAddressInfo(id){ //获取详细地址接口
				uni.showNavigationBarLoading();
				this.request2(
				  {
				  	url: '/api/AppletUser/GetUserShippingAddressInfo',
				  	data: {
						AddressId:id
					}
				  
				  },
				
				  res => {
					 
				    uni.hideNavigationBarLoading();
					this.msg.Id =res.data.Id;
					 this.msg.Name =res.data.Name;
					 this.msg.Mobile =res.data.Mobile;
					 this.msg.Province =res.data.Province;
					 this.msg.City =res.data.City;
					 this.msg.District =res.data.District;
					 this.msg.Address =res.data.Address;
					 this.address = res.data.DistrictAddress.split(" ").join(",");
				  },
				  
				);
			},
			 addresspick(obj) {
				 
				
				this.msg.Province = obj.province.ID;
				this.msg.City = obj.city.ID;
					
				if(obj.area!=undefined){
					this.msg.District = obj.area.ID;
					this.address = obj.province.Name+','+obj.city.Name+','+obj.area.Name;
				}else{
					this.msg.District = '';
					this.address = obj.province.Name+','+obj.city.Name
				}
				
			},
			identifybtn(val){
				this.identifyinput = val.detail.value
			},
			addidentify(){
				
				let parseResult = AddressParse(this.identifyinput, 0)
				console.log(parseResult)
				this.msg.Name  = parseResult.name;
				this.msg.Mobile  = parseResult.phone;
				this.msg.Address  = parseResult.detail;
				let nameList = [parseResult.province, parseResult.city, parseResult.area];
				this.getDestination(nameList);
			},
			getDestination(nameList) {
				this.request2(
					{
						url: '/api/AppletUser/GetDestinationListByNames',
						data: {
							area: nameList
						}
					},
			
					res => {
						console.log('res', res);
						this.msg.Province = res.data[0].ID;
						this.msg.City = res.data[1].ID;
						this.msg.District = res.data[2].ID;
						this.address = nameList[0]+','+nameList[1]+','+nameList[2]
						
					}
				);
			},
		
		}
	}
</script>

<style>
	.AddaddressStyle{
		background: #f3f4f6;
	}
	.AddaddressStyle .top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #fff;
	}
	.AddaddressStyle .addcenter{
		/* margin-top: 40rpx; */
		background: #FFFFFF;
	}
	.AddaddressStyle .addcenter_item{
		width: 100%;
		padding: 20rpx 28rpx;
		color: #303133;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

	}
	.AddaddressStyle .addcenter_item2{
		width: 100%;
		padding: 20rpx 28rpx;
		color: #303133;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	
	}
	.AddaddressStyle .btn{
		width:94% ;
		height: 80rpx;
		
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-left: 3%;
		margin-top: 46rpx;
		border-radius: 40rpx;
	}
	.AddaddressStyle .btn_smart{
		width: 60px;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 10rpx;
		border-radius: 25rpx;
	}
	.AddaddressStyle .inputM{
		margin-left: 20rpx;
		width: 70%;
		text-align: right;
	}
	.AddaddressStyle .inputsmart{

		width: 100%;
		height: 100px;
		margin-top: 10px;
	}
	
	.AddaddressStyle .smart{
		width: 100%;
		padding: 20rpx 28rpx;
		background: #FFFFFF;
		margin-top: 20px;
		
	}
</style>
