<!--
  @description: 对账发票管理-物流详情弹框
  @Modifier：dijia
  @date：2021/09/01
-->
<template>
  <el-dialog :visible.sync="dialog.visible" custom-class="shop_mall_dialog" title="物流详情" width="850px">
    <!-- 物流详情 -->
    <p class="mb16">
      物流详情：
    </p>
    <div class="progress-content">
      <el-scrollbar style="height:100%">
        <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>
        <span v-else>暂无物流信息</span>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
// 接口
import {} from '@/api/shoppingmall/order'
export default {
  name: 'LogisticsDetails',
  components: {},
  props: {
    orderWlObj: {
      type: Array,
      default: function() {
        return []
      }
    },
    dialog: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.orderWlObj = [
        {
          operateTime: '2021-03-11 09:05:38',
          content: '您提交了订单，请等待系统确认',
          operator: '客户'
        },
        {
          operateTime: '2021-03-11 09:10:10',
          content: '您的订单已经进入京东广州仓库准备出库',
          operator: '系统'
        },
        {
          operateTime: '2021-03-11 09:10:10',
          content: '您的订单预计2021-03-11 09:10开始处理，请您耐心等待',
          operator: '系统'
        },
        {
          operateTime: '2021-03-11 09:10:11',
          content: '温馨提示：您的订单预计3月11日送达您手中',
          operator: '系统'
        },
        {
          operateTime: '2021-03-11 10:00:12',
          content: '您的订单已经打印完成',
          operator: 'huangzhixun1'
        },
        {
          operateTime: '2021-03-11 10:12:35',
          content: '拣货完成',
          operator: '张朝彬'
        },
        {
          operateTime: '2021-03-11 10:38:43',
          content: '扫描完成',
          operator: '黄锦丽'
        },
        {
          operateTime: '2021-03-11 10:47:47',
          content: '打包完成',
          operator: '京东打包员'
        },
        {
          operateTime: '2021-03-11 11:03:35',
          content: '您的订单在京东【佛山狮山分拣中心】分拣完成',
          operator: '廖志林'
        },
        {
          operateTime: '2021-03-11 11:15:24',
          content: '您的订单由京东【佛山狮山分拣中心】送往【深圳民治分拣中心】',
          operator: '赖文月'
        },
        {
          operateTime: '2021-03-11 14:14:41',
          content: '您的订单在京东【深圳民治分拣中心】分拣完成',
          operator: '张杰'
        },
        {
          operateTime: '2021-03-11 14:24:09',
          content: '您的订单由京东【深圳民治分拣中心】送往【深圳石厦营业部】',
          operator: '刘云风'
        },
        {
          operateTime: '2021-03-11 16:08:57',
          content: '您的订单已到达京东【深圳石厦营业部】',
          operator: '彭志坚'
        },
        {
          operateTime: '2021-03-11 16:22:47',
          content:
            '您的订单正在配送途中（快递员：蔡振威，电话：18148519297），请您耐心等待。 ',
          operator: '蔡振威'
        },
        {
          operateTime: '2021-03-11 17:25:54',
          content:
            '您的订单已由公司前台代收。如有疑问您可以联系配送员【蔡振威，18148519297】确认。感谢您在京东购物，欢迎再次光临。',
          operator: '蔡振威'
        }
      ]
      this.logisFormat()
    },
    logisFormat() {
      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')
      })
    }
  }
}
</script>

<style scoped lang="less">

.progress-content {
  width: 100%;
  height: 400px;
  // overflow-y: auto;
  margin-top: 5px;
  padding-left: 5px;
  position: relative;
  ul {
    padding: 0 10px;
  }
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
.progress-content li {
  position: relative;
  padding: 9px 0 0 14px;
  line-height: 38px;
  border-left: 1px solid #d9d9d9;
  color: #999;
  &:last-of-type {
    border: none;
  }
}

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

.progress-content li .node-icon {
  position: absolute;
  left: -6px;
  top: 0;
  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: 15px;
  position: relative;
  top: -13px;
  display: inline-block;
  vertical-align: middle;
}

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

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

.progress-content li.first .txt {
  max-width: 600px;
}

/deep/.el-dialog__body {
  padding: 10px 20px 15px;
}
</style>
