<template>
  <view class="container">
    <!-- 地图区域 -->
    <view class="map-container">
      <map
        id="deliveryMap"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :polyline="polyline"
        :include-points="points"
        style="width: 100%; height: 110%"
      >
      </map>
    </view>

    <!-- 物流信息 -->
    <view class="info-card">
      <view class="info-row">
        <text class="info-label">运单号</text>
        <view>
          <text class="info-value">YD999999</text>
          <img
            class="copy-btn"
            @click="copyNumber"
            src="https://static.hshuishang.com/myOrder/copy.png"
            alt="复制"
          />
        </view>
      </view>
      <view class="info-row">
        <text class="info-label">收件人</text>
        <text class="info-value">
          小王
          <text>1388888888</text>
        </text>
      </view>
      <view class="info-row">
        <text class="info-label">车牌号</text>
        <text class="info-value">京ALN233</text>
      </view>
    </view>

    <!-- 物流时间轴 -->
    <view class="timeline">
      <!-- 已签收 -->
      <view class="timeline-item active">
        <view class="timeline-dot"></view>
        <view class="timeline-line"></view>
        <view class="timeline-content">
          <view class="timeline-status">已签收</view>
          <view class="timeline-desc">您的订单已被签收，感谢您的支持</view>
          <view class="timeline-time">2021-04-16 20:30:24</view>
        </view>
      </view>

      <!-- 派送中 -->
      <view class="timeline-item">
        <view class="timeline-dot"></view>
        <view class="timeline-line"></view>
        <view class="timeline-content">
          <view class="timeline-status">派送中</view>
          <view class="timeline-desc">您的订单正在派送中</view>
          <view class="timeline-desc">
            <view
              >配送司机：小王
              <text class="detail-item-phone">1388888888</text>
            </view>
          </view>
          <view class="timeline-desc">
            <text>车牌号：京ALN233</text>
          </view>
          <view class="timeline-time">2021-04-16 20:06:24</view>
        </view>
      </view>

      <!-- 仓库处理 -->
      <view class="timeline-item">
        <view class="timeline-dot"></view>
        <view class="timeline-line"></view>
        <view class="timeline-content">
          <view class="timeline-status">仓库处理中</view>
          <view class="timeline-desc">拣货完成</view>
          <view class="timeline-time">2021-04-16 20:30:24</view>
        </view>
      </view>

      <!-- 已下单 -->
      <view class="timeline-item">
        <view class="timeline-dot"></view>
        <view class="timeline-line"></view>
        <view class="timeline-content">
          <view class="timeline-status">已下单</view>
          <view class="timeline-desc">您提交了订单，预计2020-04-29送达</view>
          <view class="timeline-time">2021-04-16 20:30:24</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 坐标
      latitude: 39.90469,
      longitude: 116.40717,

      // 地图标记点
      markers: [
        {
          id: 1,
          latitude: 39.90469,
          longitude: 116.40717,
          title: "目的地",
          iconPath: "/static/destination.png",
          width: 36,
          height: 36,
        },
        {
          id: 2,
          latitude: 39.915,
          longitude: 116.42,
          title: "当前位置",
          iconPath: "/static/current.png",
          width: 40,
          height: 40,
        },
      ],

      // 配送路线
      polyline: [
        {
          points: [
            { latitude: 39.915, longitude: 116.42 },
            { latitude: 39.91, longitude: 116.415 },
            { latitude: 39.907, longitude: 116.41 },
            { latitude: 39.90469, longitude: 116.40717 },
          ],
          color: "#07C160",
          width: 6,
          dottedLine: false,
        },
      ],

      // 地图显示区域
      points: [
        { latitude: 39.876, longitude: 116.435 },
        { latitude: 39.886, longitude: 116.395 },
      ],
    };
  },
  methods: {
    copyNumber() {
      uni.setClipboardData({
        data: "YD999999",
        success: () => {
          uni.showToast({ title: "运单号已复制", icon: "success" });
        },
      });
    },
  },
};
</script>

<style>
@import url("./index.css");
</style>