<template>
  <view class="page-shell address-list-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">地址管理</text>
          <text class="subpage-subtitle">让配送信息保持简洁清晰，也保持足够从容</text>
        </view>
      </view>

      <view v-for="item in addresses" :key="item.id" class="address-card glass-card" @tap="editAddress(item)">
        <view class="address-top">
          <text class="address-name">{{ item.name }}</text>
          <text class="address-phone">{{ item.phone }}</text>
          <text v-if="item.default" class="default-chip">默认</text>
        </view>
        <text class="address-tag">{{ item.tag }}</text>
        <text class="address-detail">{{ item.full }}</text>
      </view>

      <view class="primary-button add-button" @tap="addAddress">新增地址</view>
    </view>
  </view>
</template>

<script>
import { addresses } from '@/data/mock'

export default {
  data() {
    return {
      addresses
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/profile/profile' }) })
    },
    editAddress(item) {
      uni.navigateTo({ url: `/packageProfile/address-edit/address-edit?id=${item.id}` })
    },
    addAddress() {
      uni.navigateTo({ url: '/packageProfile/address-edit/address-edit?mode=create' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.address-card {
  padding: 30rpx;
  margin-bottom: 22rpx;
}

.address-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12rpx;
}

.address-name {
  font-size: 30rpx;
  font-weight: 700;
}

.address-phone {
  font-size: 24rpx;
  color: $text-secondary;
}

.default-chip {
  @include chip-soft;
  padding: 8rpx 18rpx;
}

.address-tag,
.address-detail {
  display: block;
}

.address-tag {
  margin-top: 18rpx;
  font-size: 22rpx;
  color: $brand-accent;
  letter-spacing: 2rpx;
}

.address-detail {
  margin-top: 10rpx;
  font-size: 25rpx;
  line-height: 1.8;
  color: $text-primary;
}

.add-button {
  width: 100%;
}
</style>
