<template>
	<view class="new-address-page">
		<NavCom title="添加新地址"></NavCom>
		<view class="main">
			<view class="address-main">
				<view class="address-item">
					<view class="shu"></view>
					<view class="item">
						<view class="title">收货人</view>
						<input type="text" class="value" v-model="form.receiver" placeholder="请填写收货人" placeholder-class="value-placeholder">
					</view>
				</view>
				<view class="address-item">
					<view class="shu"></view>
					<view class="item">
						<view class="title">联系电话</view>
						<input type="text" class="value" v-model="form.phone" placeholder="请填写收货人电话号码" placeholder-class="value-placeholder">
					</view>
				</view>
				<view class="address-item">
					<view class="shu"></view>
					<view class="item">
						<view class="title">所在地区</view>
						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" style="width: 500rpx;height: 30rpx;z-index: 99;"></pick-regions>
						<input type="text" class="value address-value" disabled v-model="regionName" placeholder="请选择所在地区" placeholder-class="value-placeholder">
					</view>
				</view>
				<view class="address-item" >
					<view class="shu"></view>
					<view class="item" style="border-bottom: none;">
						<view class="title">详细地址</view>
						<input type="text" class="value" v-model="form.address" placeholder="请填写详细地址" placeholder-class="value-placeholder">
					</view>
				</view>
			</view>
			<!-- <view class="address">
				<view class="address-info">
					<view class="info-label">收货人</view>
					<input type="text" placeholder="请填写收货人" class="address-input" v-model="form.receiver">
				</view>
			</view>
			<view class="address">
				<view class="address-info">
					<view class="info-label">联系电话</view>
					<input type="text" placeholder="收货人电话号码" class="address-input" v-model="form.phone">
				</view>
			</view> -->
			<!-- <view class="address">
				<view class="address-info">
					<view class="info-label">所在地区</view>
					<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" style="width: 500rpx;height: 30rpx;z-index: 99;">
					</pick-regions>
					<input type="text" disabled class="address-input address-value" style="z-index: 1;" placeholder="请选择" v-model="regionName"
						readonly="readonly">
				</view>
				<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/ar.png" mode="" class="address-img"></image>
			</view> -->
			<!-- <view class="address">
				<view class="address-info">
					<view class="info-label-textarea">详细地址</view>
					<textarea placeholder="请输入" class="address-textarea" v-model="form.address"></textarea>
				</view>
			</view> -->
		</view>
		<view class="default">
			<view class="default-title">设为默认地址</view>
			<view class="default-img default-yes" v-if="form.isDefault === 1" @click="setDefault">
				<image src="@/static/mine/y.png" mode="" class="status"></image>
			</view>
			<view class="default-img default-no" v-if="form.isDefault === 0" @click="setDefault">
				<image src="@/static/mine/y.png" mode="" class="status"></image>
			</view>
			<!-- <image src="@/static/mine/s.png" mode="" class="default-img" v-if="form.isDefault === 1" @click="setDefault"></image>
			<image src="@/static/mine/n.png" mode="" class="default-img" v-if="form.isDefault === 0" @click="setDefault"></image> -->
			<!-- <image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/ad.png" mode="" class="default-img" v-if="form.isDefault === 1" @click="setDefault"></image>
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/nd.png" mode="" class="default-img" v-if="form.isDefault === 0" @click="setDefault"></image> -->
		</view>
		<view class="footer" @click="save">保存收货地址</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { addAddress,addressDetail,editAddress } from '@/API/user.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import NavCom from '@/pages/components/nav.vue'
	export default{
	mixins: [myMixins],
		data(){
			return {
				visible:false,
				id:"",
				region: [],
				defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '',
				form:{
					receiver:"",//收货人
					phone:"",//联系电话
					province:"",//省份
					city:"",//城市
					area:"",//城区
					address:"",//详细地址
					isDefault:0,//是否默认{0:否,1:是
				}
			}
		},
		components:{pickRegions,NavCom},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.join('-')
			},
			regionNameList() {
				// 转为字符串
				return this.region
			},
		},
		onLoad(opation) {
			console.log(opation)
			this.id = opation.id ? opation.id : ''
			// 有id时获取详情
			if(this.id){
				this.getDetail()
			}
		},
		methods:{
			// 获取详情
			getDetail(){
				uni.showLoading()
				addressDetail(this.id).then(res => {
					uni.hideLoading()
					console.log(res)
					if(res.code === 200){
						this.region = [res.data.province,res.data.city,res.data.area]
						this.form = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 设置默认地址
			setDefault(){
				if(this.form.isDefault === 0){
					this.form.isDefault = 1;
				}else{
					this.form.isDefault = 0;
				}
			},
			// 保存收货地址
			save(){
				if(!this.form.receiver){
					this.$api.msg('请输入收货人');
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.form.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				if(this.region.length > 0){
					this.form.province = this.region[0]
					this.form.city = this.region[1]
					this.form.area = this.region[2]
				}else{
					this.$api.msg('请选择地址');
					return;
				}
				if(!this.form.address){
					this.$api.msg('请输入详细地址');
					return;
				}
				uni.showLoading()
				if(this.id){
					editAddress(this.id,this.form).then(res => {
						uni.hideLoading()
						console.log(res)
						if(res.code === 200){
							uni.navigateBack()
						}else{
							this.$api.msg(res.message)
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}else{
					addAddress(this.form).then(res => {
						uni.hideLoading()
						console.log(res)
						if(res.code === 200){
							uni.navigateBack()
						}else{
							this.$api.msg(res.message)
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}
				
			},
			// 获取选择的地区
			handleGetRegion(region) {
				// debugger
				this.region = region.map(({
					name
				}) => name);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.new-address-page{
		
		.main{
			// height:100vh;
			padding-top: 130rpx;
			.address-main{
				width: 707rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 0rpx 35rpx 0 24rpx;
				margin-left: 22rpx;
				.address-item{
					display: flex;
					align-items: center;
					height: 112rpx;
					.shu{
						width: 8rpx;
						height: 18rpx;
						background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
						border-radius: 13rpx;
						margin-right: 13rpx;
					}
					.item{
						display: flex;
						align-items: center;
						width: 626rpx;
						height: 112rpx;
						border-bottom: 1px solid #EEEEEE;
						position: relative;
						.title{
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							width: 150rpx;
						}
						.value{
							font-size: 28rpx;
							color: #333333;
						}
						.address-value{
							position: absolute;
							top: 36rpx;
							left: 150rpx;
						}
						.value-placeholder{
							font-size: 28rpx;
							color: #888888;
						}
					}
				}
			}
			// background-color: #fff;
			.address{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 60rpx;
				.address-info{
					display: flex;
					align-items: center;
					position: relative;
					.info-label{
						width: 112rpx;
						font-size: 28rpx;
						color: #000000;
						font-weight: 800;
					}
					.address-input{
						width: 452rpx;
						margin-left: 38rpx;
						font-size: 32rpx;
						color: #333;
					}
					.address-value{
						position: absolute;
						top: 0;
						left: 108rpx;
					}
					.info-label-textarea{
						height: 100rpx;
						width: 112rpx;
						font-size: 28rpx;
						color: #000000;
						font-weight: 800;
					}
					.address-textarea{
						width: 432rpx;
						height: 100rpx;
						margin-left: 38rpx;
						font-size: 32rpx;
						color: #333;
					}
				}
				
				.address-img{
					width: 8rpx;
					height: 16rpx;
				}
			}
		}
		.default{
			width: 707rpx;
			height: 109rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-left: 22rpx;
			margin-top: 22rpx;
			padding: 0 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.default-title{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.default-img{
				width: 63rpx;
				height: 31rpx;
				padding: 0rpx 6rpx;
				border-radius: 25rpx;
				display: flex;
				align-items: center;
				.status{
					width: 22rpx;
					height: 22rpx;
				}
			}
			.default-yes{
				background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
				justify-content: flex-end;
			}
			.default-no{
				background: #E5E5E5;
			}
		}
		.footer{
			width: 706rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
			border-radius: 44rpx;
			margin-left: 22rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 49rpx;
		}
	}
</style>