<template>
  <!-- 页面的最外层容器，用于包裹整个页面内容 -->
  <view class="container">
    <!-- 页面主体内容区域 -->
    <view class="main">
      <!-- 当地址列表（addressList）长度为0时，显示此区域，用于提示用户还没有收货地址 -->
      <view v-if="addressList.length===0"
            class="empty">
        <view class="img">
          <!-- 展示一个表示无收货地址的图片 -->
          <image src="http://jiales.gz-yami.com/addr.png" />
        </view>
        <view class="txt">
          您还没有收货地址
        </view>
      </view>
      <!-- radio-group 组件用于创建一组单选按钮，这里用于管理收货地址相关的单选操作（比如设置默认地址等情况） -->
      <radio-group class="radio-group">
        <!-- 使用v-for指令循环遍历addressList数组，index为当前项的索引，每个元素对应一个收货地址信息 -->
        <block v-for="(item, index) in addressList"
               :key="index">
          <!-- 每个收货地址的整体视图容器 -->
          <view class="address">
            <!-- 个人信息及地址详情展示区域，点击可触发选择该地址用于下单的操作（通过@tap绑定selAddrToOrder方法） -->
            <view class="personal"
                  @tap="selAddrToOrder(item)">
              <!-- 地址信息标题部分，包含收件人姓名、电话号码以及修改地址的图标 -->
              <view class="info-tit">
                <!-- 展示收件人姓名，通过双括号插值表达式绑定地址对象中的receiver属性 -->
                <text class="name">
                  {{ item.receiver }}
                </text>
                <!-- 展示收件人电话号码，通过双括号插值表达式绑定地址对象中的mobile属性 -->
                <text class="tel">
                  {{ item.mobile }}
                </text>
                <!-- 修改地址的图标，通过指定的路径引入图片资源，绑定了点击事件toEditAddress，并传递当前地址的ID（通过自定义属性data-addrid），@tap.stop用于阻止事件冒泡 -->
                <image src="@/static/images/icon/revise.png"
                       :data-addrid="item.addrId"
                       @tap.stop="toEditAddress" />
              </view>
              <!-- 详细地址展示区域 -->
              <view class="addr">
                <!-- 展示完整的地址信息，通过拼接地址对象中的省份（province）、城市（city）、区域（area）和详细地址（addr）属性来显示 -->
                <text class="addr-get">
                  {{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
                </text>
              </view>
            </view>
            <!-- 设置默认地址相关的操作区域，绑定了点击事件onDefaultAddr，并传递当前地址的ID（通过自定义属性data-addrid） -->
            <view class="select-btn"
                  :data-addrid="item.addrId"
                  @tap="onDefaultAddr">
              <view class="box">
                <!-- 单选按钮，用于设置默认地址操作，绑定了一些属性 -->
                <radio :value="item.prodId"
                       :checked="item.commonAddr==1"
                       color="#eb2444"
                       :data-addrid="item.addrId"
                       @tap="onDefaultAddr" />
                设为默认地址
              </view>
            </view>
          </view>
        </block>
      </radio-group>
    </view>
    <!-- 页面底部的按钮区域，点击可触发新增收货地址的操作（通过@tap绑定onAddAddr方法） -->
    <view class="footer"
          @tap="onAddAddr">
      <text>新增收货地址</text>
    </view>
  </view>
</template>

<script setup>
  // 使用ref函数创建一个响应式变量order，初始值为 -1，可能用于记录与订单相关的状态或标识等信息（从后续代码看，可能与页面跳转来源有关）
  const order = ref(-1)
  // 生命周期函数 - 在页面加载时触发，用于获取从其他页面传递过来的参数（option），如果参数中包含order属性，则将其值赋给order响应式变量
  onLoad((option) => {
    if (option.order) {
      order.value = option.order
    }
  })

  // 使用ref函数创建一个响应式数组addressList，用于存储收货地址列表数据，初始值为空数组
  const addressList = ref([])

  // 生命周期函数 - 在页面显示时触发，一般用于加载初始化数据等操作，这里调用onGetList函数获取收货地址列表数据
  onShow(() => {
    onGetList()
  })

  // 获取收货地址列表的函数，通过发送HTTP请求到指定接口（/p/address/list）获取地址列表数据
  const onGetList = () => {
    // 显示加载提示框，告知用户正在加载数据
    uni.showLoading()
    http.request({
      url: '/p/address/list',
      method: 'GET'
    })
      .then(({ data }) => {
        // 将获取到的地址列表数据赋值给addressList响应式变量
        addressList.value = data
        // 隐藏加载提示框
        uni.hideLoading()
      })
  }

  // 新增收货地址的函数，通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress），一般用于用户添加新的收货地址
  const onAddAddr = () => {
    uni.navigateTo({
      url: '/pages/editAddress/editAddress'
    })
  }

  // 设置默认地址的函数，根据点击操作获取当前要设置为默认地址的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后发送HTTP PUT请求到指定接口（/p/address/defaultAddr/ + addrId），传递地址ID数据，用于将对应地址设置为默认地址，请求成功后隐藏加载提示框
  const onDefaultAddr = (e) => {
    const addrId = e.currentTarget.dataset.addrid
    uni.showLoading()
    http.request({
      url: '/p/address/defaultAddr/' + addrId,
      method: 'PUT',
      data: {
        addrId
      }
    })
      .then(() => {
        uni.hideLoading()
      })
  }

  // 修改地址的函数，根据点击操作获取当前要修改的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress）并传递地址ID参数，方便在编辑页面加载对应地址信息进行修改
  const toEditAddress = (e) => {
    const addrId = e.currentTarget.dataset.addrid
    uni.navigateTo({
      url: '/pages/editAddress/editAddress?addrId=' + addrId
    })
  }

  // 选择地址并跳转回提交订单页的函数，首先判断order.value的值是否为0（可能表示从特定的提交订单页面过来等情况），如果是，则通过获取当前页面栈（getCurrentPages）获取到上一页面（prevPage），然后将当前选择的地址信息（item）赋值给上一页面的相关变量（item和selAddress），最后通过uni.navigateBack实现返回上一页面（delta: 1表示返回一层页面栈），将选择的地址信息传递回去用于后续操作（比如在提交订单时使用选择的收货地址）
  const selAddrToOrder = (item) => {
    if (order.value == 0) {
      const pages = getCurrentPages() // 当前页面
      const prevPage = pages[pages.length - 2] // 上一页面
      prevPage.item = item // 直接给上一页面赋值
      prevPage.selAddress = 'yes'
      // 返回
      uni.navigateBack({
        delta: 1
      })
    }
  }
</script>

<style scoped lang="scss">
  // 导入外部的SCSS样式文件delivery-address.scss，该文件中应该定义了与当前组件相关的更多具体样式规则，通过scoped属性，使得样式仅作用于当前组件内部的元素
  @use './delivery-address.scss';
</style>
