<template>
  <navBar :title="'物流信息'"></navBar>
  <view class="logistics-page">
    <!-- 顶部导航 -->

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 头部基础信息 -->
      <view class="base-info" v-if="hasData">
        <view class="row">
          <text class="label">信息来源：</text>
          <text class="value">{{ logisticsInfo.source }}</text>
        </view>
        <view class="row waybill-row">
          <text class="label">运单编号：</text>
          <text class="value">{{ logisticsInfo.waybillNo }}</text>
          <view class="btn-copy" @click="onCopy">
            复制
          </view>
        </view>
      </view>

      <!-- 时间轴 -->
      <view class="timeline" v-if="hasData">
        <view class="left"></view>
        <!-- 左侧日期 -->
        <up-steps current="0" direction="column" dot>
          <up-steps-item  :desc="item.context"  v-for="(item, index) in logisticsList">
            <template #title>
			             <view class="timebox">
                     <text class="time">{{ formatDate(item.time) }}</text>
                     <text class="date">{{ formatTime(item.time) }}</text>
                   </view>
		           </template>
          </up-steps-item>
        </up-steps>
        <!-- <view
          v-for="(item, index) in logisticsList"
          :key="index"
          class="timeline-item"
        >
        

         
          

          
        </view> -->
      </view>
      <empty :emptyDesc="'暂无物流信息'" v-else />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import navBar from "@/components/navBar/navBar.vue";
import goodsApi from "@/api/goods_api";
import { onLoad } from "@dcloudio/uni-app";
import empty from "@/components/empty/empty.vue";
import dayjs from "dayjs";
const hasData = ref(false);
onLoad((options) => {
  console.log(options);
  if(options.order_id){
    order_id.value = options.order_id;
  }
  if(options.name){
    logisticsInfo.value.source = options.name;
  }
  getLogisticsInfo();
});
const order_id = ref('');
const logisticsInfo = ref({
  source: "",
  waybillNo: "",
});
const getLogisticsInfo = async () => {
  const res = await goodsApi.getOrderTrack({
    order_id: order_id.value,
  });
  if(res.code==200){
    logisticsInfo.value.waybillNo=res.data.nu;
    if(res.data && res.data.data.length > 0){
      hasData.value = true;
      logisticsList.value = res.data.data;
    }else{
      hasData.value = false;
    }
  }
  
};
const formatDate = (time) => {
  return dayjs(time).format("MM-DD");
};
const formatTime = (time) => {
  return dayjs(time).format("HH:mm");
};
// 模拟数据，布局参考上传截图
const logisticsList = ref([
  {
    date: "01-27",
    time: "01:14",
    desc: "您的快件离开【华北转运中心】，已发往【乌鲁木齐转运中心】。预计【01月30日】到达【乌鲁木齐市】，因运输距离较远，预计将在【30日晚上】为您更新快件状态，请您放心！",
  },
  {
    date: "01-27",
    time: "00:17",
    desc: "您的快件已经到达【华北转运中心】。【物流问题无需找商家或平台，请致电（专属热线:95554）更快解决】",
  },
  {
    date: "01-26",
    time: "23:24",
    desc: "您的快件离开【河北省廊坊市固安县】，已发往【华北转运中心】",
  },
  {
    date: "01-26",
    time: "18:31",
    desc: "您的快件在【河北省廊坊市固安县】已揽收，揽收人：邢徐芳（18832637908）【物流问题无需找商家或平台，请致电（专属热线:95554）更快解决】",
  },
]);

const onBack = () => {
  // 使用 uni-app 返回上一页
  uni.navigateBack({
    delta: 1,
  });
};

const onCopy = () => {
  uni.setClipboardData({
    data: logisticsInfo.value.waybillNo,
    success: () => {
      uni.showToast({
        title: "已复制运单号",
        icon: "none",
      });
    },
  });
};
</script>

<style scoped lang="scss">
.timebox {
  
  color: #333333;
  margin-left: -130rpx;
  display: flex;
  flex-direction: column;
  
  .date{
    font-size: 26rpx;
    color: #999999;
    margin-left: 8rpx;
  }
  .time{
    font-size: 28rpx;
   
    color: #999999;
  }
  // margin-top: 20rpx;
}
.timeline :deep(.u-steps-item__content__desc){
  margin-top: -68rpx;
}
.timeline :deep(.u-text__value--tips){
  font-size: 28rpx!important;
  color:#666666!important;
}
.logistics-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

.nav-bar {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.nav-left,
.nav-right {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-back-icon {
  font-size: 18px;
  color: #333333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.content {
  flex: 1;
  margin-top: calc(var(--status-bar-height) + 44px);
}

.base-info {
  padding: 16px 16px 12px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.row:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 30rpx;
  color: #333333;
  
}

.value {
  font-size: 30rpx;
  color: #999999;
}

.waybill-row .value {
  margin-right: 8px;
}

.btn-copy {
  padding: 2px 15px;
  border-radius: 20px;
  border: 1px solid #dddddd;
  background-color: #f8f8f8;
  font-size: 12px;
  color: #666666;
}

.btn-copy-text {
  font-size: 12px;
  color: #666666;
}

.timeline {
  margin-top: 12px;
  padding: 16px 38px 32px;
  background-color: #ffffff;
  display: flex;
  .left{
  
    width: 250rpx;
  }
}

.timeline-item {
  display: flex;
  align-items: flex-start;
}

.timeline-item + .timeline-item {
  margin-top: 18px;
}

.time-col {
  width: 76rpx;
  text-align: left;
  margin-right: 8px;
}

.date {
  font-size: 26rpx;
  color: #666666;
}

.time {
  margin-top: 2px;
  font-size: 28rpx;
  color: #999999;
}

.axis-col {
  width: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot.active {
  background-color: #00c15b;
  border-color: #00c15b;
}

.dot-icon {
  font-size: 12px;
  color: #ffffff;
}

.line {
  flex: 1;
  width: 2px;
  background-color: #00c15b;
  margin-top: 2px;
}

.line-gray {
  background-color: #e0e0e0;
}

.content-col {
  flex: 1;
  padding-left: 8px;
}

.desc {
  font-size: 13px;
  line-height: 1.6;
  color: #999999;
}

.desc-active {
  color: #333333;
}
</style>