<template>
  <div class="monitor-step">
    <div class="lines" :style="setTop">
      <div class="line done" :style="`width:${doneWidth}%`"/>
      <div class="line" :style="`width:${notWidth}%`"/>
    </div>
    <div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
      <p :title="step.name" :class="{none: i > current}">{{step.name}}</p>
      <div ref="icon" :class="{icon: true, none: i > current}" />
      <!-- <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/> -->
      <!-- <div v-else class="none"/> -->
      <span class="msg" :title="step.msg" v-html="msg[i]"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MonitorStep',
  props: {
    steps: {
      type: Array,
      required: true,
    },
    current: {
      type: [Number, String],
      default: 0,
    },
    msg: {
      type: Array,
      default() {
        return []
      },
    }
  },
  data() {
    return {
      setTop: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setTop = {top: `calc(${this.$refs.icon[0].offsetTop}px + 0.035rem)`}
    })
  },
  computed: {
    linePercent() {
      const len = this.steps.length
      if (len > 2) return 100 / (len - 1)
      return 100
    },
    doneWidth() {
      const index = Number(this.current)
      if (Number.isNaN(index)) {
        console.error('Props: "current" is NaN!')
        return
      }
      return Math.round(this.linePercent * index)
    },
    notWidth() {
      return 100 - this.doneWidth
    }
  }
}
</script>

<style lang="stylus" scoped>
.monitor-step
  width 90%
  margin 0.05rem auto 0
  display flex
  justify-content space-between
  position relative
  font-size 0.09rem
  .lines
    display flex
    position absolute
    width 100%
    left -0.05rem
    z-index -1
    >.line
      height 0.01rem
      // background rgba(0,0,0,0.8)
      background rgba(112,167,224,.2)
      border-radius .1rem
      margin-left 0.05rem
      &.done
        background linear-gradient(to right, #5BD5FF, #2F86EE)
  .item
    text-align center
    width .1rem
    position relative
    .icon
      width .06rem
      height @width
      background #5BD5FF
      border .025rem solid #00F2FF
      box-shadow 0 0 .08rem .01rem #00F2FF
      border-radius 50%
      // width .1rem
      // height .1rem
      // background-color $edgeColor
      // background-position center
      // background-size 60%
      // background-repeat no-repeat
      &.none
        background #0076FF
        border .025rem solid #00418D
        box-shadow none
    // .none
    //   width 0.08rem
    //   height 0.08rem
    //   border 0.02rem solid $edgeColor
    //   border-radius 50%
    //   transform translateY(10%)
    .msg
      display inline-block
      font-size 0.06rem
      width .4rem
      transform translateX(-50%)
      margin 0.02rem 50%
      font-weight normal
      color #aaa
    p
      width .5rem
      margin 0.05rem 50%
      transform translateX(-50%)
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      color #ccc
      font-size 0.08rem
      &.none
        color #666
    &.on
      .icon
        background #FF9D27
        border .025rem solid #FFCE34
        box-shadow 0 0 .08rem .01rem #FFCE34
        // transform scale(1.2)
        // animation shine 2s alternate infinite ease-in-out
      p
        color #FFCE34
        // font-weight bold
// @keyframes shine {
//   from {
//     box-shadow none
//   }
//   to {
//     box-shadow 0 0 .1rem 0.01rem #fff
//   }
// }
</style>
