<template>
  <div class="step-container" :class="'type__'+stepState">
    <div class="step-time ">
      <div class="step-date">{{stepInfo.date}}</div>
      <div class="step-hours">{{stepInfo.time}}</div>
    </div>
    <div class="step-tips">
      <div >
<!--        <van-icon class="state-icon" name="smile" />-->
        <van-icon class="state-icon" :size="calcStateIcon(stepInfo.typeCode)==='circle'?'13':''" :name="calcStateIcon(stepInfo.typeCode)" />
      </div>
      <div class="state-line" v-show="stepInfo.showLine"></div>
    </div>
    <div class="step-content ">
      <div class="step-type">{{stepInfo.type}}</div>
      <div class="step-text" >{{stepInfo.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'stepItem',
  data () {
    return {
      state: 'normal',
      icons: {
        xd: require('@/assets/img/icon_xiadan.png'),
        xdOver: require('@/assets/img/icon_xiadan_over.png'),
        fh: require('@/assets/img/icon_fahuo.png'),
        fhOver: require('@/assets/img/icon_fahuo_over.png'),
        ps: require('@/assets/img/icon_paisong.png'),
        psOver: require('@/assets/img/icon_paisong_over.png'),
        ys: require('@/assets/img/icon_yunsong.png'),
        ysOver: require('@/assets/img/icon_yunsong_over.png'),
        qs: require('@/assets/img/icon_qianshou.png')
      }
    }
  },
  props: {
    stepInfo: {
      type: Object,
      default: () => {
        return {
          date: '2020-03-10',
          time: '10:08:08',
          type: '状态名称',
          typeCode: '100',
          text: '内容信息',
          showLine: true
        }
      }
    }
  },
  computed: {
    stepState: function () {
      return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history'
    }
  },
  methods: {
    calcStateIcon(typeCode) {
      let resIcon = 'circle'//this.icons.xd
      switch (typeCode) {
        // 已开单
        case '100':
          resIcon = this.stepState === 'normal' ? this.icons.xd : this.icons.xdOver
          break
        // 已取消
        case '110':
          break
        // 已完成
        case '180':
          break
        // 待出库
        case '200':
          break
        // 拣配中
        case '210':
          break
        // 已出库
        case '220':
          resIcon = this.stepState === 'normal' ? this.icons.fh : this.icons.fhOver
          break
        // 调度中
        case '300':
          break
        // 运输中
        case '310':
          resIcon = this.stepState === 'normal' ? this.icons.ys : this.icons.ysOver
          break
        // 已签收
        case '400':
          // resIcon = this.stepState === 'normal' ? this.icons.qs : this.icons.qs
          resIcon = this.stepState === 'normal' ? this.icons.ps : this.icons.psOver
          break
        // 签收回执
        case '410':
          break
        default:
      }
      return resIcon
    }
  }
}
</script>

<style lang="scss" scoped>
  .step-container {
    display: flex;
    margin-top: 20px;
    //align-items: center;
    //height:60px;
    //border-bottom: 1px solid $line;
    /*时间 选中*/
    .step-time {
      flex: 1.5;
      text-align: center;
      .step-date {
        color: $txtGray9;
      }
      .step-hours {
        font-size: 14px;
        font-weight: bold;
        color: $txtBlack;
      }
    }
    /*图标 连接线*/
    .step-tips {
      flex: 0.5;
      font-size: 18px;
      position:relative;
      text-align: center;
      //margin-top:-12px;

      .state-icon{
        z-index: 100;
        font-weight: bold;
        color: $main1
      }

      .state-line {
        position: absolute;
        z-index:1;
        left: 0;
        right: 0;
        top: 16px;
        width: 2px;
        height: 120%;
        margin: 0 auto;
        background-size: 2px 11px;
        background-repeat: repeat-y;
        background-image: linear-gradient(
            0deg,
            $txtGrayL 0%,
            $txtGrayL 50%,
            transparent 50%
        );
      }
    }
    /*内容 选中*/
    .step-content {
      flex: 5;
      margin-left: 2px;
      .step-type {
        font-weight: bold;
        font-size: 14px;
      }
      .step-text {
        font-size: 12px;
        color: $txtGray9;
        margin-top:2px;
        margin-right: 10px;
      }
    }
  }
  /*非选中 文字颜色*/
  .type__history {
    .step-time {
      .step-date {
        color: $txtGrayL;
      }
      .step-hours {
        color: $txtGrayL;
      }
    }
    .step-tips {
      .state-icon {
        color: $txtGrayL;
        background-color: #fff;
      }
    }
    .step-content {
      .step-type {
        color: $txtGrayL;
      }

      .step-text {
        color: $txtGrayL;
      }
    }
  }
</style>
