<template>
	<view class="page-bottom-fixed backcor9">
		<form @submit="form_submit" class="form-container">
			<view class="pd-main height100">
				<view class="form-gorup  backcolorfff">
					<!-- <view class="form-gorup-item-left">
						<view class="form-gorup-title marb10">联系人<text class="form-group-tips-must">*</text></view>
						<input type="text" name="name" v-model="userAddress.name" maxlength="5"
							placeholder-class="corf6" class="fcor666 " placeholder="联系人2~5个字符">
					</view>
					<view class="form-gorup-item-right">
						<view class="form-gorup-title marb10">联系电话<text class="form-group-tips-must">*</text></view>
						<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
							placeholder-class="corf6" class="fcor666" placeholder="手机号">
					</view> -->
					<!--  -->
					
						<view class="form-gorup-title">联系人<text class="form-group-tips-must">*</text>
						</view>
						<input type="text" name="name" v-model="userAddress.name" 
						placeholder-class="corf6" class="fcor666 bs-bb" placeholder="联系人2~5个字符">
					
					<view class="width100 mart10 border-b">
						
					</view>
					
					<view class="form-gorup-title">联系电话<text class="form-group-tips-must">*</text>
					</view>
					<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
						placeholder-class="corf6" class="fcor666" placeholder="手机号">
					
					<!--  -->
				</view>

				<view class="form-gorup backcolorfff">
						<view class="">
							<pick-regions :defaultRegion="defaultRegionCode"  @getRegion="handleGetRegion">
								<view class="dis-flex flex-sp form-gorup-title">
									<view class=" flex-1">点击选择省市区<text class="form-group-tips-must">必选</text></view>
									
									<view class="icon-ymt to-right font14 fcor666">
									
									</view>
								</view>
								
							</pick-regions>
							<view class=" pickRes fcor666" >{{userAddress.region || '请选择'}}</view>
						</view>
						
						<view class="width100 mart10  border-b">
							
						</view>
					

					<view style="clear: both;">
						<view class="form-gorup-title">详细地址<text class="form-group-tips-must">*</text>

						</view>
						<input type="text" name="address" v-model="userAddress.address" maxlength="40"
							placeholder-class="corf6" :class="'fcor666 bs-bb '" placeholder="详细地址1~40个字符">

					</view>

				</view>

				<view class="default-checkbox " @click="defaultChange">
					<radio :checked="userAddress.is_default" style="transform:scale(1.1)" color="#FF1A34" />
					<text class="font18">设为默认地址</text>
				</view>

				<view class="bottom-fixed ">
					<button class="btn " type="default" form-type="submit">保存</button>
				</view>
			</view>
			


		</form>
		
	</view>
