<template>
	<view class="add-address-page">
		<view class="page-header">
			<text class="page-title">{{ !addressId ? '新增地址' : '修改地址' }}</text>
			<text class="page-desc">请准确填写您的收货信息</text>
		</view>

		<view class="form-card">
			<up-form labelPosition="top" :model="userData" labelWidth='200rpx' ref="form1">
				<up-form-item label="收货人" prop="userInfo.name" ref="item1">
					<view class="input-wrap">
						<up-icon name="account" color="#FF6A00" size="18"></up-icon>
						<up-input v-model="userData.name" placeholder="请输入收货人姓名" border="none"
							:customStyle="{ flex: 1, paddingLeft: '12rpx' }"></up-input>
					</view>
				</up-form-item>
				<up-form-item label="手机号" prop="userInfo.name" ref="item1">
					<view class="input-wrap">
						<up-icon name="phone" color="#FF6A00" size="18"></up-icon>
						<up-input v-model="userData.phone" placeholder="请输入手机号码" border="none"
							:customStyle="{ flex: 1, paddingLeft: '12rpx' }" type="number" maxlength="11"></up-input>
					</view>
				</up-form-item>
				<up-form-item label="所在地区" prop="userInfo.name" ref="item1">
					<view class="region-picker" @click="visible=true">
						<view class="region-left">
							<up-icon name="map" color="#FF6A00" size="18"></up-icon>
							<text v-if="!userData.procince" class="region-placeholder">请选择省/市/区</text>
							<text v-else class="region-value">{{ userData.procince }} {{ userData.city }} {{ userData.region }}</text>
						</view>
						<up-icon name="arrow-right" color="#C0C4CC" size="16"></up-icon>
					</view>
				</up-form-item>
				<up-form-item label="详细地址" prop="userInfo.name" ref="item1">
					<view class="textarea-wrap">
						<up-textarea v-model="userData.detail" placeholder="请输入街道、楼栋、门牌号等详细地址" border="none"
							:customStyle="{ flex: 1, paddingLeft: '12rpx', backgroundColor: 'transparent' }"></up-textarea>
					</view>
				</up-form-item>
			</up-form>
		</view>

		<view class="switch-card">
			<view class="switch-row">
				<view class="switch-left">
					<view class="switch-icon-wrap">
						<up-icon name="checkmark-circle" color="#FF6A00" size="18"></up-icon>
					</view>
					<view class="switch-text-wrap">
						<text class="switch-label">设为默认地址</text>
						<text class="switch-desc">下次下单时会默认使用此地址</text>
					</view>
				</view>
				<up-switch v-model="userData.switchValue" size='20' activeColor='var(--nav-mian)' @change="switchChange">
				</up-switch>
			</view>
		</view>

		<view class="bottom-bar">
			<up-button @click="save()" color='var(--nav-mian)' shape='circle'
				:customStyle="{ width: '90%', margin: '0 auto', height: '88rpx', fontSize: '32rpx', fontWeight: '600' }"
				:text="!addressId?'保存地址':'修改地址'"></up-button>
		</view>

		<piaoyi-cityPicker column="3" default-value="411002" :mask-close-able="true" @confirm="areaConfirm"
			@cancel="areaCancel" :visible="visible" />
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { Service } from "@/Service/Service"
	import { AddressService } from "@/Service/api/AddressService"
	import { onLoad } from '@dcloudio/uni-app';

	let visible = ref(false)

	let userData = ref({
		name: '',
		detail: '',
		switchValue: false,
		phone: '',
		procince: '',
		city: '',
		region: '',
	})

	let addressId = ref('')
	onLoad((data: any) => {
		if (data.addressId) {
			addressId.value = data.addressId
			getData()
		}
	})

	const getData = () => {
		AddressService.GetUserAddressInfo(addressId.value).then(res => {
			if (res.code == 0) {
				userData.value.name = res.data.addressInfo.realName
				userData.value.phone = res.data.addressInfo.phone
				userData.value.procince = res.data.addressInfo.province
				userData.value.city = res.data.addressInfo.city
				userData.value.region = res.data.addressInfo.region
				userData.value.detail = res.data.addressInfo.address
				userData.value.switchValue = res.data.addressInfo.isDefault === 1 ? true : false
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const save = () => {
		if (!userData.value.name) {
			Service.Msg('请填写姓名!')
			return
		}
		if (!userData.value.phone) {
			Service.Msg('请填写手机号!')
			return
		}
		if (!userData.value.procince) {
			Service.Msg('请选择地址!')
			return
		}
		if (!userData.value.detail) {
			Service.Msg('请输入详细地址!')
			return
		}

		let data = {
			addressId: addressId.value,
			name: userData.value.name,
			phone: userData.value.phone,
			province: userData.value.procince,
			city: userData.value.city,
			region: userData.value.region,
			address: userData.value.detail,
			isDefault: userData.value.switchValue ? 1 : 0
		}

		AddressService.AddUserAddress(data).then(res => {
			if (res.code == 0) {
				Service.Msg(!addressId.value ? '添加成功!' : '修改成功!')
				setTimeout(() => {
					Service.GoPageBack()
				}, 1000)
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const switchChange = (e: any) => {
		userData.value.switchValue = e
	}

	const areaConfirm = (e: any) => {
		visible.value = false
		userData.value.procince = e.provinceName
		userData.value.city = e.cityName
		userData.value.region = e.areaName
	}

	const areaCancel = (e: any) => {
		visible.value = false
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F9FA;
	}

	.add-address-page {
		display: flex;
		flex-direction: column;
		
		padding-bottom: 160rpx;
	}

	/* ===== 页面头部 ===== */
	.page-header {
		padding: 40rpx 30rpx 30rpx;
	}

	.page-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #1F2937;
		display: block;
	}

	.page-desc {
		font-size: 24rpx;
		color: #9CA3AF;
		margin-top: 10rpx;
		display: block;
	}

	/* ===== 表单卡片 ===== */
	.form-card {
		background: #fff;
		margin: 0 30rpx;
		border-radius: 28rpx;
		padding: 24rpx 24rpx 10rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	/* ===== 输入框 ===== */
	.input-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #F8F9FA;
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		margin-top: 12rpx;
		border: 2rpx solid transparent;
		transition: all 0.2s;
	}

	.input-wrap:focus-within {
		border-color: var(--nav-mian);
		background-color: #fff;
	}

	.region-picker {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F8F9FA;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 12rpx;
		border: 2rpx solid transparent;
		transition: all 0.2s;
	}

	.region-picker:active {
		background-color: #F0F0F0;
	}

	.region-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex: 1;
	}

	.region-placeholder {
		color: #C0C4CC;
		font-size: 28rpx;
	}

	.region-value {
		color: #1F2937;
		font-size: 28rpx;
		font-weight: 500;
	}

	.textarea-wrap {
		width: 100%;
		display: flex;
		align-items: flex-start;
		background-color: #F8F9FA;
		border-radius: 16rpx;
		padding: 0rpx 24rpx;
		margin-top: 12rpx;
		border: 2rpx solid transparent;
		transition: all 0.2s;
	}

	.textarea-wrap:focus-within {
		border-color: var(--nav-mian);
		background-color: #fff;
	}

	/* ===== 默认地址开关 ===== */
	.switch-card {
		background: #fff;
		margin: 24rpx 30rpx 0;
		border-radius: 28rpx;
		padding: 24rpx 30rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.switch-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.switch-left {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.switch-icon-wrap {
		width: 60rpx;
		height: 60rpx;
		border-radius: 16rpx;
		background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.switch-label {
		font-size: 30rpx;
		font-weight: 600;
		color: #1F2937;
		display: block;
	}

	.switch-desc {
		font-size: 22rpx;
		color: #9CA3AF;
		margin-top: 4rpx;
		display: block;
	}

	/* ===== 底部按钮 ===== */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.04);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
</style>
