<!--
  @description: 订单详情-发货信息
  @Modifier：杨胜国
  @routerPath: track-detail
  @date：  2021/06/01-10:00
-->
<template>
  <div>
    <div class="order_title">
      发货信息
    </div>
    <div class="track-container">
      <div class="detail-left">
        <div class="flex-box">
          <img src="@/assets/img/shopmall/deliver.png" width="18px" height="18px">
          <div>发货方式：</div>
          <span>普通快递</span>
        </div>
        <div v-if="orderDetailObj.orderProductList" class="flex-box">
          <img src="@/assets/img/shopmall/goods.png" width="18px" height="18px">
          <div>发货商品：</div>
          <span :title="orderDetailObj.orderProductList[0].goodsName" class="cursor">{{ orderDetailObj.orderProductList[0].goodsName }}</span>
        </div>
        <div class="flex-box">
          <img src="@/assets/img/shopmall/logistics.png" width="18px" height="18px">
          <div>物流公司：</div>
          <span>{{ orderDetailObj.trackingDepartName || '无' }}</span>
        </div>
        <div class="flex-box">
          <img src="@/assets/img/shopmall/truck.png" width="18px" height="18px">
          <div>运单号：</div>
          <span>{{ orderDetailObj.trackingNumber || '无' }}</span>
        </div>
      </div>
      <div class="detail-right">
        <div class="flex-box-right">
          <img src="@/assets/img/shopmall/truckdetail.png" width="18px" height="18px">
          <div>
            物流详情：
            <span v-if="!orderWlObj.length">暂无</span>
          </div>
        </div>
        <div class="progress-content">
          <ul v-if="orderWlObj.length">
            <li v-for="(item,index) in orderWlObj" :key="index" class="first">
              <i class="node-icon" />
              <span class="time">{{ item.date }}</span>
              <span class="mon">{{ item.day }}</span>
              <span class="s">{{ item.time }}</span>
              <span class="txt">{{ item.content }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrackDetail',
  components: {
  },
  props: {
    orderDetailObj: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 物流
    orderWlObj: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    orderWlObj: {
      handler(newName, oldName) {
        this.orderWlObj.forEach((item, index) => {
          item.day = this.$Moment(item.operateTime).day()
          switch (item.day) {
            case 1:
              item.day = '周一'
              break
            case 2:
              item.day = '周二'
              break
            case 3:
              item.day = '周三'
              break
            case 4:
              item.day = '周四'
              break
            case 5:
              item.day = '周五'
              break
            case 6:
              item.day = '周六'
              break
            case 7:
              item.day = '周日'
              break
          }
          item.date = this.$Moment(item.operateTime).format('YYYY-MM-DD')
          item.time = this.$Moment(item.operateTime).format('HH:mm:ss')
        })
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.track-container {
  padding: 20px 0 40px 0;
  box-shadow: 2px 2px 5px #dcd8d8;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-style: normal;
  font-size: 12px;
  .detail-left {
    width: 40%;
    .flex-box {
      display: flex;
      margin-top: 25px;
      padding-right: 10px;
      align-items: center;
      >div {
        width: 70px;
        margin-left: 10px;
      }
      >span {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      >i {
        color: #007CCC;
        font-size: 16px;
      }
      &:first-of-type {
        margin-top: 20px;
      }
    }
  }
  .detail-right {
    width: 50%;
    .flex-box-right {
      display: flex;
      align-items: center;
      margin-top: 20px;
      >div {
        margin-left: 5px;
      }
    }
  }
}
.order_title{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    padding-top: 15px;
    margin-bottom: 15px;
    // font-weight: bold;
    font-size: 16px;
  }
.progress-content {
    width: 100%;
    height: 150px;
    overflow-y: auto;
    margin-top: 5px;
    padding-left: 5px;
    position: relative;
  }

  .progress-content li {
    position: relative;
    padding: 9px 0 0 14px;
    line-height: 30px;
    border-left: 1px solid #d9d9d9;
    color: #999;
  }

  .progress-content li.first {
    padding-top: 0;
    // border-left-color: #fff;
  }

  .progress-content li .node-icon {
    position: absolute;
    left: -6px;
    top: 50%;
    width: 11px;
    height: 11px;
    background: #000000;
    background: url(http://hovertree.com/texiao/css/25/img/order-icons.png) -21px -72px
      no-repeat;
  }

  .progress-content li.first .node-icon {
    background-position: 0 -72px;
  }

  .progress-content li .time {
    margin-right: 20px;
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
  }

  .progress-content li .mon {
    margin-right: 10px;
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
  }
  .progress-content li .s {
    margin-right: 20px;
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
  }

  .progress-content li .txt {
    position: relative;
    top: 4px;
    vertical-align: middle;
  }

  .progress-content li.first .time {
    margin-right: 20px;
  }

  .progress-content li.first .txt {
    max-width: 600px;
  }
</style>
