<!-- 添加地址 -->
<template>
	<navbar_neadVue title="添加地址" background_color="#ffffff"></navbar_neadVue>

	<view style="position: fixed; z-index: -1; background-color: #fbfbfb; top: 0; bottom: 0;left: 0;right: 0;"></view>


	<!-- 	<up-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index" isLink
		:icon="item.iconUrl" @click="showToast(item)">
	</up-cell> -->

	<view>
		<up-toast ref="uToastRef"></up-toast>
		<up-cell-group title-bg-color="rgb(243, 244, 246)">
		</up-cell-group>
	</view>


	<view class="box">
		<view class="boxview">
			<text>收货人</text>
			<view style="viewindex">
				<input v-model="form.name" placeholder="名字" class="Ninput" placeholder-class="plainput" />
				<text v-if="phoneError" class="error">{{ phoneError }}</text>
			</view>
		</view>
		<view style="height: 47rpx;"></view>
		<view class="boxview">
			<text>手机号码</text>
			<view style="viewindex">
				<input v-model="form.phone" placeholder="手机号" style="margin-left: 38rpx;" class="Ninput"
					placeholder-class="plainput" />
				<text v-if="phoneError" class="error">{{ phoneError }}</text>
			</view>
		</view>
		<view style="height: 47rpx;"></view>
		<view class="boxview">
			<text style="vertical-align: middle;">所在地区</text>
			<view style="viewindex">
				<picker mode="multiSelector" class="pickerclass" :range="range" :value="value" @change="onPickerChange"
					@columnchange="onColumnChange">
					<view style="float: right; margin: 20rpx;">
						<image style="width: 16rpx;height: 27rpx;" src="../../static/images/sign/rig.png"></image>
					</view>
					<view :class="['picker', { 'active-text': isPickerTapped }]">
						{{ displayText }}
					</view>

				</picker>
			</view>
		</view>
		<view style="height: 47rpx;"></view>
		<view class="boxview">
			<text style="margin-top: 10rpx;">详细地址</text>
			<view style="viewindex">
				<textarea v-model="form.detailedAddress" maxlength="200" class="textarea"
					placeholder-class="textareaclass" placeholder="小区楼栋/村落名称"></textarea>
				<text v-if="phoneError" class="error">{{ phoneError }}</text>
			</view>
		</view>


		<view class="havebottom">
			<image v-if="IsHave == true" @click="IsShow()" class="havebottomimage"
				src="../../static/images/sign/isH.png"></image>
			<image v-else @click="IsShow()" class="havebottomimage" src="../../static/images/sign/IsHave.png"></image>
			<text :class="IsHave == true ? 'havebotomisshowtext':'havebottomtext'">常用地址</text>
		</view>
	</view>


	<view class="butview" @click="submitForm()">
		<view class="but">
			<text>保存</text>
		</view>
	</view>


