<template>
  <div class="step-wrapper" :style="isMediumSize?'padding: 36px 0':''">
    <div class="step-content" :style="isMediumSize?'padding: 0 100px;transform: scale(1.4)':''">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YStep',
  props: {
    active: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'small',
      validator: function(value) {
        return ['medium', 'small'].includes(value)
      }
    }
  },
  data() {
    return {
      steps: []
    }
  },
  computed: {
    isMediumSize() {
      return this.$props.size === 'medium'
    }
  },
  mounted() {
    this.steps = this.$slots.default

    this.steps.forEach((item, index) => {
      if (item.child) {
        item.child.index = index + 1
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.step-wrapper {
  background: #F7F8FA;
  padding: 16px 0;
  overflow: hidden;
  .step-content {
    display: flex;
    justify-content: space-around;
  }
}

</style>
