<template>
  <view class="app-container">
    <HeaderBar title="我的地址" text-align="center" enable-back />

    <view class="address-list">
      <view
        v-for="item in addressList"
        :key="item.id"
        class="address-item"
        @click="selectAddress(item)"
      >
        <view class="address-info">
          <!-- <view class="name-phone">
            <text class="name">{{ item.name }}</text>
            <text class="phone">{{ item.mobile }}</text>
          </view> -->
          <view class="address">{{item.regionMergerName}} {{ item.address }}</view>
        </view>
        <view class="address-actions">
          <view class="action-btn edit" @click.stop="editAddress(item)">
            <u-icon name="edit-pen" size="32" color="#2979ff"></u-icon>
          </view>
          <view class="action-btn delete" @click.stop="deleteAddress(item)">
            <u-icon name="trash" size="32" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>

      <!-- 添加新地址占位符 -->
      <view class="address-item add-placeholder" @click="addAddress">
        <view class="add-content">
          <u-icon name="plus" size="40" color="#2979ff"></u-icon>
          <text class="add-text">添加新地址</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { appGetAddressList, appDeleteAddress } from '@/api/app/address'
import HeaderBar from '@/components/HeaderBar.vue'

export default {
  components: {
    HeaderBar
  },
  data() {
    return {
      addressList: []
    }
  },
  onShow() {
    this.getAddressList()
  },
  methods: {
    getAddressList() {
      this.$modal.loading('加载中...')
      appGetAddressList().then(res => {
        this.addressList = res.data
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    selectAddress(address) {
      // 获取来源页面
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]

      if (prevPage && prevPage.$vm) {
        // 设置选中的地址
        if (prevPage.$vm.form) {
          prevPage.$vm.form.createAddressId = address.id
          prevPage.$vm.form.createAddress = address.regionMergerName + ' ' + address.address
        }

        // 返回上一页
        uni.navigateBack()
      }
    },
    deleteAddress(address) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: (res) => {
          if (res.confirm) {
            appDeleteAddress(address.id).then(() => {
              uni.showToast({ title: '删除成功', icon: 'success' })
              this.getAddressList()
            })
          }
        }
      })
    },
    editAddress(address) {
      uni.navigateTo({
        url: `/pages/address/edit?id=${address.id}`
      })
    },
    addAddress() {
      uni.navigateTo({
        url: '/pages/address/edit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.address-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.address-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.add-placeholder {
    background: #ffffff71;
    border: 2rpx dashed #fff;
    justify-content: center;
    padding: 40rpx;

    .add-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      .add-text {
        font-size: 28rpx;
        color: #2979ff;
      }
    }
  }

  .address-info {
    flex: 1;
    margin-right: 20rpx;

    .name-phone {
      margin-bottom: 10rpx;

      .name {
        font-size: 32rpx;
        color: #333;
        margin-right: 20rpx;
      }

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

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

  .address-actions {
    display: flex;
    gap: 20rpx;

    .action-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f7f8fa;
    }
  }
}
</style>