<template>
  <div :class="_class">
    <slot></slot>
  </div>
</template>

<script>
  import GetElSlots from '../scripts/mixins/get-el-slots';

  const name = 'hive-steps';

  export default {
    name,
    mixins: [
      GetElSlots,
    ],
    props: {
      active: {
        type: Number,
        default: 0,
      },
      direction: String,
      status: String,
    },
    data() {
      const elSlots = this.getElSlots();
      return {
        elSlots,
      };
    },
    provide() {
      return {
        steps: this,
      };
    },
    computed: {
      _class() {
        const direction = this.direction ? this.direction : 'horizontal';
        return [
          name, name + '--' + direction,
        ];
      },
    },

    mounted() {
      this.initSlots();
      this.initSkip();
    },

    methods: {
      initSkip() {
        for (let i = 0; i < this.elSlots.length; i++) {
          let item = this.elSlots[i].componentInstance;
          let nextItem = this.elSlots[i + 1] ? this.elSlots[i + 1].componentInstance : null;
          if (nextItem) {
            if (!item.skip) {
              item.skipType = item.skip === nextItem.skip ? 0 : 1;
            } else {
              item.skipType = item.skip === nextItem.skip ? 2 : 3;
            }
          } else {
            item.skipType = 0;
          }
        }
      },
      // 初始化slots
      initSlots() {
        const total = this.elSlots.length;
        this.elSlots.forEach((item, index) => {
          const { componentInstance } = item;
          componentInstance.total = total;
          componentInstance.index = ++index;
        });
      },
    },
  };
</script>
