<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 == done ? 'on' : ''}`">
      <p :title="step.name">{{step.name}}</p>
      <div ref="icon" v-if="i <= current[0]" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/>
      <div v-else class="none"/>
      <span class="msg" :title="step.msg">{{msg[i]}}</span>
    </div>
  </div>
</template>

<script>
export default {
  // 顶部的lines是线 , 根据doneWidth 和notWidth 来判断宽度
  // 枚举数据,判断入参数组的第二项是否为true, 区别设置css  下一个圈是否放大
  // 下面的 icon 是判断枚举的index 是否小于 cur的第0项, 是的话就给 ✔️  对号
  name: 'MonitorStep',
  props: {
    steps: {
      type: Array,
      required: true,
    },
    current: {
      type: [String, Number, Array],
      default(){
        return [0, false]    // 第0项为当前的标识, 后面的布尔是判断后面是否加线
      }
    },
    msg: {
      type: Array,
      default() {
        return []
      },
    }
  },
  data() {
    return {
      setTop: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setTop = {top: `calc(${this.$refs.icon[0].offsetTop}px + 0.35rem)`}
    })
  },
  computed: {
    linePercent() {
      const len = this.steps.length
      if (len > 2) return 100 / (len - 1)      // 跟据steps数组的长度,分隔线每一调的长度占比
      return 100
    },
    doneWidth() {
      let index = Number(this.current[0])
      if (this.current[1]) {                   // 如果数组的第二项是 true,  流程线就会向下级多走一条
        index = index+1
      }
      if (Number.isNaN(index)) {
        console.error('Props: "current" is NaN!')
        return
      }
      return Math.round(this.linePercent * index)
    },
    done() {           // 是否进入下一条
      let index = Number(this.current[0])
      if (this.current[1]) {
        index = index+1
      }
      return index
    },
    notWidth() {
      return 100 - this.doneWidth
    }
  }
}
</script>

<style lang="stylus" scoped>
$icon-color = #1DE5AD
.monitor-step
  width 90%
  margin 0 auto
  display flex
  justify-content space-between
  position relative
  font-size 0.9rem
  .lines
    display flex
    position absolute
    width 100%
    left -0.5rem
    >.line
      height 0.3rem
      background rgba(0,0,0,0.8)
      border-radius 1rem
      margin-left 0.5rem
      &.done
        background linear-gradient(to right, #3391ff, $edgeColor)
  .item
    text-align center
    width 1rem
    position relative
    z-index 1
    .icon
      width 1rem
      height 1rem
      border-radius 50%
      background-color $icon-color
      background-position 50%
      background-size 50%
      background-repeat no-repeat
    .none
      width 0.8rem
      height 0.8rem
      border 0.2rem solid $fontColor
      border-radius 50%
      transform translateY(10%)
    .msg
      display inline-block
      font-size 0.6rem
      width 4rem
      transform translateX(-50%)
      margin 0.2rem 50%
      font-weight normal
      color #aaa
    p
      width 5rem
      text-indent 1rem
      transform translateX(-50%)
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      color $fontColor
      font-size 0.8rem
    &.on
      >div
        width 0.9rem
        height 0.9rem
        border 0.1rem solid $edgeColor
        transform scale(1.2)
      .icon
        transform scale(1.2)
        box-shadow 0 0 1rem 0.2rem $icon-color
      p
        color #fff
        // font-weight bold
</style>
