<template>
	<page-container title="选择地址" :showBack="true">
		<view class="address-list">
			<view v-for="(item, index) in addressList" :key="index" class="address-item">
				<view class="address-radio" @click="selectAddress(item)">
					<radio :checked="item.id === selectedAddressId" color="#1296db" />
				</view>
				<view class="address-content" @click="selectAddress(item)">
					<view class="address-top">
						<text class="name">{{ item.receiver_name }}</text>
						<text class="phone">{{ item.receiver_phone }}</text>
						<text v-if="item.is_default === 1" class="default-tag">默认</text>
					</view>
					<view class="address-bottom">
						<text class="address-text">{{ item.detailed_address }}</text>
					</view>
				</view>
				<view class="edit-btn" @click="editAddress(item)">
					<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
						width="24" height="24">
						<path
							d="M391.467 736.322a31.99 31.99 0 0 1-13.783 8.126l-232.261 66.798c-12.088 3.477-23.276-7.711-19.799-19.799l66.798-232.261a32 32 0 0 1 8.126-13.782l472.869-472.87c12.496-12.496 32.758-12.496 45.254 0L864.335 218.2c12.497 12.496 12.497 32.758 0 45.255L391.467 736.322z m248.009-516.709l77.781 77.782 56.569-56.569-77.782-77.782-56.568 56.569z m-50.912 50.911L265.88 593.209l-31.401 109.182 109.182-31.401 322.685-322.684-77.782-77.782zM129.001 889h768v72h-768v-72z"
							fill="#999999" />
					</svg>
				</view>
				<view class="delete-btn" @click="showDeleteConfirm(item)">
					<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
						width="24" height="24">
						<path
							d="M417.06 790.286V285.224c0-22.014-17.86-39.874-39.872-39.874-22.014 0-39.874 17.86-39.874 39.874v505.062c0 22.01 17.86 39.87 39.874 39.87 22.012-0.002 39.872-17.862 39.872-39.87z m398.732 93.036c0 29.36-23.804 53.162-53.162 53.162H230.986c-29.36 0-53.164-23.802-53.164-53.162V245.35H98.074v664.552c0 58.72 47.61 106.328 106.33 106.328h584.806c58.72 0 106.33-47.608 106.33-106.328V245.35h-79.748v637.972z m-159.494-93.036V285.224c0-22.014-17.86-39.874-39.872-39.874-22.018 0-39.876 17.86-39.876 39.874v505.062c0 22.01 17.86 39.87 39.876 39.87 22.014-0.002 39.872-17.862 39.872-39.87zM935.412 59.276H576.55c0-29.36-23.8-53.164-53.162-53.164h-53.164c-29.36 0-53.166 23.804-53.166 53.164H84.784c-22.012 0-39.874 17.86-39.874 39.874 0 22.014 17.86 39.874 39.874 39.874h850.628c22.014 0 39.874-17.858 39.874-39.874 0-22.014-17.86-39.874-39.874-39.874z"
							fill="#999999" />
					</svg>
				</view>
			</view>

			<view v-if="addressList.length === 0" class="empty-tip">
				<text>暂无收货地址</text>
			</view>
		</view>

		<view class="add-btn" @click="addNewAddress">
			<text>新增地址</text>
		</view>
		<template #nav-right>
		 <view @click="confirmSelection">确定</view>
		</template>
	</page-container>
</template>

<script>
import PageContainer from '@/components/page-container/page-container.vue'
import { getAddressList, deleteAddress } from '@/common/server/userAddress.js'

export default {
	components: {
		PageContainer
	},
	data() {
		return {
			addressList: [],
			selectedAddressId: null,
			eventChannel: null
		}
	},
	onLoad() {
		this.load();
		// 获取事件通道
		this.eventChannel = this.getOpenerEventChannel();
		// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		this.eventChannel.on('acceptDataFromOpenerPage', (data) => {
			console.log('从打开页面接收的数据:', data);
			if (data && data.selectedAddressId) {
				this.selectedAddressId = data.selectedAddressId;
			}
		});
	},
	methods: {
		async load() {
			try {
				const res = await getAddressList();
				if (res.status === 1 && res.data) {
					// 如果有默认地址且未选择地址，则默认选中默认地址
					const defaultAddress = res.data.find(item => item.is_default === 1);
					if (defaultAddress && !this.selectedAddressId) {
						this.selectedAddressId = defaultAddress.id;
					}

					// 将地址列表保存到本地
					this.addressList = res.data;
				} else {
					uni.showToast({
						title: res.msg || '获取地址列表失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取地址列表失败', error);
				uni.showToast({
					title: '网络异常，请稍后再试',
					icon: 'none'
				});
			}
		},

		selectAddress(item) {
			// 只更新选中状态，不立即返回
			this.selectedAddressId = item.id;
		},

		editAddress(item) {
			uni.navigateTo({
				url: '/pages/other/address_edit?id=' + item.id
			});
		},

		addNewAddress() {
			uni.navigateTo({
				url: '/pages/other/address_edit'
			});
		},

		// 显示删除确认对话框
		showDeleteConfirm(item) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该收货地址吗？',
				success: async (res) => {
					if (res.confirm) {
						await this.deleteAddress(item.id);
					}
				}
			});
		},

		// 删除地址
		async deleteAddress(id) {
			try {
				uni.showLoading({
					title: '删除中...'
				});

				const res = await deleteAddress({
					id: id
				});

				uni.hideLoading();

				if (res.status === 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});

					// 重新加载地址列表
					this.load();
				} else {
					uni.showToast({
						title: res.msg || '删除失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('删除地址失败', error);
				uni.showToast({
					title: '网络异常，请稍后再试',
					icon: 'none'
				});
			}
		},

		// 确认选择并返回上一页
		confirmSelection() {
			// 如果没有选中任何地址，提示用户
			if (!this.selectedAddressId) {
				return uni.showToast({
					title: '请选择一个收货地址',
					icon: 'none'
				});
			}
			
			// 获取选中的地址对象
			const selectedAddress = this.addressList.find(item => item.id === this.selectedAddressId);
			if (!selectedAddress) {
				return uni.showToast({
					title: '所选地址不存在',
					icon: 'none'
				});
			}
			
			// 将选中的地址传回上一页面
			if (this.eventChannel) {
				this.eventChannel.emit('selectAddress', {
					address: selectedAddress
				});
				
				// 返回上一页
				uni.navigateBack();
			}
		}
	}
}
</script>

<style lang="scss">
.address-list {
	padding: 0 30rpx;
	background-color: #fff;

	.address-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.address-radio {
			width: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.address-content {
			flex: 1;
			margin: 0 20rpx;

			.address-top {
				margin-bottom: 10rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.phone {
					font-size: 28rpx;
					color: #666;
				}

				.default-tag {
					display: inline-block;
					font-size: 22rpx;
					color: #fff;
					background-color: #1296db;
					padding: 4rpx 10rpx;
					border-radius: 6rpx;
					margin-left: 16rpx;
				}
			}

			.address-bottom {
				.address-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
				}
			}
		}

		.edit-btn,
		.delete-btn {
			width: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx;

			.icon {
				font-size: 40rpx;
				color: #999;
			}
		}
	}

	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}
}

.add-btn {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: 90rpx;
	background-color: #1296db;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 45rpx;
}
</style>