<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">客户名称</view>
				<u-select v-model="showSelect" :list="selectList" @confirm="onConfirm"></u-select>
				<input
					:disabled="true"
					v-model="addressData.name"
					placeholder-class="line"
					placeholder="请填写客户名称"
					@tap="showSelect = true"
				/>
			</view>
			<view class="item">
				<view class="left">采购员</view>
				<input
					type="text"
					v-model="addressData.contactName"
					placeholder-class="line"
					placeholder="请填写采购员"
				/>
			</view>
			<view class="item">
				<view class="left">采购手机号</view>
				<input
					v-model="addressData.tel"
					type="text"
					placeholder-class="line"
					placeholder="请填写采购手机号"
				/>
			</view>
			<view class="item">
				<view class="left">采购邮箱</view>
				<input
					v-model="addressData.customerEmail"
					type="text"
					placeholder-class="line"
					placeholder="请填写采购邮箱"
				/>
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地址</view>
				<input
					v-model="addressDetails"
					disabled
					type="text"
					placeholder-class="line"
					placeholder="省市区县、乡镇等"
				/>
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea
					v-model="addressData.addressDetail"
					type="text"
					placeholder-class="line"
					placeholder="街道、楼牌等"
				/>
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<u-switch v-model="addressData.isDefault" active-color="red" size="40" />
				</view>
			</view>
		</view>

		<view style="padding: 6%;">
			<u-button type="error" shape="circle" @click="addressSave">保存</u-button>
			<u-button v-show="editId" shape="circle" @click="addressDel" style="margin-top: 20rpx;">
				删除
			</u-button>
		</view>

		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="confirm" />
		<u-modal
			v-model="showModel"
			:content="content"
			show-cancel-button
			@confirm="confirmModel"
		></u-modal>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { deleteAddress, saveAddress } from '@/api/index';
import { consigneeList } from '@/api/profile';

let show = ref(false);
let showModel = ref(false);
let showSelect = ref(false);
let content = ref('确认删除地址?');
let selectList = ref([] as any)
let addressData = ref({
	addressDetail: '',
	areaCode: '',
	city: '',
	country: '',
	county: '',
	isDefault: false,
	name: '',
	contactName: '',
	customerEmail: '',
	customerCode: '',
	postalCode: '',
	province: '',
	tel: '',
} as any);

// 显示地区
let addressDetails = computed(() => {
	return addressData.value.province + addressData.value.city + addressData.value.county;
});

let editId = ref()
onLoad((options?: any) => {
	if (JSON.stringify(options) !== '{}') {
		addressData.value = JSON.parse(options.data);
		// 判断是否显示删除
		editId.value = addressData.value?.id
	}
	consigneeList().then((res: any) => {
		if(res.data.code === 200) {
			res.data.data.map((item: any) => {
				selectList.value.push({
					label: item.customerName,
					value: item.customerCode
				})
			})
		}
	})
});

// 打开地区选择
let showRegionPicker = () => {
	show.value = true;
};

let onConfirm = (data: any) => {
	addressData.value.name = data[0].label
	addressData.value.customerCode = data[0].value
}

// 设置地区
let confirm = (data: any) => {
	addressData.value.areaCode = data.area.code;
	addressData.value.province = data.province.name;
	addressData.value.city = data.city.name;
	addressData.value.county = data.area.name;
};

// 确认删除地址
let confirmModel = () => {
	deleteAddress(editId.value).then((res: any) => {
		if(res.data.code === 200) {
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('initAddress')
						uni.showToast({
							title: '删除地址成功',
							icon: 'none'
						})
					}
				});
		}
	});
}

// 保存地址
let addressSave = () => {
	if (!addressData.value.name)
		return uni.showToast({
			title: '请输入客户名称',
			icon: 'none',
		});
	if (!addressData.value.contactName)
		return uni.showToast({
			title: '请输入采购员',
			icon: 'none',
		});
	let emailReg = /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
	if (!emailReg.test(addressData.value.customerEmail))
		return uni.showToast({
			title: '邮箱为空或格式不对',
			icon: 'none',
		});
	let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
	if (!reg.test(addressData.value.tel))
		return uni.showToast({
			title: '电话号码为空或格式不对',
			icon: 'none',
		});
	if (!addressData.value.province)
		return uni.showToast({
			title: '请选择地址',
			icon: 'none',
		});
	if (!addressData.value.addressDetail)
		return uni.showToast({
			title: '请输入详细地址',
			icon: 'none',
		});
	saveAddress(addressData.value).then((res: any) => {
		if (res.data.code === 200) {
			uni.navigateBack({
				delta: 1,
				success() {
					uni.$emit('initAddress')
				}
			});
		}
	});
};

// 打开删除地址模态框
let addressDel = () => {
	showModel.value = true
};
</script>

<style lang="scss" scoped>
::v-deep .line {
	color: $u-light-color;
	font-size: 28rpx;
}

.wrap {
	background-color: #f2f2f2;

	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;

		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;

			.left {
				width: 200rpx;
			}

			input {
				text-align: left;
			}
		}

		.address {
			padding: 20rpx 0;

			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}

		.site-clipboard {
			padding-right: 40rpx;

			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}

			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;

				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.bottom {
		margin-top: 20rpx;
		padding: 22rpx;
		background-color: #ffffff;
		font-size: 28rpx;

		.tag {
			display: flex;

			.left {
				width: 160rpx;
			}

			.right {
				display: flex;
				flex-wrap: wrap;

				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}

				.plus {
					//padding: 10rpx 0;
				}
			}
		}

		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;

			.tips {
				font-size: 24rpx;
			}

			.right {
			}
		}
	}
}
</style>
