<template>
  <div class="app">
    <div class="container">
      <p class="order">
        <span>合同编号：{{ ddNo }}</span>
        <span>发货单号：{{ sentNo }}</span>
        <span>物流公司：{{ transportName }}</span>
        <span>物流单号：{{ orderId }}</span>
      </p>
      <div class="wrap">
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            :type="index === 0 ? 'primary' : ''"
            :hollow="true"
            :class="{ 'current': index === 0 }">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
        <div class="map-container">
          <div id="map-container"
            style="width:100%; height:400px;"></div>
        </div>
      </div>
    </div>
  </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.traceDetails.reverse().map(o => ({
    content: o.operateRemark,
    timestamp: o.operateTime
  }))

}
getLogisticsList()

onMounted(() => {
  //定义地图中心点坐标
  // var center = new TMap.LatLng(39.984120, 116.307484)
  // //定义map变量，调用 TMap.Map() 构造函数创建地图
  // new TMap.Map(document.getElementById('map-container'), {
  //   center: center,//设置地图中心点坐标
  //   zoom: 17.2,   //设置地图缩放级别
  //   // pitch: 43.5,  //设置俯仰角
  //   // rotation: 45    //设置地图旋转角度
  // });
})
</script>

<style lang="scss"
  scoped>
  .app {
    background-color: #efefef;

    .container {
      padding: 10px 20px;
      width: 80%;
      margin: 0 auto;
      background-color: white;
      min-height: 100vh;
    }

    .order {
      background-color: #f5f5f5;
      padding: 15px;

      span {
        color: #1890ff; // 蓝色文字
        padding: 5px 12px;
        border: 1px solid #1890ff;
        border-radius: 8px;
        &:nth-child(n+1){
          margin-left: 15px;
        }
      }
    }


    .wrap {
      display: flex;
      gap: 20px;
      padding: 0 50px;
      margin-top: 30px;

      .el-timeline {
        flex: 1;
        max-width: 600px;
        margin: 0;

        .current {

          :deep(.el-timeline-item__content),
          :deep(.el-timeline-item__timestamp) {
            color: #1890ff;
          }
        }
      }

      .map-container {
        flex: 1;
      }
    }
  }
</style>