<template>
  <div class="step">
    <div class="step-container">
      <div
        v-for="(step, i) in steps"
        :key="i"
        class="item"
        :class="{ on: i == current }"
      >
        <p :title="step">
          {{ step }}
        </p>
      </div>
    </div>
    <div class="lines">
      <span v-for="(item, i) in steps" :key="i" :class="{ on: i == current }" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'Step',
  props: {
    steps: {
      type: Array as PropType<string[]>,
      required: true,
    },
    current: {
      type: [Number, String] as PropType<number | string>,
      default: 0,
    },
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.step-container
  display flex
  justify-content space-around
  .item
    text-align center
    z-index 1
    p
      color #999
      font-size .08rem
      position relative
      &:after
        content ''
        position absolute
        display block
        width 0
        height 0
        bottom -0.1rem
        left 0
        right 0
        margin 0 auto
        border .04rem solid transparent
        border-top-color rgba(91,213,255,.2)
    &.on
      p
        color $edge
        font-weight bold
        &:after
          border-top-color $edge
.lines
  width 100%
  height .05rem
  display flex
  justify-content space-around
  background rgba(91,213,255,.2)
  margin .1rem 0 .15rem
  >span
    display block
    min-width .28rem
    height 100%
    z-index 1
    &.on
      background linear-gradient(to right, $edge, rgba(255,255,255,.8), $edge)
      box-shadow 0 0 0.06rem 0.02rem rgba(0,242,255,.8)
</style>
