<template>
	<view>
		<view class="head">
			<div class="df aic jcsb">
				<div class="consignee">收货人</div>
				<div class="number">
					<input type="text" placeholder="请输入姓名" v-model="name" style="text-align: right;" @blur="changename">
				</div>
			</div>
			<div class="xujks"></div>
			<div class="df aic jcsb">
				<div class="consignee">手机号码</div>
				<div class="number"><input type="text" placeholder="请输入手机号" v-model="number" style="text-align: right;"
						@blur="changenumber"></div>
			</div>
			<div class="xujks"></div>
			<div class="df aic jcsb">
				<div class="consignee">所在地区</div>
				<div class="df number" @click="show=true">
					<div class="number" v-if="address.length>0">{{address}}</div>
					<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/position.png`)"></image>
				</div>
			</div>
			<div class="xujks"></div>
			<div class="df aic jcsb">
				<div class="consignee">详细地址</div>
				<div class="number">
					<div class="number"><input type="text" placeholder="请输入详细地址" v-model="detailed"
							style="text-align: right;" @blur="changedetailed"></div>
				</div>

			</div>
			<div class="xujks"></div>
			<div class="df aic jcsb">
				<div class="consignee">是否默认地址</div>
				<u-switch activeColor="#0CEA38" v-model="value" @change="change"></u-switch>
			</div>
			<div class="df aic jcsa preserve" @click="btn">保存</div>
			<u-picker @cancel="show=false" @close="show=false" closeOnClickOverlay @confirm="confirm" :show="show"
				:columns="columns"></u-picker>
			<u-picker @cancel="show1=false" @close="show1=false" closeOnClickOverlay @confirm="confirmone" :show="show1"
				:columns="columnslist"></u-picker>
			<u-picker @cancel="show2=false" @close="show2=false" closeOnClickOverlay @confirm="confirmtwo" :show="show2"
				:columns="columnqu"></u-picker>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				show: false,
				show1: false,
				show2: false,
				list: [], //
				columns: [],
				columnslist: [],
				columnslits: [],
				columnqu: [],
				market: [],
				distinguishname: [],
				economize: '', //省id
				distinguish: '', //市的id
				jioauk: '', //区的id
				name: '', //姓名
				number: '', //手机号
				detailed: '', //x详细地址
				economizename: '', //省name
				distinguishme: '', //区name
				marketname: '', //市name
				address: '', //地址
				longitude: '30.67', //经度
				latitude: '104.06', //纬度
				consentto: false, //是否默认地址   是1  0否
				id: 0, //客户id
				sid: '',
				shop: ''
			};
		},
		onLoad(id) {
			this.sid = id.id
			this.shop = id.shop
		},

		onShow() {
			let _this = this
			this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data.group_id, '用户信息');
					_this.id = res.data.group_id
				}
			})
			//获取省list
			this.$api.sendRequest({
				url: '/api/address/lists',
				data: {
					pid: 0
				},
				success: res => {
					let a = []
					this.list = res.data
					for (var i = 0; i < res.data.length; i++) {
						a.push(res.data[i].name)
					}
					_this.columns = [a]
				}
			})
			//系统获取经纬度
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.longitude = res.longitude
					_this.latitude = res.latitude
					console.log(res.latitude, res.longitude);
				}
			});
		},
		methods: {
			change(e) {
				// console.log('list', e);
				if (e) {
					this.consentto = 1
				} else {
					this.consentto = 0
				}
			},
			//省  获得市list
			confirm(e) {
				this.economizename = e.value[0]
				let _this = this
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].name == e.value[0]) {
						_this.economize = _this.list[i].id
					}
				}
				this.$api.sendRequest({
					url: '/api/address/lists',
					data: {
						pid: _this.economize
					},
					success: res => {
						let a = []
						this.columnslits = res.data
						// console.log(res.data,'daa');
						for (var i = 0; i < res.data.length; i++) {
							a.push(res.data[i].name)
						}
						_this.columnslist = [a]
						// console.log(_this.columnslist,'box');
						this.show1 = true
						this.show = false
					}
				})

			},
			//市
			confirmone(e) {
				this.marketname = e.value[0]
				let _this = this
				for (var i = 0; i < this.columnslits.length; i++) {

					if (_this.columnslits[i].name == e.value[0]) {
						_this.distinguish = _this.columnslits[i].id
					}

				}
				this.$api.sendRequest({
					url: '/api/address/lists',
					data: {
						pid: _this.distinguish
					},
					success: res => {
						let a = []
						this.distinguishname = res.data
						for (var i = 0; i < res.data.length; i++) {
							a.push(res.data[i].name)
						}
						this.columnqu = [a]
						this.show2 = true
						this.show1 = false
					}
				})
			},
			//区
			confirmtwo(e) {
				this.distinguishme = e.value[0]
				let _this = this
				for (var i = 0; i < this.distinguishname.length; i++) {
					if (_this.distinguishname[i].name == e.value[0]) {
						_this.jioauk = _this.distinguishname[i].id
					}
				}
				this.show2 = false
				this.address = this.economizename + '' + this.marketname + '' + this.distinguishme
			},
			cancel() {
				this.show = false
			},
			changename(e) {
				this.name = e.detail.value
			},
			changenumber(e) {
				this.number = e.detail.value
			},
			changedetailed(e) {
				this.detailed = e.detail.value
			},
			btn() {
				if (!this.name.length > 0) {
					this.$util.showToast({
						title: '请填写收货人姓名'
					});
					return
				}
				if (!this.number.length > 0) {
					this.$util.showToast({
						title: '请填写手机号'
					});
					return
				}
				if (!this.address.length > 0) {
					this.$util.showToast({
						title: '请选择地区'
					});
					return
				}
				// if(!this.address.length>0){
				// 	this.$util.showToast({
				// 		title: '请填写详细地址'
				// 	});
				// 	return
				// }
				if (!this.detailed.length > 0) {
					this.$util.showToast({
						title: '请填写详细地址'
					});
					return
				}
				//手机号正则
				let regular =
					/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
				if (!regular.test(this.number)) {
					this.$util.showToast({
						title: '请填写正确的手机号'
					});
					return
				}
				if (this.consentto == false) {
					this.consentto = 0
				}
				let _this = this
				this.$api.sendRequest({
					url: '/api/salesmemberaddress/add',
					data: {
						member_id: _this.sid, //客户id   
						name: _this.name, //用户姓名
						mobile: _this.number, //手机
						telephone: _this.number, //联系电话
						province_id: _this.economize, //省id
						city_id: _this.distinguish, //市id
						district_id: _this.jioauk, //区县id
						address: _this.address, //地址信息
						full_address: _this.detailed, //详细地址信息
						// longitude:_this.longitude,//经度
						// latitude:_this.latitude,//纬度
						is_default: _this.consentto, //是否是默认地址 0否 1是
						community_id: 0,
						// store_id:_this.shop
					},
					success: res => {
						this.$util.showToast({
							title: '保存成功'
						});

						setTimeout(() => {
							uni.navigateBack()
						}, 500)
						// setTimeout(()=>{
						// 	uni.$emit('defi',_this.datalist)
						// },500)
						// setTimeout(()=>{
						// 	uni.navigateTo({
						// 		url:`/page_salesman_customer/Shipping_address/Shipping_address?id=${_this.sid}`
						// 	})
						// },500)

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 686rpx;
		height: 528rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 40rpx 32rpx;
		box-sizing: border-box;

		.consignee {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.name {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.number {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.xujks {
			width: 622rpx;
			height: 1rpx;
			background: #E8E8E8;
			border-radius: 2rpx;
			margin: 30rpx 0;
		}

		.preserve {
			width: 690rpx;
			height: 80rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			position: fixed;
			bottom: 82rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>