<template>
	<view class="addr-list-page">
		<uni-nav-bar left-icon="left" title="地址管理" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" />

		<scroll-view scroll-y class="list-wrap">
			<view v-if="!list.length" class="empty">暂无收货地址</view>
			<view v-for="item in list" :key="item.id" class="addr-item" @click="select(item)">
				<view class="addr-main">
					<view class="row">
						<text class="name">{{ item.receiver }}</text>
						<text class="mobile">{{ item.mobile }}</text>
					</view>
					<view class="row small">{{ item.fullAddress || (item.region + ' ' + item.detail) }}</view>
				</view>
				<view class="addr-actions">
					<text class="act" @click.stop="edit(item)">编辑</text>
					<text class="act danger" @click.stop="remove(item)">删除</text>
				</view>
			</view>
		</scroll-view>

		<view class="footer-bar">
			<view class="add-btn" @click="addNew">新增地址</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const STORAGE_KEY = 'goods_addresses'
const SELECTED_KEY = 'goods_selected_address'
const list = ref([])

const goBack = () => uni.navigateBack()

const load = () => {
	try {
		const cached = uni.getStorageSync(STORAGE_KEY)
		list.value = Array.isArray(cached) ? cached : []
	} catch (e) {
		list.value = []
	}
}

onShow(() => load())

const addNew = () => uni.navigateTo({ url: '/pages_goods/exchange/address' })

const edit = (item) => {
	uni.navigateTo({ url: `/pages_goods/exchange/address?id=${item.id}` })
}

const remove = (item) => {
	uni.showModal({
		title: '删除地址',
		content: '确定删除该地址吗？',
		success: (r) => {
			if (r.confirm) {
				list.value = list.value.filter(a => a.id !== item.id)
				uni.setStorageSync(STORAGE_KEY, list.value)
			}
		}
	})
}

const select = (item) => {
	uni.setStorageSync(SELECTED_KEY, item)
	uni.showToast({ title: '已选择该地址', icon: 'success' })
	setTimeout(() => uni.navigateBack(), 300)
}
</script>

<style scoped>
.addr-list-page { min-height: 100vh; background: #fff; }
.list-wrap { position: absolute; top: 140rpx; bottom: 120rpx; left: 0; right: 0; }
.empty { text-align: center; color: #999; padding: 80rpx 24rpx; }
.addr-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx; border-bottom: 1rpx solid #f0f0f0; }
.addr-main { flex: 1; }
.row { display: flex; align-items: center; gap: 20rpx; margin-bottom: 8rpx; }
.row.small { color: #666; font-size: 26rpx; }
.name { color: #333; font-size: 30rpx; }
.mobile { color: #333; font-size: 30rpx; }
.addr-actions { display: flex; align-items: center; gap: 24rpx; margin-left: 24rpx; }
.act { color: #38c1b1; font-size: 28rpx; }
.act.danger { color: #ff4d4f; }
.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 120rpx; background: #27c5b8; display: flex; align-items: center; justify-content: center; }
.add-btn { color: #fff; font-size: 34rpx; font-weight: 700; }
</style>

