<template>
  <div class="hn-step-bar">
      <slot></slot>
  </div>
</template>

<script>
import Migrating from 'heiner-ui/src/mixins/migrating';

export default {
  name: 'HnStepBar',

  mixins: [Migrating],

  props: {
    space: [Number, String],
    active: Number,
    finishStatus: {
      type: String,
      default: 'finish'
    },
    processStatus: {
      type: String,
      default: 'process'
    },
    alignCenter: {
      type: Boolean,
      default: true
    },
    lineOffset: {
      type: String,
      default: '29px'
    }
  },

  data() {
    return {
      steps: []
    };
  },

  created() {
    this.steps = this.$slots.default.filter(vNode => vNode.tag && vNode.tag.toUpperCase().indexOf('STEP') > -1);
  },

  methods: {
    getMigratingConfig() {
      return {
        props: {
          'center': 'center is removed.'
        }
      };
    }
  },

  watch: {
    active(newVal, oldVal) {
      this.$emit('change', newVal, oldVal);
    }
  }
};
</script>
