<template>
  <div class="state-item" :class="'state-item__'+stepState">
    <div style="position:relative;z-index:1">
      <div
        :style="{display:(stepState!=='end'&& hasNext)?'block':'none',backgroundColor:stepState==='normal'?'white':''}"
        class="state-line"></div>
      <span class="state-icon-layout">
          <span v-if="this.stepState!=='select'" class="state-icon-text state-icon-b">{{ itemNum }}</span>
          <span v-else class="state-icon-b">
            <van-icon class="state-icon-img" name="success"/>
          </span>
        </span>
    </div>
    <div class="state-name">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'orderStateItem',
  props: {
    state: {
      type: String,
      default: 'normal' // normal; select; next;end
    },
    hasNext: {
      type: Boolean,
      default: true
    },
    itemNum: {
      type: Number,
      default: 0
    },
    text: {
      type: String,
      default: '已开单'
    }
  },
  data() {
    return {}
  },
  computed: {
    stepState: function () {
      let res = 'normal'
      let parentActive = this.$parent.active
      if (parentActive === this.itemNum) {
        res = 'select'
      } else if (parentActive > this.itemNum) {
        res = 'normal'
      } else {
        res = 'next'
      }
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.state-item {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  color: #fff;

  .state-icon-layout {
    background: #16a7f0;
    padding: 3px;

    .state-icon-b {
      display: inline-block;
      border-radius: 20px;
      border: solid 2.5px #fff;
      width: 25px;
      height: 25px;
      text-align: center;
    }

    .state-icon-img {
      font-size: 10px;
      font-weight: bold;
      line-height: 22px;
    }

    .state-icon-text {
      line-height: 22px;
      font-size: 16px;
    }
  }

  .state-name {
    margin-top:5px;
    color: #a8e1f3;
  }
}

.state-item__normal {

  .state-icon {

  }
}

.state-item__select {
  .state-icon-b {
    background: #ea9518;
  }
  .state-name {
    color: #fff;
  }
}

.state-item__next {

}

.state-item__end {

}

.state-line {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: -1;
  width: 95%;
  height: 2px;
  background-size: 15px 3px;
  background-repeat: repeat-x;
  background-image: linear-gradient(
      to right,
      #fff 0%,
      #fff 60%,
      transparent 50%
  );
}
</style>
