<template>
  <div class="app">
    <div class="container">
      <p class="order">
        <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>
const data = {
  "code": "1000",
  "data": {
    "purchaseTraceList": [
      {
        "traceDetails": [
          {
            "operateCode": "-265",
            "operateDetailCode": "-265",
            "operateName": "华悦薇",
            "operateRemark": "司机已到达提货地-江苏 无锡市",
            "operateTime": "2025-07-03 11:01:11",
            "operateTitle": "已到达装货地"
          },
          {
            "operateCode": "-640",
            "operateDetailCode": "-640",
            "operateName": "华悦薇",
            "operateRemark": "司机开始装车",
            "operateTime": "2025-07-03 11:01:11",
            "operateTitle": "配送员完成揽收"
          },
          {
            "operateCode": "-1880",
            "operateDetailCode": "-1880",
            "operateName": "华悦薇",
            "operateRemark": "车辆已经到达“无锡锡山TC”",
            "operateTime": "2025-07-03 12:18:29",
            "operateTitle": "经停"
          },
          {
            "operateCode": "-170",
            "operateDetailCode": "-170",
            "operateName": "孙永杰",
            "operateRemark": "无锡锡山TC已收货(11箱、76.70kg、0.70方)",
            "operateTime": "2025-07-03 20:12:34",
            "operateTitle": "分拣中心收货"
          },
          {
            "operateCode": "16",
            "operateDetailCode": "16",
            "operateName": "孙永杰",
            "operateRemark": "订单已在无锡锡山TC出发，目的地：武汉新洲TC",
            "operateTime": "2025-07-04 02:39:27",
            "operateTitle": "分拣发货"
          },
          {
            "operateCode": "-450",
            "operateDetailCode": "-450",
            "operateName": "孙永杰",
            "operateRemark": "您的快件已发车",
            "operateTime": "2025-07-04 02:39:29",
            "operateTitle": "封车"
          },
          {
            "operateCode": "16",
            "operateDetailCode": "16",
            "operateName": "程瑶",
            "operateRemark": "订单已在武汉新洲TC出发，目的地：郑州TC",
            "operateTime": "2025-07-05 02:05:33",
            "operateTitle": "分拣发货"
          },
          {
            "operateCode": "-450",
            "operateDetailCode": "-450",
            "operateName": "程瑶",
            "operateRemark": "您的快件已发车",
            "operateTime": "2025-07-05 02:05:34",
            "operateTitle": "封车"
          },
          {
            "operateCode": "-170",
            "operateDetailCode": "-170",
            "operateName": "maxiaodong14",
            "operateRemark": "郑州TC已收货(11箱，批次号JDV021786083827002)",
            "operateTime": "2025-07-05 10:09:25",
            "operateTitle": "分拣中心收货"
          },
          {
            "operateCode": "-300",
            "operateDetailCode": "-300",
            "operateName": "梁龙龙",
            "operateRemark": "司机已到达目的城市-河南 郑州市，请您准备签收",
            "operateTime": "2025-07-06 13:53:54",
            "operateTitle": "运输车辆到达"
          },
          {
            "operateCode": "150",
            "operateDetailCode": "150",
            "operateName": "梁龙龙",
            "operateRemark": "订单已完成配送，感谢您选择京东物流！",
            "operateTime": "2025-07-06 13:54:38",
            "operateTitle": "站点收款"
          }
        ],
        "waybillNo": "JDV021786083827"
      }
    ]
  },
  "message": "成功",
  "requestId": "1751961953930"
}
const activities = ref(data.data.purchaseTraceList[0].traceDetails.map(o => ({
  content: o.operateRemark,
  timestamp: o.operateTime
})))
const orderId = ref(data.data.purchaseTraceList[0].waybillNo)

onMounted(() => {
  //定义地图中心点坐标
  var center = new TMap.LatLng(39.984120, 116.307484)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var 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;
      }
    }

    .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>