<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">{{step.name}}</p>
      <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">{{msg[i]}}</span>
      <span v-if="info" class="msg info" :title="getInfo(i)">{{getInfo(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项为当前的标识, 后面的布尔是判断后面是否加线
      }
    },
    info: {
      type: Object,
    },
    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) // 跟据steps数组的长度,分隔线每一调的长度占比
      return 100
    },
    doneWidth() {
      return Math.round(this.linePercent * Number(this.current))
    },
    notWidth() {
      return 100 - this.doneWidth
    }
  },
  methods: {
    getInfo(i) {
      const {info} = this
      switch (i) {
      case 0:
        return info.create_note || '暂无'
      case 2:
        return info.receive_note || '暂无'
      case 3:
        return info.done_note || '暂无'
      default:
        return '系统自动推送'
      }
    }
  },
}
</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 .1rem
  .lines
    display flex
    position absolute
    width 100%
    left -0.05rem
    >.line
      height 0.03rem
      background rgba(0,0,0,0.8)
      border-radius .1rem
      margin-left 0.05rem
      &.done
        background linear-gradient(to right, #3391FF, #02EEFF)
  .item
    text-align center
    width .1rem
    position relative
    z-index 1
    .icon
      width .1rem
      height @width
      border-radius 50%
      background-color #02f3ff
      background-position 50%
      background-size 50%
      background-repeat no-repeat
    .none
      width 0.08rem
      height @width
      border 0.02rem solid $fontColor
      border-radius 50%
      transform translateY(10%)
    .msg
      display inline-block
      font-size .1rem
      width 1rem
      transform translateX(-50%)
      margin 0.02rem 50%
      font-weight normal
      color #eee
      &.info
        width 1.3rem
        color #eee
    p
      width .5rem
      text-indent .1rem
      transform translateX(-50%)
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      font-size .09rem
      color #ccc
    &.on
      .icon
        transform scale(1.2)
        background-position 50% 50%
        background-size 70% 70%
        box-shadow 0 0 .05rem 0.01rem $icon-color
      p
        color $edgeColor
        font-weight bold
</style>
