<template>
  <div class="bx-steps-wrapper">
    <div :class="`bx-steps-group bx-steps-group--${type}`">
      <slot />
    </div>
  </div>
</template>
<script>
import { create } from '../utils'

export default create({
  name: 'steps',
  created() {
    if (this.stepCount) {
      if (
        this.$slots.default.some(
          step =>
            !(
              (step.componentOptions === undefined &&
                step.text &&
                step.text.trim() === '') ||
              (step.componentOptions &&
                step.componentOptions.tag === 'bxs-step')
            ),
        )
      ) {
        throw new Error(`<bxs-steps>的slot元素只能为<bxs-step>`)
      }
      if (this.active > this.stepCount) {
        throw new Error(`步骤值不能大于步骤最大值: ${this.stepCount}`)
      }
    } else {
      throw new Error(`组件步骤不能为空`)
    }
  },
  props: {
    type: {
      // 步骤类型
      type: String,
      default: 'horizontal',
      validator(value) {
        // 值必须是这些字符串中的一个
        return ['horizontal', 'tail'].indexOf(value) !== -1
      },
    },
    active: {
      // 当前步骤
      type: Number,
      default: 0,
    },
    activeColor: {
      // 激活状态颜色
      type: String,
      default: '#508CEE',
    },
    activeBgColor: {
      // tail类型。背景色
      type: String,
      default: '#F2F7FF',
    },
  },
  computed: {
    stepCount() {
      return (
        this.$slots.default &&
        this.$slots.default.filter(
          step =>
            step.componentOptions && step.componentOptions.tag === 'bxs-step',
        ).length
      )
    },
  },
})
</script>
<style>
@import './index.css';
</style>
