<template>
  <div class="box">
    <el-form ref="formRef" label-width="84px">
      <el-col>
        <el-row>
          <el-col :span="4">
            <span>包裹编号:</span>{{ datas?.basic?.order_sn }}</el-col
          >
          <el-col :span="5">
            <span>三轮车牌照:</span>{{ datas?.basic?.license }}</el-col
          >
          <el-col :span="5">
            <span>使用人:</span>{{ datas?.basic?.use_user_name }}</el-col
          >
          <el-col :span="5">
            <span>联系方式:</span>{{ datas?.basic?.use_user_phone }}</el-col
          >
          <!-- <el-col :span="5"> <span>身份:</span>11111111111</el-col> -->
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>订单号:</span>{{ datas?.basic?.order_sn }}</el-col
          >
          <el-col :span="6">
            <span>用户下单时间:</span>{{ datas?.basic?.create_time }}</el-col
          >
          <el-col :span="6">
            <span>下单用户:</span>{{ datas?.basic?.user_name }}</el-col
          >
          <el-col :span="6">
            <span>上车时间:</span>{{ datas?.basic?.qh_time }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>收货地址:</span>{{ datas?.basic?.receiver_address }}</el-col
          >
          <el-col :span="6">
            <span>已运输:</span>
            <!-- {{
              time.days +
              "天" +
              time.hours +
              "时" +
              time.minutes +
              "分" +
              time.seconds +
              "秒"
            }} -->
            {{ datas?.basic?.diff_time }}
          </el-col>
          <el-col :span="6">
            <span>提供商家:</span>{{ datas?.basic?.shop_name }}</el-col
          >
          <el-col :span="6">
            <span>商户地址:</span>{{ datas?.basic?.shop_address }}</el-col
          >
        </el-row>
      </el-col>
      <el-row> 商户详情: </el-row>
      <el-row v-if="show">
        <el-col :span="6" v-for="(item, index) in datas?.goods">
          <div class="goods_detil">
            <div class="goods_img">
              <img :src="item?.goods_img" alt="" />
            </div>
            <div class="goods_content">
              <p>{{ item?.goods_name }}</p>
              <p>
                <span>{{ item?.goods_price }}</span>
                <span>x{{ item?.product_num }}</span>
              </p>
              <p>
                <span>{{ item?.goods_price }}</span>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

import { goodsDetailApi } from "@/api/vehicle";
const route = useRoute();
const list = reactive([1, 1, 1, 1, 1, 1, 1, 1, 1]);
// 时间计算
const time = reactive({
  days: "",
  hours: "",
  minutes: "",
  seconds: "",
});
const show = ref(false);
const datas = ref({});
const startTimer = () => {
  const startTime = new Date(); //开始时间
  const timer = setInterval(() => {
    const currentTime = new Date();
    const timeDiff = currentTime - startTime;
    time.days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    time.hours = Math.floor(
      (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    time.minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    time.seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
  }, 1000);
};

// startTimer();
goodsDetailApi({ ...route.query }).then((res) => {
  console.log(res);
  datas.value = res;
  show.value = true;
});
console.log(datas);
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 1vh 1vw;
  .el-row {
    margin-bottom: 3vh;
  }

  span {
    margin-right: 1vw;
  }
  .goods_detil {
    display: flex;
    margin-top: 1vh;
    .goods_img {
      width: 6vw;
      height: 13vh;
      //   background-color: red;
    }
    .goods_content {
      box-sizing: border-box;
      padding-left: 10px;
      width: 8vw;
      height: 13vh;
      //   background-color: green;
      p {
        display: flex;
        justify-content: space-between;
        margin: 1vh 0;
      }
    }
  }
}
</style>
