<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">手机号</view>
			<input class="input" type="number" maxlength="11" v-model="addressData.phoneNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>

		<!-- 		<view class="row b-b">
			<view class="tit">所在地</view>
			<view class="input">
				<w-select style="" v-model="chooseValue" defaultValue="请选择所在地" :list="range" width="100%" valueName="content" @change="change"></w-select>
 -->
		<!-- <uni-data-select :placeholder="addressData.region"  v-model="value" :localdata="range" @change="change"></uni-data-select> -->
		<!-- 			</view>
		</view> -->
		<!-- <view class="row b-b">
			<text class="tit">地图:</text>
			<input class="input" @click="openMap()" type="text" value="" v-model="mapAddressName"
				placeholder="在地图上搜索并选择地址" disabled="true" />
			<text class="yticon icon-shouhuodizhi"></text>
		</view> -->
		<!-- 		<view class="row b-b">
			<view class="tit">取货点</view>
			<view class="input">
				<w-select style=""  v-model="chooseValueAddress" defaultValue="请选择取货点" :list="rangeAddress" width="100%" valueName="content" @change="changeAddress"></w-select>
			</view>
		</view> -->

		<view class="row b-b">
			<view class="tit">所在地</view>
			<view class="input"><uni-data-select v-model="valueszd" :localdata="rangeszd" @change="changeszd"></uni-data-select></view>
		</view>
		<view class="row b-b">
			<view class="tit">取货点</view>
			<view class="input"><uni-data-select v-model="valueqhd" :localdata="rangeqhd" @change="changeqhd"></uni-data-select></view>
		</view>

		<!-- <view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.defaultStatus" color="#fa436a" @change="switchChange" />
		</view> -->
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
import Api from '@/common/api'
import lotusAddress from '@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue'
export default {
	data() {
		return {
			mapAddressName: '',
			addressData: {
				name: '',
				phoneNumber: '',
				province: '',
				city: '',
				region: '',
				detailAddress: '王宫村服务站',
				defaultStatus: 1,
				def: false
			},
			lotusAddressData: {
				visible: false,
				provinceName: '',
				cityName: '',
				townName: ''
			},
			chooseValue: '',
			range: [
				{
					content: '王宫村'
				},
				{
					content: '土山村'
				},
				{
					content: '马庄村'
				}
			],
			chooseValueAddress: '',
			rangeAddress: [],
			valueszd: '',
			rangeszd: [
				{
					value: '王宫村',
					text: '王宫村'
				},
				{
					value: '土山村',
					text: '土山村'
				},
				{
					value: '马庄村',
					text: '马庄村'
				}
			],
			valueqhd: '',
			rangeqhd: [],
			mapAddress: {}
		}
	},
	onLoad(option) {
		let title = '新增收货地址'
		if (option.type === 'edit') {
			title = '编辑收货地址'
			this.addressData = JSON.parse(option.data)
			this.addressData.postCode=''
			this.addressData.province=''
			this.addressData.city=''
			this.addressData.areaId=''
			this.addressData.longitude=''
			this.addressData.latitude=''
			this.valueszd = this.addressData.region
			this.valueqhd = this.addressData.detailAddress
		}
		this.manageType = option.type
		uni.setNavigationBarTitle({
			title: title
		})
		this.initAddressData()
	},
	methods: {
		initAddressData() {
			let _this = this
			Api.apiCall('get', Api.build.wuyeCompanyWithCommunity, {}).then(res => {
				_this.mapAddress = res
				_this.rangeszd = []
				for (var name in res) {
					_this.rangeszd.push({ value: name, text: name })
				}
				if (_this.manageType === 'edit') {
					console.log('fFFFF',_this.addressData)
					_this.valueszd = _this.addressData.region
					_this.rangeqhd= []
					for (var i in _this.mapAddress[_this.addressData.region]) {
						_this.rangeqhd.push({ value: _this.mapAddress[_this.addressData.region][i], text: _this.mapAddress[_this.addressData.region][i] })
					}
					_this.valueqhd = _this.addressData.detailAddress
				}				
			})
		},
		change(res) {
			console.log('res', res)
			console.log('chooseValue', this.chooseValue)
			// let index = this.range.findIndex((item) => item.value == res)
			this.addressData.region = res.content
			// this.chooseValue = res.content
			console.log('region》》》', this.addressData.region)
			console.log('chooseValue》》》', this.chooseValue)
			this.rangeAddress = []
			this.valueb = []
			for (var i in this.mapAddress[res.content]) {
				this.rangeAddress.push({ content: this.mapAddress[res.content][i] })
			}
			this.chooseValueAddress = null
		},
		changeAddress(res) {
			console.log('res', res)
			// let index = this.range.findIndex((item) => item.value == res)
			this.addressData.detailAddress = res.content
			this.chooseValueAddress = res.content
			console.log('regionxxx》》》', res.content)
		},
		changeszd(res) {
			this.addressData.region = res
			this.valueszd = res
			this.rangeqhd= []
			for (var i in this.mapAddress[res]) {
				this.rangeqhd.push({ value: this.mapAddress[res][i], text: this.mapAddress[res][i] })
			}
			this.valueqhd = ''
			this.addressData.detailAddress = ''
		},
		changeqhd(res) {
			this.addressData.detailAddress = res
			this.valueqhd = res
		},

		switchChange(e) {
			this.addressData.defaultStatus = e.detail.value ? 1 : 0
			this.addressData.def = e.detail.value
		},

		openMap() {
			var _this = this
			uni.chooseLocation({
				success: function(res) {
					console.log('res', res)

					_this.addressData.latitude = res.latitude
					_this.addressData.longitude = res.longitude
					_this.mapAddressName = res.address + res.name
					_this.addressData.detailAddress = res.address + res.name
					console.log('经度：' + res.longitude)
					console.log('详细地址：' + res.address)
					console.log('纬度：' + res.latitude)
				}
			})
		},
		choseValue(res) {
			//res数据源包括已选省市区与省市区code
			this.lotusAddressData.visible = false //visible为显示与关闭组件标识true显示false隐藏
			if (res.isChose) {
				console.log(res)
				this.lotusAddressData.provinceName = res.provice //省
				this.lotusAddressData.cityName = res.city //市
				this.lotusAddressData.townName = res.town //区

				//赋值到addressData
				this.addressData.province = res.provice
				this.addressData.city = res.city
				this.addressData.region = res.town
			}
		},

		//提交
		async confirm() {
			const that = this
			let data = this.addressData
			console.log('data》》》', data)
			if (!data.name) {
				this.$api.msg('请填写收货人姓名')
				return
			}
			if (!/^1[1-9][0-9]\d{8}$/.test(data.phoneNumber)) {
				that.$api.msg('请输入正确的手机号码')
				return
			}
			// if (!data.province) {
			// 	that.$api.msg('请选择省市区');
			// 	return
			// }
			// if (!data.city) {
			// 	that.$api.msg('请选择二级城市')
			// 	return
			// }
			if (!data.region) {
				that.$api.msg('请选择所在地')
				return
			}
			if (!data.detailAddress) {
				that.$api.msg('请选择取货点')
				return
			}

			let data1 = await Api.apiCall('post', Api.goods.addressSave, that.addressData)
			if (data1) {
				this.$api.msg(`保存成功`)
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 800)
			} else {
				this.$api.msg(`保存失败`)
			}
		}
	},
	components: {
		'lotus-address': lotusAddress
	}
}
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}

	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}

	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}

.default-row {
	margin-top: 16upx;

	.tit {
		flex: 1;
	}

	switch {
		transform: translateX(16upx) scale(0.9);
	}
}

.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
