<template>
	<!-- 收货地址 -->
	<scroll-view class="addReceivingAddress" :style="{height:phoneHight}" :scroll-y="true" :scroll-x="false">
		<far-bottom></far-bottom>
		<view class="addInput">
			<view class="addInputPackage">
				<view class="inputDemo">
					<span>{{languageStatus!=1?'收货人':'납품인'}}</span>
					<input :placeholder="languageStatus!=1?'请输入姓名':'성함을 입력하세요'" v-model="userAddress.name" />
				</view>
				<view class="inputDemo">
					<span>{{languageStatus!=1?'手机号码':'핸드폰번호'}}</span>
					<input :placeholder="languageStatus!=1?'请输入手机号码':'핸드폰번호를 입력하세요'" v-model="userAddress.tel" />
				</view>
				<view class="inputDemo" style="position: relative;">
					<span>{{languageStatus!=1?'地址选择':'주소 선택'}}</span>
					
					<input class="uni-input-view" :placeholder="languageStatus!=1?'请选择地址':'주소 선택하세요'" :disabled="inputDisabled" :style="{color: userAddress.detailed_address != '请选择地址'?'#333333':'#6f6f6f'}" v-model="userAddress.detailed_address" @tap="visble">
					<w-pickerb
						:visible.sync="visiblec"
						mode="region"
						:value="[userAddress.provinceid,userAddress.cityid,userAddress.countyid]"
						default-type="value"
						:hide-area="false"
						@confirm="onConfirm($event,'region')"
						@cancel="onCancel"
						ref="region" 
					></w-pickerb>
					<view class="location" style="font-size: 26upx;color: #FF4444;" @click="goLocation">
						<image :src="imgfixUrls + 'merchant/where.svg'" />
							{{languageStatus!=1?'定位':'위치 설정'}}
					</view>
				</view>
				<view class="inputDemo1">
					<span>{{languageStatus!=1?'门牌号':'가게번호'}}</span>
					<textarea placeholder="例:xx小区1栋1单元101" maxlength="50" v-model="userAddress.houseNumber"></textarea>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
			<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="latlngs.latitude">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${latlngs.latitude},${latlngs.longitude}`"></iframe>
			</view>
			<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="!latlngs.latitude">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
			</view>
		</PopManager>
		<!-- #endif -->
		<view class="setStatus" v-if="status == 1" @click="changeAddressStatus(0)">
			<view class="checked">
				<image :src="imgfixUrls + 'merchant/payCheck.svg'" />
			</view>
			<!-- <evan-radio-group @change="changeAddressStatus" v-model="status">
			<evan-radio  label="0" clearable>基础用法1</evan-radio>
			</evan-radio-group> -->
			<span>{{languageStatus!=1?'设为默认地址':'디폴트옵션 주소'}}</span>
		</view>
		<view class="setStatus" v-else @click="changeAddressStatus(1)">

			<view class="check"></view>
			<!-- <evan-radio-group @change="changeAddressStatus" v-model="status">
			<evan-radio  label="0" clearable>基础用法1</evan-radio>
			</evan-radio-group> -->
			<span>{{languageStatus!=1?'设为默认地址':'디폴트옵션 주소'}}</span>
		</view>

		<view class="getWechatAddressButton" @click="getWxAddress"><span>{{languageStatus!=1?'一键获得微信地址':'위챗 주소 받기'}}</span></view>

		<view class="saveButton" @click="saveAddress"><span>{{languageStatus!=1?'保存':'저장'}}</span></view>
	</scroll-view>
</template>

<script>
	import App from '@/common/js/app.js';
	import PopManager from '@/components/template/PopManager';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import wPickerb from '@/components/w-picker/w-picker.vue'
	import checkCity from '@/components/template/checkCity.vue';
	// import EvanRadio from '@/components/template/evan-radio/evan-radio.vue'
	// import EvanRadioGroup from '@/components/template/evan-radio/evan-radio-group.vue'
	export default {
		components: {
			checkCity,
			PopManager,
			wPickerb
		},
		data() {
			return {
				resShow: {},
				phoneHight: null,
				phoneWidth:null,
				isOpenLaction: false,
				visiblec:false,
				userAddress: {
					id: '',
					name: '',
					tel: '',
					detailed_address: '',
					provinceidName: '',
					areaidName: '',
					distidName: '',
					status: 0,
					lat:'',
					lng:''
				},
				status: 0,
				rekuisObj:{},
				latlngs:null,
				counts:true,
				userindex:[],
				citytext:'',
				owenscitylist:[],
				disabled:true,
				userInfo:{},
				lblis:{},
				inputDisabled:true
			};
		},
		onShow() {
			//#ifdef APP-PLUS
			if(this.lblis.lat){
				// this.getloctions(this.lblis);
				// _this.disabled = false;
				
				this.userAddress.lat = this.userInfo.lat;
				this.userAddress.lng = this.userInfo.lng;
				this.userAddress.detailed_address = this.userInfo.address;
				let bilis = {
					detailed_address:this.userInfo.address,
					lat:this.userInfo.lat,
					lng:this.userInfo.lng
				};
				this.disabled = false;
				this.getloctions(bilis);
			}
			//#endif
			
		},
		onLoad: function(option) {
			console.log(option);
			let _this = this
			// _this.citytext = _this.languageStatus!=1?'请选择地址':'주소 선택하세요'
			// _this.userInfo.detailed_address = _this.languageStatus!=1?'请选择地址':'주소 선택하세요'
			_this.owenscitylist = uni.getStorageSync('cityList');
			// #ifdef H5
			wxApi.wxRegister();
			_this.toLocale();
			_this.latlngs = uni.getStorageSync('curLoction');
			// #endif
			if (option.id !== undefined) {
				this.userAddress.id = option.id;
				this.init();
			}
			uni.getSystemInfo({
				success(res) {
					console.log(res);
					_this.phoneHight = res.windowHeight + 'px';
					_this.phoneWidth = res.windowWidth + 'px';
				}
			});
		},
		watch: {
			status: {
				handler(newVal) {
					console.log(newVal);
				}
			}
		},
		methods: {
			tabtextarea(){
				if(!this.disabled && !userAddress.detailed_address) return;
				uni.showToast({
					icon:'none',
					title:'请使用定位获取位置,再进行详细地址修改'
				})
			},
			onCancel(e){
				
			},
			onConfirm(e){
				console.log(e);
				this.userAddress.provinceid  = e.obj.province.value;
				this.userAddress.cityid  = e.obj.city.value;
				this.userAddress.countyid  = e.obj.area.value;
				this.citytext = e.result;
			},
			visble(){
				// if(this.disabled){
				// 	this.goLocation();
				// }else{
				// 	this.visiblec = true;
				// }
				if(this.inputDisabled == false) return
				uni.showToast({
					icon:'none',
					title:'请先选择定位'
				})
				// this.goLocation();
			},
			toLocale(){
				let _this = this;
				let lblis;
				let count = 1;
				// #ifdef H5
				window.addEventListener(
					'message',
					function(event) {
						// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
						let loc = event.data;
						if(!_this.counts){
							return
						}
						if(count > 1 || _this.counts){
							if (loc && loc.module == 'locationPicker') {
								console.log(count)
								lblis = {
									lat:loc.latlng.lat,
									lng:loc.latlng.lng,
									detailed_address:loc.poiaddress
								}
								_this.isOpenLaction = false;
								_this.disabled = false;
								_this.inputDisabled = false;
								//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
								_this.getloctions(lblis);
							}
						}
						count++;
						_this.counts = false;
						setTimeout(()=>{
							_this.counts = true
						},1000)
					},
					false
				);
				
				// #endif
			},
			getloctions(lblis){
				console.log(lblis,'666666666',this.userInfo);
				let _this = this;
				App._post_form(`&p=member&do=lng2areaid&lng=${lblis.lng}&lat=${lblis.lat}`, {}, res => {
					_this.userAddress.detailed_address = lblis.detailed_address;
					_this.userAddress.lat = lblis.lat;
					_this.userAddress.lng = lblis.lng;
					_this.userAddress.provinceid = res.data.provinceid;
					_this.userAddress.countyid = res.data.countyid;
					_this.userAddress.cityid = res.data.cityid;
					_this.userAddress.provinceidName = '';
					_this.owenscitylist.map((item,index)=>{
						if(item.id == _this.userAddress.provinceid){
							_this.citytext  = item.name;
							_this.userAddress.provinceidName = item.name;
							item.area.map(items=>{
								if(items.id == _this.userAddress.cityid){
									_this.citytext = `${_this.citytext}${items.name}`;
									_this.userAddress.areaidName = items.name;
									console.log(_this.citytext,items.name);
									items.dist.map(itemss=>{
										if(itemss.id == _this.userAddress.countyid){
											_this.citytext = `${_this.citytext}${itemss.name}`;
											_this.userAddress.distidName = itemss.name;
										}
									})
								}
							})
						}
					})
					console.log(_this.userAddress);
				});
			},
			goLocation(){
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.chooseLocation({
					keyword: '',
					success: function(e) {
						let bilis = {
							detailed_address:e.address,
							lat:e.latitude,
							lng:e.longitude
						};
						_this.disabled = false;
						_this.inputDisabled = false;
						_this.getloctions(bilis);
					}
				});
				// #endif
				// #ifdef H5
				_this.isOpenLaction = true;
				// #endif
				//#ifdef APP-PLUS
				      App.navigationTo({
				       url: 'pages/subPages2/map/index'
				      });
				//#endif
			},
			returnData(e,index) {
				let _this = this;
				_this.userAddress = { ..._this.userAddress,
					...e
				};
				console.log(_this.userAddress);
				// _this.userAddress.distidName = !_this.userAddress.distidName?'':_this.userAddress.distidName;
			},
			galadata(e) {
				let _this = this;
				_this.userAddress.areaidName = e.areaidName;
				_this.userAddress.distidName = e.distidName;
				_this.userAddress.provinceidName = e.provinceidName;
				// _this.userAddress.distidName = !_this.userAddress.distidName?'':_this.userAddress.distidName;
			},
			init() {
				let _this = this;
				_this.addAddress();

			},
			// 保存地址数据
			saveAddress() {
				let _this = this;
				console.log(_this.userAddress)
				if (_this.userAddress.name == '' || _this.userAddress.name == undefined) {
					uni.showToast({
						icon: 'none',
						title: '收货人不能为空',
						duration: 2000
					});
					return;
				}
				if (_this.userAddress.tel == '' || _this.userAddress.tel == undefined) {
					uni.showToast({
						icon: 'none',
						title: '收货人电话不能为空',
						duration: 2000
					});
					return;
				}
				if (_this.userAddress.areaid == '' || _this.userAddress.areaidName == undefined) {
					uni.showToast({
						icon: 'none',
						title: '请选择省市',
						duration: 2000
					});
					return;
				}
				if (_this.userAddress.detailed_address == '' || _this.userAddress.detailed_address == undefined) {
					uni.showToast({
						icon: 'none',
						title: '详细地址不能为空',
						duration: 2000
					});
					return;
				}
				// _this.userAddress.detailed_address = _this.userAddress.detailed_address + _this.userAddress.houseNumber;
				let data = _this.userAddress;
				if(!_this.userAddress.lat){
					let locationU = uni.getStorageSync('curLoction');
					data.lat = locationU.latitude;
					data.lng = locationU.longitude;
				}
				App._post_form('&p=member&do=saveAddress', data, res => {
					uni.navigateBack();
				});
			},
			getWxAddress() {	
				let _this = this,
					cityList = uni.getStorageSync('cityList');
				// #ifdef H5
				wxApi.wxOpenAddress(res => {
					console.log(res);
					_this.userAddress.name = res.userName
					_this.userAddress.tel = res.telNumber
					_this.userAddress.detailed_address = res.detailInfo
					_this.userAddress.provinceidName = res.provinceName
					_this.userAddress.areaidName = res.cityName
					_this.userAddress.distidName = res.countryName
					for (let i = 0; i < cityList.length; i++) {
						if (_this.userAddress.provinceidName == cityList[i].name || _this.userAddress.provinceidName == cityList[i].name + '市') {
							_this.userAddress.provinceid = cityList[i].id;
							// _this.userAddress.provinceid = cityList[i].id;
							for (let a = 0; a < cityList[i].area.length; a++) {
								if (_this.userAddress.areaidName == cityList[i].area[a].name) {
									_this.userAddress.cityid = cityList[i].area[a].id
									for (let c = 0; c < cityList[i].area[a].dist.length; c++) {
										if (_this.userAddress.distidName == cityList[i].area[a].dist[c].name) {
											_this.userAddress.countyid = cityList[i].area[a].dist[c].id;
											_this.citytext = res.provinceName + res.cityName +  res.countryName;
										}
									}
								}
							}
						}
					}
					// _this.userAddress.provinceid
					// _this.resShow=JSON.stringify(res)+_this.userAddress.provinceidName
				});
				// #endif

				/**
				 * 获取微信地址
				 */
				// #ifndef H5
				uni.chooseAddress({
					success: function(res) {
						console.log(res)
						let cityItem = {},
							cityInfo = cityList.map((val => {
								if (val.name === res.provinceName || val.name + '市' === res.provinceName) {
									cityItem.provinceid = val.id;
								}
								val.area.map((areaVal) => {
									if (areaVal.name === res.cityName) {
										cityItem.cityid = areaVal.id;
									}
									areaVal.dist.map((distVal) => {
										if (distVal.name === res.countyName) {
											cityItem.countyid = distVal.id;
										}
									})
								})
							}));
							console.log(cityItem);
						_this.userAddress = Object.assign(cityItem, {
							name: res.userName,
							tel: res.telNumber,
							detailed_address: res.detailInfo,
							provinceidName: res.provinceName,
							areaidName: res.cityName,
							distidName: res.countyName
						});
						_this.citytext = _this.userAddress.provinceidName + _this.userAddress.areaidName +  _this.userAddress.distidName;
						console.log(cityItem,_this.userAddress);
					},
					fail(err){
						console.log(err, '错误返回');
					}
				})
				// #endif
				// _this.userAddress.status = 0;
			},
			// 创建或编辑地址
			addAddress() {
				let _this = this;
				let data = {
					id: _this.userAddress.id
				};
				let getcitylist = uni.getStorageSync('cityList');
				App._post_form('&p=member&do=addAddress', data, res => {
					_this.userAddress = { ..._this.userAddress,
						...res.data
					};
					_this.owenscitylist.map((item,index)=>{
						if(item.id == _this.userAddress.provinceid){
							_this.citytext  = item.name;
							item.area.map(items=>{
								if(items.id == _this.userAddress.cityid){
									_this.citytext = `${_this.citytext}${items.name}`;
									console.log(_this.citytext,items.name);
									items.dist.map(itemss=>{
										if(itemss.id == _this.userAddress.countyid){
											_this.citytext = `${_this.citytext}${itemss.name}`;
										}
									})
								}
							})
						}
					})
					getcitylist.map((item,index)=>{
						if(item.id == res.data.provinceid){
							_this.userindex[0] = index;
							item.area.map((items,indexs)=>{
								if(items.id == res.data.cityid){
									setTimeout(()=>{
										_this.userindex[1] = indexs;
									},100)
									items.dist.map((itemss,indexss)=>{
										if(itemss.id == res.data.countyid){
											setTimeout(()=>{
												_this.userindex[2] = indexss;
											},200)
										}
									})
								}
							})
						}
					});
				});
			},
			// 修改默认地址
			changeAddressStatus(type) {
				let _this = this;
				_this.status = type;
				console.log(_this.status)
			}
		}
	};
</script>

<style lang="less" scoped>
	.location{
		position: absolute;
		right: 0;
		top: 23upx;
		
		>image{
			padding-left: 10upx;
			width: 22upx;
			height: 22upx;
		}
	}
	.show {
		width: 750upx;
		height: 400upx;
		font-size: 28upx;
	}

	page {
		background: #f0f0f0;
	}

	.addReceivingAddress {
		font-size: 0;
		background: #f0f0f0;
	}

	.addInput {
		margin: 20upx auto 0 auto;
		width: 688upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.addInputPackage {
		padding: 0 40upx;
	}

	.inputDemo {
		height: 80upx;
		border-bottom: 1px solid #eeeeee;

		>span {
			display: inline-block;
			line-height: 80upx;
			vertical-align: middle;
			width: 140upx;
			font-size: 28upx;


			color: rgba(51, 51, 51, 1);
		}

		>input {
			font-size: 24upx;


			color: #333333;
			height: 80upx;
			vertical-align: middle;
			width: 300upx;
			display: inline-block;
			margin-left: 60upx;
		}
		.uni-input-view{
			font-size: 24upx;
			// padding-left: 58upx;
			// line-height: 80upx;
			display: inline-block;
			// height: 80upx;
			vertical-align: middle;
			width: 270upx;
		}
	}

	input::placeholder {
		font-size: 24upx;


		color: rgba(153, 153, 153, 1);
	}

	.inputDemo1 {
		overflow: hidden;
		height: 114upx;
		position: relative;

		>span {
			vertical-align: top;
			display: inline-block;
			line-height: 80upx;
			width: 140upx;
			font-size: 28upx;


			color: rgba(51, 51, 51, 1);
		}

		>textarea {
			margin-top: 23upx;
			vertical-align: top;
			font-size: 24upx;


			color: #333333;
			height: 70upx;
			vertical-align: middle;
			width: 350upx;
			display: inline-block;
			margin-left: 60upx;
		}
	}

	.setStatus {
		margin: 15upx auto 0 auto;
		width: 688upx;
		height: 83upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;

		>span {
			vertical-align: middle;
			margin-left: 17upx;
			line-height: 83upx;
			font-size: 24upx;


			color: rgba(51, 51, 51, 1);
		}
	}

	.check {
		margin-left: 45upx;
		display: inline-block;
		vertical-align: middle;
		width: 31upx;
		height: 31upx;
		border: 2px solid rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.getWechatAddressButton {
		margin: 35upx auto 0 auto;
		width: 688upx;
		height: 80upx;
		background: rgba(0, 186, 25, 1);
		border-radius: 40upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;


			color: rgba(255, 255, 255, 1);
		}
	}

	.saveButton {
		margin: 20upx auto 0 auto;
		width: 688upx;
		height: 80upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 40upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;


			color: rgba(255, 255, 255, 1);
		}
	}

	.checked {
		margin-left: 45upx;
		display: inline-block;
		vertical-align: middle;
		border: 4upx solid #ff4444;
		width: 31upx;
		height: 31upx;
		background: #ff4444;
		border-radius: 50%;

		>image {
			margin: 3upx 0 0 4upx;
			width: 25upx;
			height: 25upx;
		}
	}
</style>
