<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <view class="h-base bg-hex-f5f5f5"></view>
    <view class="bg-white mt-base px-base text-xl text-txGray pb-50rpx">
      <view class="text-xl text-txGray"> 承运人：{{info.shipping_company}}</view>
      <view class="flex items-center ">
        <view>运单号：<text class="text-txBase font-extrabold">{{info.shipping_number}}</text></view>
        <view @tap="copy(info.shipping_number)"
          class="ml-base w-110rpx h-50rpx rounded-lg bg-hex-E5E5E5 text-center leading-50rpx text-md">复制
        </view>
      </view>
      <!--  <view> 预计送达：<text class="text-txBase font-extrabold ">9月14日晚</text> </view> -->
    </view>
    <!--  -->
    <view class="h-base bg-hex-f5f5f5"></view>
    <view class="bg-white p-40rpx">
      <block v-if="info.shipping_info==null">
       <view class="flex items-center justify-center flex-col mt-200rpx">
         <u-empty text="暂无物流信息" mode="data"></u-empty>
       </view>
      </block>
      <block v-else>
        <u-time-line>
          <u-time-line-item v-for="(item,index) in info.shipping_info" :key="index">
            <template v-slot:node >
                <image v-if="index==0" class="w-48rpx h-48rpx" src="/static/images/logistics/complete.png" mode=""></image>
              <view v-else class="u-node"></view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{item.status}}</view>
                <view class="u-order-desc">{{item.context}}</view>
                <view class="u-order-time">{{item.time}}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </block>
      
    </view>
  </view>
</template>

<script>
  import uniCopy from '@/utils/uni-copy'
  export default {
    data() {
      return {
        isFirstLoading:true,
        info: {},
        id:''
      };
    },
    onLoad({id}) {
      this.getDate(id)
    },
    methods: {
      async getDate(id) {
        try{
          let resDate = await this.$api.get(`/v1/order/orders/${id}/shipping-info`)
          this.info = resDate
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
      copy(val) {
        uniCopy({
          content:val ?? '',
          success:(res)=>{
            this.$u.toast(res);
          },
          error:(e)=>{
            this.$u.toast(e);
          }
        })
      }
    }
  }
 
</script>
<style>
  page {
    background: #FFFFFF;
   /* height: 100vh; */
  }
</style>
<style lang="scss">
  .u-node {
    width: 15rpx;
    height: 15rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
</style>