</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance,
		computed
	} from "vue";

	const {
		proxy
	} = getCurrentInstance();

	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import {
		addressData
	} from "./data";

	import {
		listSignAddress,
		getSignAddress,
		delSignAddress,
		addSignAddress,
		updateSignAddress,
		listSignAddressUser
	} from "@/api/signln/SignAddress/SignAddress";

	const IsHave = ref(false)

	// 定义响应式数据  
	const title = ref('');
	const description = ref('');
	const closable = ref(true);
	const IsAlert = ref(false)
	const phoneError = ref('');

	const form = ref({
		name: null,
		phone: null,
		address: null,
		detailedAddress: null,
		inCommonUse: null,
		userId: null
	});

	function IsShow() {
		IsHave.value = !IsHave.value;
	}
	const show = ref(false);
	const list = ref([{
		type: 'error',
		icon: false,
		title: '失败主题',
		message: "一弦一柱思华年",
		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
	}])


	// 计算属性  
	const getIcon = computed(() => {
		return path => {
			return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
		}
	});

	// 方法
	const uToastRef = ref(null)

	function showToast(params) {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				});
			}
		});
	}


	const range = ref([
		[],
		[],
		[]
	]);
	const value = ref([0, 0, 0]);
	const displayText = ref('省、市、区');

	const isPickerTapped = ref(false);
	const initRange = () => {
		const provinces = addressData.map(province => province.name);
		const cities = addressData[0].cities.map(city => city.name);
		const districts = addressData[0].cities[0].districts;

		range.value = [provinces, cities, districts];
	};

	const onColumnChange = (event) => {
		const column = event.detail.column;
		const val = event.detail.value;

		let updatedRange = [...range.value];
		let selectedValues = [...value.value];

		selectedValues[column] = val;

		if (column === 0) {
			const selectedProvince = addressData[val];
			const cities = selectedProvince.cities.map(city => city.name);
			const districts = selectedProvince.cities[0].districts;

			updatedRange[1] = cities;
			updatedRange[2] = districts;
			selectedValues[1] = 0;
			selectedValues[2] = 0;
		} else if (column === 1) {
			const selectedProvinceIndex = selectedValues[0];
			const selectedProvince = addressData[selectedProvinceIndex];
			const selectedCity = selectedProvince.cities[val];
			const districts = selectedCity.districts;

			updatedRange[2] = districts;
			selectedValues[2] = 0;
		}

		range.value = updatedRange;
		value.value = selectedValues;
	};

	const onPickerChange = (event) => {
		const selectedValues = event.detail.value;
		const selectedProvince = addressData[selectedValues[0]].name;
		const selectedCity = addressData[selectedValues[0]].cities[selectedValues[1]].name;
		const selectedDistrict = addressData[selectedValues[0]].cities[selectedValues[1]].districts[
			selectedValues[2]];


		displayText.value = `${selectedProvince} ${selectedCity} ${selectedDistrict}`;
		isPickerTapped.value = true;

		form.value.address = displayText.value;

	};

	const onPickerTap = () => {
		isPickerTapped.value = true;
	};

	initRange();

	// 监听 phone 的变化
	watch(form.value, (newvalue, oldvalue) => {
		validatePhone();
		if (newvalue) {
			phoneError.value = '';
		}
	});

	const validatePhone = () => {

		// if (form.value.name == null || form.value.name.length == 0) {
		// 	phoneError.value = "手机号码不能为空";
		// }

		if (form.value.name == null) {
			phoneError.value = "手机号码不能为空";
		}
		if (form.value.phone == null) {
			phoneError.value = "手机号码不能为空";
		}
		if (form.value.detailedAddress == null) {
			phoneError.value = "手机号码不能为空";
		}
	};


	function submitForm() {
		var ls = list.value[0];
		if (form.value.name == null || form.value.name.lenght == 0) {
			ls.message = "收货人姓名不能为空";
			showToast(ls);
			return;
		}
		if (form.value.phone == null || form.value.name.phone == 0) {
			ls.message = "手机号码不能为空";
			showToast(ls);
			return;
		}
		const regex = /^1[3-9]\d{9}$/;
		if (!regex.test(form.value.phone)) {
			ls.message = "手机号码格式错误";
			showToast(ls);
			return;
		}
		if (form.value.address == null) {
			ls.message = "选择省、市、区";
			showToast(ls);
			return;
		}
		if (form.value.detailedAddress == null || form.value.name.detailedAddress == 0) {
			ls.message = "详细地址不能为空";
			showToast(ls);
			return;
		}



		if (IsHave.value == false) {
			form.value.inCommonUse = 0;
		} else {
			form.value.inCommonUse = 1;
		}

		addSignAddress(form.value).then(response => {

			if (response.code == 200) {
				uni.showToast({
					title: '保存成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
			} else {
				uni.showToast({
					title: '保存失败',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'errory',
					//显示持续时间为 2秒
					duration: 2000
				})
			}

			proxy.$tab.navigateTo("/pages/signln/signaddress")
		});
	}
</script>

<style scoped>
	@import '@/pages/common/navbar/navbar.css';

	.error {
		position: fixed;
		color: red;
		left: 200rpx;
		font-size: 20rpx;
	}

	.butview {
		width: 750rpx;
		height: 136rpx;
		background: #ffffff;
		position: absolute;
		bottom: 68rpx;
	}

	.but {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		background: #c0f0ec;
		margin-left: 32rpx;
	}

	.but>text {
		font-weight: 600;
		width: 123rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #00CCBE;
		display: block;
		margin: auto;
		line-height: 88rpx;
		margin-top: 22rpx;
	}

	.box {
		width: 702rpx;
		height: 676rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
		margin: 24rpx;
	}

	.havebottom {
		margin-left: 24rpx;
		margin-top: 50rpx;
	}

	.havebottomimage {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.havebottomtext {
		font-weight: Regular;
		width: 111rpx;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #999999;
		margin-left: 12rpx;
		vertical-align: middle;
	}

	.havebotomisshowtext {
		font-weight: Regular;
		width: 111rpx;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #00CCBE;
		margin-left: 12rpx;
		vertical-align: middle;
	}

	.viewindex {
		width: 502rpx;
		height: 68rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

	}

	.Ninput {
		width: 502rpx;
		height: 68rpx;
		padding-left: 24rpx;

		font-size: 28rpx;
		color: #000000;
		vertical-align: middle;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f6f6f6;

		margin-left: 66rpx;
	}

	.plainput {
		font-weight: Regular;
		/* width: 56rpx; */
		/* height: 28rpx; */
		font-size: 28rpx;
		text-align: left;
		color: #B9B9B9;
	}

	.boxview {
		display: flex;
		margin-left: 24rpx;
	}

	.boxview>text {
		display: block;
		margin: auto 0;

		font-weight: 600;
		/* width: 86rpx; */
		height: 30rpx;
		font-size: 28rpx;
		text-align: left;
		color: #000000;
	}

	.textareaclass {
		width: 502rpx;
		height: 200rpx;
		font-weight: Regular;
		font-size: 28rpx;
		text-align: left;
		color: #B9B9B9;
	}

	.textarea {
		width: 502rpx;
		height: 200rpx;
		padding-left: 24rpx;

		font-size: 28rpx;
		color: #000000;
		vertical-align: middle;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f6f6f6;

		margin-left: 38rpx;
		padding-top: 20rpx;
	}

	.picker {

		line-height: 68rpx;
		vertical-align: middle;
		/* color: #000000; */
		padding-left: 24rpx;
	}

	.pickerclass {
		width: 502rpx;
		height: 68rpx;
		border-radius: 24px 24px 24px 24px;
		background: #f6f6f6;
		margin-top: 8rpx;
		margin-left: 38rpx;
		color: #B9B9B9;
	}

	.picker.active-text {
		color: #000000;
		/* 点击后的提示文字颜色 */
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>