<template>
	<view class="content">
		<view class="outerBox">
			<view class="itemBox" @click="goMap">
				定位
			</view>
			<view class="itemBox">
				<view class="itemBtn">姓名</view>
				<input type="text" :value="nameVlaue" placeholder="请输入收件人姓名" @input="nameInput" />
			</view>
			<view class="itemBox">
				<view class="itemBtn">手机号</view>
				<input type="number" maxlength="11" :value="numVlaue" placeholder="请输入手机号" @input="numInput" />
			</view>
			<view class="itemBox">
				<view class="itemBtn">所在地区</view>
				<picker mode="region" @change="bindRegionChange" :value="AreaList">
					<view class="choose-item">
						<text class="picker-text">{{addVlaue}}</text>
					</view>
				</picker>
			</view>
			<view class="itemBox">
				<view class="itemBtn">小区大厦</view>
				<input type="text" :value="detailSmall" placeholder="请填写你的小区" @input="smallPlotInput" />
			</view>
			<view class="itemBox">
				<view class="itemBtn">门牌号</view>
				<input type="text" :value="detailAdd" placeholder="街道门牌、楼层房间号等信息" @input="detailInput" />
			</view>
		</view>
		<view class="defalutAddBox">
			<view class="defalutAdd">
				设为默认收货地址
			</view>
			<switch :checked="checked" @change="onSelCheck" style="transform: scale(0.7);" />
		</view>
		<view class="saveBtn" @click="save">
			添加
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				//收件人
				nameVlaue: '',
				//手机号
				numVlaue: '',
				//所在地区
				addVlaue: '请选择所在地区',
				//小区
				detailSmall: '',
				//详细地址
				detailAdd: '',
				checked: true,
				//区号
				QuHao: '',
				//地址id
				address:'',   //选取地址
				id: '',
				lat:'',   //经纬度
				lot:'',
				AreaList: [
					[],
					[],
					[]
				]
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.GetArea()
		},
		onShow() {
			if (this.id) {
				this.GetAddress()
			}

		},
		methods: {
			//跳转地图
			goMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res,'res')
						that.address = res.name
						that.lat = res.latitude
						that.lot = res.longitude
						that.detailSmall=res.name
					}
				});
			},
			//删除地址
			del() {
				request.postRequest('/api/address/del', {
					id: this.id
				}, data => {
					if (data.code == 1) {
						uni.showToast({
							title: '删除成功',
							duration: 2000,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			},
			bindRegionChange(e) {
				this.QuHao = e.mp.detail.code[2]
				this.addVlaue = e.detail.value[0] + '' + e.detail.value[1] + '' + e.detail.value[2]
			},
			//获取省市区
			GetArea() {
				request.get('/api/address/area', {}).then(res => {
					if (res.code == 1) {
						this.AreaList[0] = res.data.provinceData
						this.AreaList[1] = res.data.cityData
						this.AreaList[2] = res.data.areaData
					}
				}).catch(err => {})
			},
			//获取地址详情
			GetAddress() {
				request.get('/api/address/info', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.nameVlaue = res.data.consignee
						this.numVlaue = res.data.phone
						this.detailAdd = res.data.address
						this.addVlaue = res.data.province_name + res.data.city_name + res.data.area_name
					}
				}).catch(err => {

				})
			},
			//是否默认地址
			onSelCheck() {
				this.checked = !this.checked
			},
			nameInput(e) {
				this.nameVlaue = e.detail.value
			},
			numInput(e) {
				this.numVlaue = e.detail.value
			},
			addInput(e) {
				this.addVlaue = e.detail.value
			},
			detailInput(e) {
				this.detailAdd = e.detail.value
			},
			smallPlotInput(e) {
				this.detailSmall = e.detail.value
			},
			save() {
				let postData = {
					consignee: this.nameVlaue,
					phone: this.numVlaue,
					area_id: this.QuHao,
					is_default: this.checked ? 1 : 0,
					address: this.detailAdd,
					id: this.id,
					latitude:this.lat,
					longitude:this.lot
				}
				request.post('/api/address/edit', postData).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	.choose-item {
		width: 100%;
	}

	.picker-text {
		color: #808080;
		font-size: 28rpx;
	}

	.content {
		padding: 32rpx;
		box-sizing: border-box;
		background: #fafafb;
		min-height: 100vh;
	}

	.outerBox {
		background-color: #fff;
	}

	.itemBox {
		display: flex;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F7F8FA;
	}

	.itemBtn {
		font-size: 28rpx;
		color: #323233;
		width: 180rpx;
	}

	input {
		font-size: 28rpx;
	}

	.defalutAddBox {
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		margin-top: 26rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		align-items: center;
	}

	.saveBtn {
		width: 686rpx;
		height: 88rpx;
		opacity: 1;
		background: #FF2F2F;
		border-radius: 8rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		margin-top: 128rpx;
	}

	.delBtn {
		width: 686rpx;
		height: 88rpx;
		opacity: 1;
		border: 2rpx solid #c8c9cc;
		border-radius: 88rpx;
		color: #323233;
		font-size: 28rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 26rpx;
	}
</style>