<template>
	<view class="page">
		<view class="box">
			<view class="item">
				<view class="left">姓名</view>
				<view class="right">
					<input type="text" :value="name" placeholder="请输入姓名" @input="entername" />
					<!-- <image src="../../static/right.png" mode="widthFix" /> -->
				</view>
			</view>
			
			<view class="item">
				<view class="left">联系方式</view>
				<view class="right">
					<input type="text" :value="phone" placeholder="请输入手机号码" @input="enterphone" />
					<!-- <image src="../../static/right.png" mode="widthFix" /> -->
				</view>
			</view>
			<view class="item">
				<view class="left">地区</view>
				<view class="right">
					<picker @change="bindproChange" :value="proindex" :range="proarray" range-key="name">
						<view class="uni-input">{{proname}}</view>
					</picker>
					<view class="uni-input" v-if="province_id==''" @click="selectcity">{{cityname}}</view>
					<picker @change="bindcityChange" :value="cityindex" :range="cityarray" range-key="name" v-else>
						<view class="uni-input">{{cityname}}</view>
					</picker>
					<view class="uni-input" v-if="city_id==''" @click="selarea">{{areaname}}</view>
					<picker @change="bindareaChange" :value="areaindex" :range="arearray" range-key="name" v-else>
						<view class="uni-input">{{areaname}}</view>
					</picker>
					
					<!-- <input type="text" value="" placeholder="请选择所在地区" /> -->
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="item">
				<view class="left">详细地址</view>
				<view class="right">
					<input type="text" :value="address" placeholder="详细地址须填写楼栋楼层或房间号信息" @input="enteraddress" />
					<!-- <image src="../../static/right.png" mode="widthFix" /> -->
				</view>
			</view>
		</view>
		<view class="btn" @click="sureadd">确认</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				name: '',
				phone: '',
				province_id: '',
				city_id: '',
				county_id: '',
				address: '',
				proarray:[],
				proindex:'',
				proname:'请选择省',
				cityname:'请选择市',
				cityindex:'',
				cityarray:[],
				arearray:[],
				areaindex:'',
				areaname:'请选择区',
				type:'',
				addressid:'',
				item:''
				
				
			}
		},
		onLoad(options) {
			if(options.type!=undefined){
				this.type=options.type;
				this.addressid=options.id;
				this.item=JSON.parse(options.item);
				this.name=this.item.name;
				this.phone=this.item.phone;
				this.address=this.item.address;
				this.province_id=this.item.province_id;
				this.city_id=this.item.city_id;
				this.county_id=this.item.county_id;
				this.proname=this.item.province_name;
				this.cityname=this.item.city_name;
				this.areaname=this.item.county_name;
				this.getprovince();
				this.getcity();
				this.getarea();
			}
			 this.getprovince();
		},
		methods: {
			// 输入姓名
			entername(e) {
				this.name = e.detail.value
			},
			// 输入电话号
			enterphone(e) {
				this.phone = e.detail.value
			},
			// 输入地址
			enteraddress(e) {
				this.address = e.detail.value
			},
			
			//获取省
			getprovince(){
				let that=this;
				var url = 'user_address/get_province';
				var params = {
					
				
				}
				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.proarray=res.data.data;
					that.proarray.forEach(function(value,index,array){
						if(that.province_id==value.id){
							that.proindex=index
						}
						
					})
				
				
				}).catch((err) => {
					console.log(err)
				
				})
			},
			bindproChange(e){
				this.proname=this.proarray[e.target.value].name;
				this.proindex=e.target.value;
				this.province_id=this.proarray[e.target.value].id
				this.getcity();
			},
			// 获取市
			getcity(){
				let that=this;
				var url = 'user_address/get_city';
				var params = {
					province_id:that.province_id,
				}
				
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.cityarray=res.data.data;
					console.log(that.cityarray);
					console.log('2393883843',that.city_id);
					that.cityarray.forEach(function(value,index,array){
						if(that.city_id==value.id){
							that.cityindex=index
						}
						
					})
				
				
				}).catch((err) => {
					console.log(err)
				
				})
			},
			selectcity(){
				if(this.province_id==''){
					uni.showToast({
						title:'请选择省',
						icon:'none'
					})
					return  false
				}
			},
				
			//选择市
			bindcityChange(e){
				
				this.cityname=this.cityarray[e.target.value].name;
				this.cityindex=e.target.value;
				this.city_id=this.cityarray[e.target.value].id
				this.getarea();
			},
			// 获取区
			getarea(){
				let that=this;
				var url = 'user_address/get_county';
				var params = {
					city_id:that.city_id,
				}
				
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.arearray=res.data.data;
					that.arearray.forEach(function(value,index,array){
						if(that.county_id==value.id){
							that.areaindex=index
						}
						
					})
				
				
				}).catch((err) => {
					console.log(err)
				
				})
			},
			selarea(){
				if(this.city_id==''){
					uni.showToast({
						title:'请选择市',
						icon:'none'
					})
					return  false
				}
			},
				
			//选择区
			bindareaChange(e){
				this.areaname=this.arearray[e.target.value].name;
				this.areaindex=e.target.value;
				this.county_id=this.arearray[e.target.value].id
				
			},
				
			//确认添加地址
			sureadd() {
				let that = this;
				if(that.name==''){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return false
				}
				
				if(that.phone==''){
					uni.showToast({
						title:'请输入联系方式',
						icon:'none'
					})
					return false
				}
				if(that.phone!=''){
					var reg=/^[1][3,4,5,6,,7,8,9][0-9]{9}$/;
					if(!reg.test(that.phone)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						
						return false
					}
				}
				if(that.province_id==''){
					uni.showToast({
						title:'请选择省',
						icon:'none'
					})
					return false
				}
				if(that.city_id==''){
					uni.showToast({
						title:'请选择市',
						icon:'none'
					})
					return false
				}
				if(that.county_id==''){
					uni.showToast({
						title:'请选择区',
						icon:'none'
					})
					return false
				}
				if(that.address==''){
					uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
					return false
				}
				if(that.type==1){
					that.editaddress();
				}else{
					that.adddizhi()
				}
				
			},
			//添加地址
			adddizhi(){
				let that=this;
				var url = 'user_address/add_user_address';
				var params = {
					name: that.name,
					phone: that.phone,
					province_id: that.province_id,
					city_id: that.city_id,
					county_id: that.county_id,
					address: that.address,
				
				}
				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					uni.showToast({
						title:'添加地址成功',
						icon:'none'
					})
					
					setTimeout(function(){
						uni.navigateBack({
							checked:true
						})
					},1500)
					
				
				
				}).catch((err) => {
					console.log(err)
				
				})
			},
			
			// 编辑地址
			editaddress(){
				let that=this;
				var url = 'user_address/edit_user_address';
				var params = {
					user_address_id:that.addressid,
					name: that.name,
					phone: that.phone,
					province_id: that.province_id,
					city_id: that.city_id,
					county_id: that.county_id,
					address: that.address,
				
				}
				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					uni.showToast({
						title:'修改地址成功',
						icon:'none'
					})
					
					setTimeout(function(){
						uni.navigateBack({
							checked:true
						})
					},1500)
					
				
				
				}).catch((err) => {
					console.log(err)
				
				})
			},
		
		
		
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;

	}
	.uni-input{
		margin-right:20rpx;
	}
	.box {
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.item {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EDEDED;

	}

	.left {
		width: calc(100% -220rpx);
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.right {
		width: 550rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.right image {
		width: 32rpx;
		margin-left: 16rpx;
	}

	.right input {
		max-width: 476rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
	}

	.btn {
		width: 686rpx;
		height: 84rpx;
		background: rgba(194, 148, 69, 1);
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin: 100rpx auto; */
		position: fixed;
		bottom: 30rpx;
		left: 32rpx;
	}
</style>