<template>
	<view class="content">
		<form @submit="saveAddress">
			<view>
				
				<view class="flex-row flex-y-center edit-row" style="border-bottom: none;">
					<view class="flex-grow-0 row-label">联系人</view>
					<view class="flex-grow-1 text-r flex-y-center" style="height: 100%;border-bottom: 1rpx solid #f1f1f1;">
						<input placeholder="请输入联系人名称" maxlength="8" :value="info.user_name" name="user_name" />
					</view>
				</view>
				
				<view class="flex-y-center edit-row">
					<view class="flex-grow-0" style="width: 150rpx;">
					</view>
					<view class="flex-y-center">
						<view class="edit-sex flex-center" 
						:style="[sex_index==1?{'border-color':setColor,color:setColor}:'']" @click="bindSex(1)">
							男士
						</view>
						<view class="edit-sex flex-center" :style="[sex_index==2?{'border-color':setColor,color:setColor}:'']" @click="bindSex(2)">
							女士
						</view>
					</view>
				</view>
				
				<view class="flex-row flex-y-center edit-row">
					<view class="flex-grow-0 row-label">电话</view>
					<view class="flex-grow-1 text-r">
						<input type="number" placeholder="请输入联系人电话" :value="info.tel" name="tel" maxlength="11"  />
					</view>
				</view>
				
				<view class="flex-row flex-y-center edit-row" style="height: auto;padding: 25rpx 24rpx;">
					<view class="flex-grow-0 row-label">收货地址</view>
					<view @click="openAddres" class="flex-grow-1">
						<view class="flex-row">
							<view class="flex-grow-1" style="text-align: right;padding-right: 24rpx">
								{{address?address:"请选择"}}
							</view>
							<view class="flex-grow-0 flex-y-center">
								<text class="iconfont icon-jiantou"></text>
							</view>
						</view>
					</view>
				</view>
	
				<view class="flex-row flex-y-center edit-row">
					<view class="flex-grow-0 row-label">详细地址(门牌号)</view>
					<view class="flex-grow-1 text-r">
						<input placeholder="请输入详细地址(门牌号)" :value="info.mph" name="mph" />
					</view>
				</view>
			</view>
			
			<view class="bottom-bar">
				<button form-type="submit" :style="{background:setColor}">保存</button>
			</view>
			
			
			
		</form>
	</view>
</template>
<script>
	export default {
		components: {
		},
		data() {
			return {
				id: "",
				info: {},
				address: "",
				cityPickerValueDefault: [0, 0, 1],
				setColor: '',
				sex_index:1,
				lat:'',
				lng:'',
			}
		},

		onLoad(e) {
			this.id = e.id;
			if (e.id) {
				this.http();
			}
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.setColor = this.$store.state.color;
		},

		methods: {
			bindSex(e){
				this.sex_index=e;
			},
			
			http() {
				this.$http.request('Xcx/MyAddressInfo', {
					id: this.id,
				}, "", "", true).then(res => {
					this.info = res.data
					this.address=res.data.address;
					this.lat=res.data.lat;
					this.lng=res.data.lng;
					this.sex_index=res.data.sex;
				})
			},
			
			openAddres() {
				uni.chooseLocation({
				    success:(res)=> {
						this.address=res.address+res.name;
						this.lat= res.latitude;
						this.lng= res.longitude;
				    },
					fail:(err)=>{
						console.log(err,"err")
						uni.getSetting({
							success: function(e) {
								console.log(e),
									e.authSetting["scope.userLocation"] ? console.log("取消") : 
									uni.showModal({
										title: "提示",
										content: "您拒绝了获取收货地址授权，部分功能无法使用,点击确定重新获取授权。",
										showCancel: !1,
										success: function(e) {
											
											e.confirm && wx.authorize({
												scope: 'scope.userLocation',
												success () {
												  // 用户已经同意小程序使用录音功能，
												  // 后续调用 wx.startRecord 接口不会弹窗询问
												  // wx.startRecord()
												}
											  })
											
											// uni.openSetting({
											// 	success: function(e) {
											// 		e.authSetting[
											// 			"scope.userLocation"
											// 		];
													
											// 	},
											// 	fail: function(e) {}
											// });
											
											
											
										},
										
								});
							}
						});
					}
				});
				// var index = this.$refs.simpleAddress.queryIndex(['全部', '全部', '全部'], 'label');
				// this.cityPickerValueDefault = index.index;
				// this.$refs.simpleAddress.open();
			},

			onConfirm(e) {
				// console.log(e)
				this.info = {
					province: e.labelArr[0],
					city: e.labelArr[1],
					area: e.labelArr[2],
					address: this.info.address,
					all_address: this.info.all_address,
					phone: this.info.phone,
					user_name: this.info.user_name,
				}
			},
			saveAddress(e) {
				var url,myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				// console.log(myreg2.test(tel));
				let tel = e.detail.value.tel;
				if (!tel) {
					wx.showToast({
						title: "联系电话格式不正确",
						icon: 'none'
					});
					return false;
				}
				let data={
						address: this.address,
						user_name: e.detail.value.user_name,
						mph:e.detail.value.mph,
						user_id: uni.getStorageSync('user_id'),
						sex: this.sex_index,
						tel: e.detail.value.tel,
						lat: this.lat,
						lng: this.lng,
				}
				if(this.id){
				   url='Xcx/UpdAddress';
				   data.id=this.id;
				}else{
					url='Xcx/AddAddress';
				}
				this.$http.request(url,data).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	/* pages/address-edit/address-edit.wxss */
	page {
		background: #fff;
		font-size: 28rpx;
	}
	.edit-sex{
		border: 1rpx solid #ccc;
		width: 150rpx;
		height: 60rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
	input {
		font-size: 28rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	.bottom-bar button {
		background: #C9271B;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		width: 686rpx;
		margin: 0 auto;
		border-radius: 48px;
	}

	button::after {
		border: none;
	}

	.wetcher {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(201, 206, 214, 1);
		opacity: 1;
		border-radius: 48px;
		margin: 0 auto;
		color: #C9271B;
		margin-top: 100rpx;
		margin-bottom: 66rpx;
	}

	.edit-row {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0rpx 24rpx;
	}
	

	.edit-row .row-label {
		margin-right: 24rpx;
		min-width: 140rpx;
		color: #000000;
		font-weight: 700;
	}

	.get-wechat-address {
		text-align: center;
		background: #09bb07;
		color: #fff;
		padding: 18rpx 0;
		margin: 32rpx 24rpx;
		border-radius: 10rpx;
		display: block;
	}

	.get-wechat-address:active {
		opacity: 0.85;
	}
</style>
