<template>
  <el-drawer
    v-loading="load"
    title="物流信息"
    :visible.sync="drawer"
    :direction="direction"
    size="30%">
    <div class="order-logistcs">
      <el-timeline :reverse="true" v-if="data && data.length > 0">
        <el-timeline-item v-for="(item,index) of data" :key="index" :timestamp="item.tmsStatus + ' ' +item.createTime" placement="top">
          <el-card>
            <!-- <h4>{{item.tmsStatus}}</h4> -->
            <p v-if="item.tmsOrderNo">单号：{{ item.tmsOrderNo }}</p>
            <!-- <p v-if="item.tmsCarrierName">物流：{{ item.tmsCarrierName }}</p> -->
            <p v-if="item.tmsPlateNumber">车牌：{{ item.tmsPlateNumber }}</p>
            <p v-if="item.tmsDriverName">司机：{{ item.tmsDriverName }}</p>
            <p v-if="item.tmsDriverPhone">电话：{{ item.tmsDriverPhone }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
      
  </el-drawer>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { queryByOrderNo } from  '@/api/delivery'
@Component({components:{}})
export default class LogisticsInfo extends Vue {
  drawer=false;
  direction='rtl'
  load = false;
  data:Array<any>=[]

  setShow(v:boolean){
    this.drawer = v;
  }
  loadData(code:string){
    if(!code){
      this.$message('订单编号不能为空！')
      return
    }
    this.load = true;
    queryByOrderNo({orderNo:code}).then((res:any) => {
      this.load = false;
      this.data = []
      if(res.data){
        this.data = res.data;
      }
    }).catch(() => {
      this.load = false;
    })
  }
}
</script>
<style lang="scss" scoped>
.order-logistcs{
  width: 100%;
  box-sizing: border-box;

  padding: 0 16px;
}
.info{
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  border-bottom: solid 1px #EEE;
  .logistic-state{
    font-size: 14px;
  }
  .logistic-time{
    font-size: 12px;
    padding-top: 8px;
    color: #999;
  }
}
.info:last-child{
  border: none;
}
</style>