<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">收货地址</text>
			<view class="add-btn" @tap="addAddress">
				<uni-icons type="plus" size="20" color="white"></uni-icons>
				<text class="add-text">新增地址</text>
			</view>
		</view>

		<!-- 地址列表 -->
		<view class="address-list" v-if="!loading && addressList.length > 0">
			<view class="address-item" v-for="(address, index) in addressList" :key="address.id">
				<!-- 默认标签 -->
				<view class="default-tag" v-if="address.is_default === 1">
					<text class="default-text">默认</text>
				</view>

				<!-- 地址信息 -->
				<view class="address-content" @tap="editAddress(address)">
					<view class="address-header">
						<text class="consignee-name">{{ address.consignee_name }}</text>
						<text class="consignee-phone">{{ address.consignee_phone }}</text>
					</view>
					<view class="address-detail">
						<text class="address-text">{{ formatAddress(address) }}</text>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="address-actions">
					<view class="action-btn default-btn" 
						  v-if="address.is_default !== 1" 
						  @tap="setDefaultAddress(address.id)">
						<text class="action-text">设为默认</text>
					</view>
					<view class="action-btn edit-btn" @tap="editAddress(address)">
						<text class="action-text">编辑</text>
					</view>
					<view class="action-btn delete-btn" @tap="deleteAddress(address.id, index)">
						<text class="action-text">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="!loading && addressList.length === 0">
			<uni-icons type="location" size="100" color="#ccc"></uni-icons>
			<text class="empty-text">暂无收货地址</text>
			<button class="add-first-btn" @tap="addAddress">添加收货地址</button>
		</view>

		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				addressList: [],
				loading: false
			}
		},
		onLoad() {
			// 检查登录状态
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			this.loadAddressList()
		},
		onShow() {
			// 页面显示时重新加载地址列表（用于从编辑页面返回时刷新）
			this.loadAddressList()
		},
		methods: {
			// 加载地址列表
			async loadAddressList() {
				this.loading = true
				try {
					const res = await request.get('/back/user/addresses')
					if (res.success) {
						this.addressList = res.data || []
					}
				} catch (error) {
					console.error('加载地址列表失败：', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 格式化地址
			formatAddress(address) {
				return `${address.province} ${address.city} ${address.district} ${address.detail_address}`
			},

			// 新增地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/edit'
				})
			},

			// 编辑地址
			editAddress(address) {
				uni.navigateTo({
					url: `/pages/address/edit?id=${address.id}`
				})
			},

			// 设置默认地址
			async setDefaultAddress(addressId) {
				try {
					uni.showLoading({
						title: '设置中...',
						mask: true
					})

					const res = await request.put(`/back/user/addresses/${addressId}/default`)
					if (res.success) {
						uni.showToast({
							title: '设置成功',
							icon: 'success'
						})
						// 重新加载地址列表
						this.loadAddressList()
					} else {
						throw new Error(res.message || '设置失败')
					}
				} catch (error) {
					console.error('设置默认地址失败：', error)
					uni.showToast({
						title: '设置失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 删除地址
			deleteAddress(addressId, index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个收货地址吗？',
					success: async (res) => {
						if (res.confirm) {
							await this.confirmDeleteAddress(addressId, index)
						}
					}
				})
			},

			// 确认删除地址
			async confirmDeleteAddress(addressId, index) {
				try {
					uni.showLoading({
						title: '删除中...',
						mask: true
					})

					const res = await request.delete(`/back/user/addresses/${addressId}`)
					if (res.success) {
						// 从列表中移除
						this.addressList.splice(index, 1)
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					} else {
						throw new Error(res.message || '删除失败')
					}
				} catch (error) {
					console.error('删除地址失败：', error)
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-header {
		background: white;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.add-btn {
		background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
		padding: 15rpx 25rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.add-text {
		color: white;
		font-size: 26rpx;
		font-weight: bold;
	}

	.address-list {
		padding: 20rpx;
	}

	.address-item {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.default-tag {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: #FF4444;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		z-index: 1;
	}

	.default-text {
		color: white;
		font-size: 22rpx;
		font-weight: bold;
	}

	.address-content {
		padding: 30rpx;
		padding-right: 100rpx;
	}

	.address-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.consignee-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

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

	.address-detail {
		margin-bottom: 20rpx;
	}

	.address-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	.address-actions {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.action-btn {
		flex: 1;
		padding: 25rpx;
		text-align: center;
		border-right: 1rpx solid #eee;
	}

	.action-btn:last-child {
		border-right: none;
	}

	.default-btn {
		background: #f8f8f8;
	}

	.edit-btn {
		background: #f0f8ff;
	}

	.delete-btn {
		background: #fff0f0;
	}

	.action-text {
		font-size: 26rpx;
		color: #333;
	}

	.delete-btn .action-text {
		color: #FF4444;
	}

	.edit-btn .action-text {
		color: #1890ff;
	}

	.empty-state {
		padding: 100rpx 50rpx;
		text-align: center;
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin: 30rpx 0;
		display: block;
	}

	.add-first-btn {
		background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
		color: white;
		border: none;
		border-radius: 30rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.loading-state {
		padding: 100rpx;
		text-align: center;
	}

	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
</style>