</template>
<script>
	
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	
	import {insertDeliveryAddress,findDeliveryAddressById,updateDeliveryAddress } from '@/Utils/physicalObject.js'
	export default {
		data() {
			return {
				userAddress: {
					name: "",
					tel: "",
					region: '',
					address: "",
					is_default: false,
				},
				dataParams: null,
				// 
				region: [],
				regionId:'',
				//没用上
				defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '110101',
				
			
			};
		},

		components: {
			pickRegions

		},

		onLoad(params) {
			this.dataParams = params
		},
		watch:{
			'userAddress.name':{
				handler(n) {
						if(n.length>5){
							setTimeout(()=>{
								this.userAddress.name = this.userAddress.name.substr(0,5)
							},0)
						}	
					},
			},
		},
		computed: {
			
			// regionName() {
			// 	// 转为字符串
			// 	// console.log('==============='+this.region.map(item => item))
			// 	// this.userAddress.region = this.region.map(item => item.name).join(',')
			// 	return this.region.map(item => item.name).join(',')
			// }
		},
		onReady() {
			uni.setNavigationBarTitle({
			    title: '地址'+(((this.dataParams.id || null) == null) ? '添加' : '编辑')
			});
			if(this.dataParams.id){
				this.findAddressById(this.dataParams.id)
			}

		},



		methods: {
			findAddressById(id){
				let params = {
					id:id
				}
				findDeliveryAddressById(params).then(res=>{
					if (res.return_code == '000000') {
						let resData = res.return_data;
								this.userAddress = {
									name: resData.consignee,
									tel: resData.phone,
									region: resData.regionName,
									address: resData.address,
									is_default: resData.whetherDefault,
								}
								// console.log(this.defaultRegionCode)
								this.defaultRegionCode = resData.regionId;
								this.regionId = resData.regionId;
								// console.log(this.defaultRegionCode)
					
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			
			// 获取选择的地区
			handleGetRegion(region) {
				// let region = JSON.parse(JSON.stringify(reg))
				this.region = region;
				this.regionId = this.region[2].code;
				if(region[0].code == region[1].code&&region[0].code == region[2].code){
					this.userAddress.region = this.region[0].name
				}else{
					this.userAddress.region = this.region.map(item => item.name).join(',');
				}
				
				console.log(this.userAddress.region,"获取选择的地区",this.regionId,this.region)
			},
			// 获取数据
			init() {
				
			},
			
			


			// 默认地址设置改变
			defaultChange(e) {
				this.userAddress.is_default = !this.userAddress.is_default
			},



			// 数据提交
			form_submit() {
				// 数据校验
				var validation = [{
						fields: "name",
						msg: "请填写联系人"
					},
					{
						fields: "tel",
						msg: "请填写联系电话",
						vali:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					},
					{
						fields: "region",
						msg: "请选择省市区"
					},
					{
						fields: "address",
						msg: "请填写详细地址"
					}
				];

				this.fields_check(this.userAddress, validation)
				
				let isVali = this.fields_check(this.userAddress, validation);
				if(isVali){
					if(this.dataParams.id){
						this.updateAddress(this.dataParams.id)
					}else{
						this.addAddress()
					}
					
					
				}

			},
			updateAddress(id){
				let _this = this;
				let params ={
					"id": id,
					"address": _this.userAddress.address,
					"consignee": _this.userAddress.name,
					"phone": _this.userAddress.tel,
					"regionId": _this.regionId,
					"regionName":_this.userAddress.region,
					"whetherDefault": _this.userAddress.is_default
				}
				updateDeliveryAddress(params).then(res=>{
					let title ;
					if (res.return_code == '000000') {
							title = res.return_data;				
					}else{
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})
					//调用上一个页面中的方法
					this.backPageRefresh();		
				})
			},
			 backPageRefresh() {      
				uni.navigateBack({})
			},
			addAddress(){
				let _this = this;
				let params={
					"address": _this.userAddress.address,
					"consignee": _this.userAddress.name,
					"phone": _this.userAddress.tel,
					"regionId": _this.regionId,
					"regionName":_this.userAddress.region,
					"whetherDefault": _this.userAddress.is_default
				}
				// console.log(params,this.userAddress)
				insertDeliveryAddress(params).then(res=>{
					let title ;
					if (res.return_code == '000000') {
							title = res.return_data;				
					}else{
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})
					
					//调用上一个页面中的方法
					_this.backPageRefresh()
					
						
				})
			},
			
			/**
			 * 字段数据校验
			 * data           待校验的数据, 一维json对象
			 * validation     待校验的字段, 格式 [{fields: 'mobile', msg: '请填写手机号码', is_can_zero: 1(是否可以为0)}, ...]
			 */
			fields_check(data, validation) {

				for (var i in validation) {
					var temp_value = data[validation[i]["fields"]];
					if (!temp_value) {
						uni.showToast({
							title: validation[i]['msg'],
							duration: 1000,
							icon: 'none'
						});
						return false;
					}
					
					if(validation[i]["vali"]){
						// console.log(validation[i]["vali"].test(this.userAddress.tel),this.userAddress.tel)
						if(!(validation[i]["vali"].test(this.userAddress.tel))){
							uni.showToast({
								title: "请输入正确格式的手机号码",
								duration: 1000,
								icon: 'none'
							});
							return false;
						}
					}
					
				}
				return true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.padding-main {
		padding: 20rpx;
	}

	.bottom-fixed {
		position: fixed;
		left: 10%;
		bottom:var(--window-bottom);
		border: none;
		width: 80%;
		box-sizing: border-box;
		z-index: 2;
		.btn{
			height: 60px;
			border-radius: 30px;
			background-color: #3da7e7;
			margin-bottom: 15px;
			color: #ffffff;
			line-height: 60px;
			font-size: 18px;
		}
	}


	.page-bottom-fixed {
		height: calc(100vh - var(--window-top));
		padding-bottom: 100px;
		box-sizing: border-box;
	}

	/*表单*/
	.form-container {
		height: 100%;

		.form-gorup {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: auto;

			.pickRes , input {
				border-radius: 0;
				box-sizing: border-box;
				font-size: 18px;
				// height: 30px;
				// min-height: 60px;
				// line-height: 30px;
				// padding: 8px 0;
			}

		}

		.form-gorup-title {
			padding: 20rpx 0;
			margin-bottom: 5rpx;
			font-weight: 500;
			font-size: 18px;
		}
	}

	.form-gorup-item-left {
		float: left;
		padding-right: 20rpx;
	}

	.form-group-tips-must {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #f00;
	}

</style>
