<template>
  <div class="container">
    <van-cell-group>
      <van-cell>
        <van-tag type="primary"
          plain
          size="large">
          订单号：{{ ddNo }}<br />
          发货单号：{{ sentNo }}<br />
          物流公司：{{ transportName }} <br />
          物流单号：{{ orderId }}
        </van-tag>
      </van-cell>
    </van-cell-group>

    <van-steps direction="vertical"
      :active="0">
      <van-step v-for="item in activities">
        <h3>{{ item.content }}</h3>
        <p>{{ item.timestamp }}</p>
      </van-step>
    </van-steps>
  </div>
</template>

<script setup>
import { getLogisticsListAPI } from '@/api'
const route = useRoute()

const activities = ref([]) // 物流轨迹信息
const orderId = ref('') // 物流单号
const transportName = ref('') // 物流公司名称
const ddNo = ref('') // 订单号
const sentNo = ref('') // 发货单号

const getLogisticsList = async () => {
  // 获取当前 URL 上的参数 sentNo
  const { data } = await getLogisticsListAPI({
    sentNo: route.query.sentNo
  })
  orderId.value = data.expressNo
  transportName.value = data.transportName
  ddNo.value = data.ddNo
  sentNo.value = data.bjSentNo

  // 判断 data.sentInfo 为空给 activities 空数组怎么写
  if (!data.sentInfo) {
    activities.value = [{
      content: '还未生成物流信息，请稍等',
      timestamp: new Date()
    }]
    return
  }
  activities.value = data.sentInfo.reverse().map(o => ({
    content: o.operateRemark,
    timestamp: o.operateTime
  }))
}
getLogisticsList()
</script>

<style lang="scss"
  scoped>
  .container {
    padding-top: 20px;

    ::v-deep(.van-cell) {
      padding: 5px 20px;

      .van-cell__value {
        text-align: left;
      }
    }

    h3,
    p {
      margin: 0;
    }

    h3 {
      font-size: 16px;
    }

    p {
      font-size: .3733rem;
    }


  }

</style>