<template>
  <!-- 物流信息 -->
  <view class="container">
    <!-- 主要内容包裹器 -->
    <view class="wrapper">
      <!-- 物流信息头部 -->
      <view
        class="deliveryInfo"
        style="background:url(http://jiales.gz-yami.com/delivery-bg.png) center center no-repeat #fff;"
      >
        <!-- 物流图标 -->
        <view
          class="icon-express"
          style="background:url(http://jiales.gz-yami.com/delivery-car.png) no-repeat;background-size:100% 100%;"
        />
        <!-- 物流信息文本 -->
        <view class="infoWarp">
          <!-- 快递公司名称 -->
          <view class="companyname">
            <text class="key">
              物流公司：
            </text>
            <text class="value">
              {{ companyName }}
            </text>
          </view>
          <!-- 运单编号 -->
          <view class="expno">
            <text class="key">
              运单编号：
            </text>
            <text class="value">
              {{ dvyFlowId }}
            </text>
          </view>
        </view>
      </view>

      <!-- 如果有物流数据则显示物流详情 -->
      <view
        v-if="dvyData.length"
        class="deliveryDetail"
      >
        <!-- 使用v-for循环渲染每个物流详情项 -->
        <block
          v-for="(item, index) in dvyData"
          :key="index"
        >
          <!-- 每个物流详情项，如果是最新的一条记录，则添加lastest类 -->
          <view :class="'detailItem ' + (index==0?'lastest':'')">
            <!-- 物流进度点 -->
            <view class="dot">
              <!-- 根据条件加载不同的点图标 -->
              <image src="@/static/images/icon/delive-dot.png" />
              <image src="@/static/images/icon/dot.png" />
            </view>
            <!-- 物流详情描述 -->
            <view class="detail">
              <view class="desc">
                {{ item.context }} <!-- 描述文字 -->
              </view>
              <view class="time">
                {{ item.time }} <!-- 时间戳 -->
              </view>
            </view>
          </view>
        </block>
      </view>

      <!-- 如果没有物流数据则显示暂无配送信息 -->
      <view
        v-else
        class="empty-space"
      >
        暂无配送信息
      </view>
    </view>
  </view>
</template>

<script setup>
// 定义响应式变量
const companyName = ref('') // 快递公司名称
const dvyFlowId = ref('') // 运单编号
const dvyData = ref([]) // 物流详情数据数组

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  // 显示加载指示器
  uni.showLoading()
  
  // 发起请求获取物流信息
  http.request({
    url: '/delivery/check', // 请求的URL
    method: 'GET', // HTTP方法
    data: {
      orderNumber: options.orderNum // 从页面加载参数中获取订单号
    }
  })
    .then(({ data }) => {
      // 将服务器返回的数据赋值给响应式变量
      companyName.value = data.companyName
      dvyFlowId.value = data.dvyFlowId
      dvyData.value = data.data
      
      // 隐藏加载指示器
      uni.hideLoading()
    })
})
</script>

<style scoped lang="scss">
/* 引入本地的SCSS文件，用于定义样式 */
@use './express-delivery.scss';
</style>
