<template>
  <div>
    <div class="popTitle font-bold font-16">物流信息</div>
    <div class="logisticsInfo">
      <div class="submit tipLogo">
        <img src="@/assets/img/ic_logistics.png" class="logisticsIcon">
        <div class="logNum">
          <span class="logTitle">订单编号</span>
          <div class="logContent">
            <span class="logValue">{{this.orderLogInfo.orderNo}}</span>
            <span class="logState">{{this.orderType}}</span>
          </div>
        </div>
      </div>
      <div style="height: 14px;background: #F5F8FB"></div>
      <van-steps direction="vertical" :active="0" active-color="#2F78ED" class="logStep">
        <van-step v-for="(item,index) in logStepList" :key="item.xuhao" class="typeIcon" inactive-icon="logistics">
          <div :class=" index===0 ? 'logStepTitle font16': 'logStepTitle font13'">{{item.status}}</div>
          <div class="logStepTime">
            <div class="stepTimeHours">{{breakTimeStr(item.datetime,'')}}</div>
            <div class="stepTimeDate">{{breakTimeStr(item.datetime,'date')}}</div>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
import {getLogStepList} from '@/api/saleSituation'

export default {
  name: 'Creditworthiness',
  data() {
    return {
      logType1: require('@/assets/img/1.jpg'),
      logStepList: [],
      orderType:''
    }
  },
  props: {
    orderLogInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    orderLogInfo: {
      deep: true,
      handler(data) {
        this.getData()
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    breakTimeStr(time, type) {
      // eslint-disable-next-line no-redeclare
      let arr = time.split(' ')
      if (type === 'date') {
        return arr[0].substr(-5, 5)
      } else {
        return arr[1].substring(0, 5)
      }
    },
    splitInfo(res, key) {
      return res.split(key)
    },
    stateClass(state) {
      if (state.include('订单生成')) {

      } else if (state.include('配货完成')) {

      } else if (state.include('已排车')) {

      } else {

      }
    },
    getData() {
      this.orderType = this.splitInfo(this.orderLogInfo.webFromType, '/')[1]
      let orderTypeData = ''
      if (this.orderType === '正常订单' || this.orderType === '渠道订单') {
        orderTypeData = 'Z'
      } else if (this.orderType === '退货订单' || this.orderType === '拒收') {
        orderTypeData = 'T'
      } else if (this.orderType === '金额修正订单') {
        orderTypeData = 'O'
      }

      let param = {
        'attr': {'sscOrderId': this.orderLogInfo.sysOrderTypeId},
        'start': '1',
        'length': '999',
        'dbName': this.orderLogInfo.dbName + '-' +
          this.orderLogInfo.orderNo + '-' +
          orderTypeData + '-' +
          this.orderLogInfo.tmsRealDb + '-' +
          this.orderLogInfo.clientId // 'erp_ogg_shaphar-301202004151252-Z-tms_real_shaphar-3369'
      }
      getLogStepList(param).then(rt => {
        if (rt.code === '1' || rt.code === 1) {
          this.logStepList = rt.data
        } else {
          this.$toast.fail('数据请求失败')
        }
      }).catch(e => {
        this.$toast.fail('接口请求失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .logisticsInfo {
    overflow: scroll;
    background: white;
    height: calc(100vh - 46px);

    .tipLogo {
      height: 88px;
      width: 100%;
      display: flex;
      align-items: center;

      .logisticsIcon {
        width: 75px;
        height: 35px;
        margin-left: 15px;
      }

      .logNum {
        margin-left: 32px;
        color: #fff;

        .logTitle {
          font-size: 13px;
          margin-bottom: 14px;
        }

        .logContent {
          margin-top: 6px;
        }

        .logValue {
          font-size: 16px;
          font-weight: bold;
        }

        .logState {
          font-size: 10px;
          background: #6680EE;
          padding: 3px 5px;
          border-radius: 3px;
          margin-left: 17px;
        }
      }
    }

    .logStep {
      padding-left: 80px;
      margin-top: 15px;

      /deep/ .van-step--vertical{
        height: 80px;
      }
      /deep/ .van-step--vertical::after{
        border-bottom-color: transparent;
      }
      /deep/ .van-step--process{
        font-size: 16px!important;
      }
      /deep/ .van-step__title{
        margin-left: -50px;
      }
      .logStepTitle {
        margin-left: 50px;
      }
      .logStepTime {
        display: inline-block;
        position: absolute;
        top:2px;
        left: -69px;

        .stepTimeHours {
          font-size: 15px;
        }
        .stepTimeDate {
            font-size: 10px;
        }
      }
    }

    .typeIcon{
      /deep/ .van-step__circle-container{
        i {

        }
      }
    }

    /deep/ .van-icon.van-icon-checked {
      font-size: 20px;
    }
  }

  .popTitle {
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #23262A;
    font-weight: bold;
    margin: 0;
    border-bottom: 1px solid #f7f8fa;
  }

  .red-tips {
    color: $bc4;
  }

  .font13 {
    font-size: 13px;
  }

  .font16{
    font-size: 16px;
  }
  /*自定义图标*/
  .logicicon {
    /deep/ .van-step__circle {
      width: 20px;
      height: 20px;
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        z-index: 1;
      }
    }
    &.truck /deep/ .van-step__circle:after {
      content: "\f0d1";
      transform: translate(-55%, -50%);
    }
    &.document /deep/ .van-step__circle:after {
      content: "\f15c";
      font-size: 12px;
      transform: translate(-50%, -50%);
    }
  }
</style>
