<template>
	<view class="content" :style="[theme]">
		<view class="content_box">
			<view class="content_box_item flex-start">
				<view class="content_box_item_one">
					联系人
				</view>
				<view class="content_box_item_tow">
					<input type="text" v-model="form.name" placeholder="请填写收货人姓名" />
				</view>
			</view>
			<view class="content_box_item flex-start">
				<view class="content_box_item_one">
					联系电话
				</view>
				<view class="content_box_item_tow">
					<input type="number" v-model="form.mobile" maxlength="11"
						placeholder="请填写收货人手机号码" />
				</view>
			</view>
			<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
				<view class="content_box_item flex-start">
					<view class="content_box_item_one">
						所在地区
					</view>
					<view class="content_box_item_tow flex-start">
						<input type="text" v-model="regionName" disabled="disabled" placeholder="省市区、乡镇等" />
						<!-- 	<image class="content_box_itemimage" @click="chooseLocation" src="@/static/address.png" mode="aspectFill">
					</image> -->
					</view>
				</view>
			</pick-regions>
			<!-- 		<view class="content_box_item flex-start">
				<view class="content_box_item_one">
					所在街道
				</view>
				<view class="content_box_item_tow">
					<input type="text" v-model="form.name" placeholder="填写街道" />
				</view>
			</view> -->
			<view class="content_box_item flex-start">
				<view class="content_box_item_one">
					详细地址
				</view>
				<view class="content_box_item_tow">
					<input type="text" v-model="form.address" placeholder="请填写详细地址" />
				</view>
			</view>
		</view>
		<view class="content_box_tow flex-between">
			<view class="content_box_tow_one">
				设为默认地址
			</view>
			<u-switch v-model="showis_default" size="20" @change="change"></u-switch>
		</view>
		<view class="positionfixed flex-center" @click="usereditaddress">
			保存
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				region: [],
				showis_default: true,
				defaultRegionCode: '610112', //默认未央区
				height: '',
				form: {
					regionName: '',
					type: ''
				},
				valueswitch: false
			};
		},
		async onLoad(e) {
			this.form.id = e.id
			if (e.type == 1) {
				uni.setNavigationBarTitle({
					title: '添加地址'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
				let res = await this.api.usereaddressshow({
					id: this.form.id
				})
				console.log(res)
				if (res) {
					this.form = res
					if (res.is_default == 1) {
						this.showis_default = true
					} else {
						this.showis_default = false
					}
				}
			}
			this.form.type = e.type
		},
		onShow() {},
		watch: {},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
			regionName() {
				// 转为字符串
				let res = null
				if (this.region.length == 0) {
					res = this.form.province + this.form.city + this.form.area
				} else {
					res = this.region.map(item => item.name).join(' ')
				}
				return res
			}
		},
		methods: {
			change(e) {
				this.showis_default = e
				console.log('change', e);
			},
			async usereditaddress() {
				if (this.form.name == null || this.form.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				if (this.form.mobile == null || this.form.mobile == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					});
					return false;
				}
				if (this.form.province == null || this.form.province == '') {
					uni.showToast({
						title: '请选择省，市，区',
						icon: 'none'
					});
					return false;
				}
				if (this.form.address == null || this.form.address == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return false;
				}

				let res = await this.api.usereditaddress({
					id: this.form.id, //地址ID
					province: this.form.province, //省
					city: this.form.city, //市
					area: this.form.area, //区
					address: this.form.address, //详细地址
					name: this.form.name, //姓名
					mobile: this.form.mobile, //电话
					lng: this.form.lng, //经度
					is_default: this.showis_default == true ? 1 : '', //1 默认
					lat: this.form.lat, //维度
					type: this.form.type //1 添加 2修改
				})
				console.log(res)
				if (res == 1) {
					uni.showToast({
						title: this.form.type == 1 ? '添加成功' : '修改成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1000);
				}
			},
			handleGetRegion(region) {
				console.log(111, region)
				this.region = region
				this.form.province = region[0].name
				this.form.city = region[1].name
				this.form.area = region[2].name

			},
			chooseLocation() {
				uni.chooseAddress({
					success: (res) => {
						console.log(res)
						this.form.address = res.address
						this.form.lat = res.latitude
						this.form.lng = res.longitude
						this.lnglat = res.latitude + '-' + res.longitude
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail: (e) => {
						console.log(e)
						// uni.getSetting({
						// 	success: function(res) {
						// 		var statu = res.authSetting;
						// 		console.log(statu);
						// 		if (!statu['scope.userLocation']) {
						// 			console.log(123);
						// 			uni.showModal({
						// 				title: '是否授权当前位置',
						// 				content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
						// 				success(tip) {
						// 					if (tip.confirm) {
						// 						uni.authorize({
						// 							scope: 'scope.userLocation',
						// 							success:()=> {
						// 								this.chooseLocation()
						// 							}
						// 						})
						// 					} else {
						// 						uni.showToast({
						// 							title: '授权失败',
						// 							icon: 'none',
						// 							duration: 1000
						// 						})
						// 					}
						// 				}
						// 			})

						// 		}
						// 	}
						// })
					}
				})
			},
			edit(e) {
				uni.pro.navigateTo('my/address/edit', e.id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0 30rpx;

		.content_box {
			padding-left: 40rpx;
			background: #FFF;

			.content_box_item {
				margin-top: 24rpx;
				width: 100%;
				padding: 32rpx;
				border-bottom: 1rpx solid #F6F6F6;

				.content_box_item_one {
					width: 112rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.content_box_item_tow {
					flex: auto;
					padding-left: 80rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #CCCCCC;

					input {
						flex: auto;
						height: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #CCCCCC;
					}
				}

				.content_box_itemimage {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content_box_tow {
			margin-top: 24rpx;
			padding: 34rpx 44rpx;
			background: #FFF;

			.content_box_tow_one {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.positionfixed {
			position: fixed;
			background: #f6f6f6;
			width: 90%;
			bottom: 50rpx;
			left: 5%;
			padding: 24rpx 34rpx;
			text-align: center;
			background: var(--bg-color-button);
			border-radius: 46rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>