<template>
  <section class="AiStep flex start" :class="{active}">
    <div class="leftPane mar-r32">
      <div class="num" v-text="stepIndex"/>
      <div v-if="!isLast" class="stepLine fill"/>
    </div>
    <div class="fill">
      <slot/>
    </div>
  </section>
</template>

<script>
export default {
  name: "AiStep",
  inject: ['activeStep'],
  props: {
    index: {default: null},
  },
  computed: {
    active: v => v.activeStep == v.stepIndex,
    stepIndex: v => {
      const index = v.$parent.items.findIndex(e => e == v._uid)
      return index > -1 ? index + 1 : ""
    },
    isLast: v => v.$parent.items.length == v.stepIndex
  },
  created() {
    this.$parent.items.splice(this.index, 0, this._uid)
  },
  destroyed() {
    const index = this.$parent.items.findIndex(e => e == this._uid)
    this.$parent.items.splice(index, 1)
  }
}
</script>

<style lang="scss" scoped>
.AiStep {
  width: 100%;
  font-size: 28px;
  position: relative;

  .leftPane {
    width: 32px;

    .num {
      color: #333;
      height: 32px;
      width: 32px;
      font-size: 28px;
      line-height: 32px;
      text-align: center;
      border: 4px solid #CCCCCC;
      border-radius: 50%;
    }

    .stepLine {
      position: absolute;
      top: 40px;
      bottom: 0;
      width: 4px;
      left: 20px;
      transform: translateX(-50%);
      background: #eee;
    }
  }

  &.active {
    .leftPane {
      .num {
        background: #26f;
        border-color: #26f;
        color: #fff;
      }
    }
  }
}
</style>
