<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="编辑地址"></el-navbar>
		
		<form @submit="formSubmit">
			<view class="wrapper">
				
				<view class="content">
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">姓名</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="accept_name" :value="data.accept_name" placeholder="请输入姓名" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">手机</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="mobile" :value="data.mobile" placeholder="请输入手机" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">地区</text>
							</view>
							<view class="form-item-input" @click.stop="onSelectArea">
								<input type="text" name="area_name" readonly :value="data.area_name" placeholder="请选择地区" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-item-body">
							<view class="form-item-icon">
								<text style="padding-right: 10rpx;">地址</text>
							</view>
							<view class="form-item-input">
								<input type="text" name="address" :value="data.address" placeholder="请输入地址" placeholder-class="form-item-placeholder" />
							</view>
						</view>
					</view>
						
				</view>
				
				<view class="form-submit">
					<view>
						<button :class="{ 'active': isFormActive == true }" form-type="submit">确 定</button>
					</view>
				</view>
				
			</view>
		</form>
		<el-address ref="scroll" :pid="areaId" @change='chooseSuccess'></el-address>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick, ref } from "vue";
	import { isEmpty,isMobile } from "@/el-ui/libs/check.js";
	import { redirectTo } from "@/el-ui/libs/navigate.js";
	
	let isFormActive = ref(false);
	let scroll 		 = ref();
	let areaId 		 = ref(0);
	let data   		 = ref({
		accept_name: "",
		mobile: "",
		area_name: "",
		address: "",
		province: 0,
		city: 0,
		area: 0,
		id: 0
	});
	
	const pages = getCurrentPages();
	const page  = pages.length >= 2 ? pages[pages.length - 2] : pages[pages.length - 1];
	onLoad((option)=>{
		uni.$http.get("ucenter.address/detail",{ id: option.id }).then(res=>{
			if(res.code && !isEmpty(res.data)){
				data.value = res.data;
			}
		})
	});
	
	const onSelectArea = ()=>{
		nextTick(()=>{
			scroll.value.open();
		});
	}
	
	const chooseSuccess = (value)=>{
		let array = ["province","city","area"];
		let areaName = [];
		for(let index in value.value){
			data.value[array[index]] = value.value[index].value;
			areaName.push(value.value[index].label);
		}
		
		data.value.area_name = areaName.join(",");
	}
	
	const formSubmit = (event)=>{
		let form = event.detail.value;
		if(isFormActive.value) return ;
		if(isEmpty(form.accept_name)){
			uni.$layer.showToast("请填写姓名");
			return false;
		}else if(isEmpty(form.mobile)){
			uni.$layer.showToast("请填写手机");
			return false;
		}if(!isMobile(form.mobile)){
			uni.$layer.showToast("您填写的手机号码不合法");
			return false;
		}if(isEmpty(form.address)){
			uni.$layer.showToast("请填写详情细地址");
			return false;
		}
		
		if(isEmpty(form.area_name)){
			uni.$layer.showToast("请选择所在地区");
			return false;
		}
		
		if(data.value.id > 0){
			form.id = data.value.id;
		}
		
		form.province = data.value.province;
		form.city 	  = data.value.city;
		form.area 	  = data.value.area;
		isFormActive.value = true;
		uni.$http.post("ucenter.address/editor",form).then(res=>{
			isFormActive.value = false;
			if(res.code){
				if(page.$page.fullPath.includes("cart/confirm")){
					redirectTo(page.$page.fullPath);
				}else{
					redirectTo("pages/ucenter/address/index");
				}
				
				uni.$layer.showToast(data.id > 0 ? "编辑成功" : "添加成功");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
</script>

<style lang="scss">
	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.content {
			width: 93%;
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 10rpx;
			.form-item {
				width: 90%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				.form-item-body{
					display: flex;
					flex-direction: row;
					padding: 35rpx 0;
					color: #555;
					box-sizing: border-box;
					position: relative;
					&.form-item-border::after {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						pointer-events: none;
						box-sizing: border-box;
						transform-origin: 0 0;
						width: 199.8%;
						height: 199.7%;
						transform: scale(0.5, 0.5);
						border-bottom: 1px solid #e5e5e5;
						z-index: 2;
					}
					
					.form-item-icon {
						margin-right: 15rpx;
						display: inline-flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;
					}
					
					.form-item-placeholder {
						color: #9fa3ab;
						font-size: 30rpx;
					}
					
					.form-item-input {
						position: relative;
						flex: 1;
						display: flex;
						flex-direction: row;
						padding: 0px;
						border-color: rgb(220, 223, 230);
						width: 90%;
						input {
							color: #333;
							font-size: 30rpx;
							width: 100%;
						}
					}
					
				}
			}
		}
		.form-submit {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			view {
				width: 93%;
				button {
					width: 100%;
					color: #ffffff;
					border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					height: 40px;
					line-height: 40px;
					border-radius: 35rpx;
					font-size: 32rpx;
					&.active {
						background-color: #ccc;
						color: #fff;
						border-color: #ccc;
					}
				}
			}
		}
	}
</style>