<template>
  <div
    class="bx-step-wrapper"
    :style="{
      width: 1 / 4 * 100 + '%'
    }"
    >
    <!-- 横向型 -->
    <hr 
      v-if="type === 'horizontal'"
      class="bx-steps-hr"
      >
    <div 
      class="bx-step-item-h" 
      v-if="$parent.type === 'horizontal'"
      >
      <span 
        class="bx-step-number" 
        v-if="index >= $parent.active" 
        :style="[bgColorHorizontal]"
        >
        {{ index + 1 }}
      </span>
      <span
        class="bx-step-number"
        v-else
        :style="[bgColorHorizontal]"
        >
        <bxs-icon 
          name="check"
          class="bx-step-check" 
          />
      </span>

      <p 
        class="bx-step-item-title" 
        :style="[colorHorizontal]" 
        >
        <slot />
        <span
          v-if="description"
          class="bx-step-item-desc"
          >
          {{ description }}
        </span>
      </p>
    </div>

    <!-- 燕尾型 -->
    <div 
      class="bx-step-item-tail" 
      v-if="$parent.type === 'tail'"
      :class="index === $parent.active || index === $parent.active - 1 ? 'bx-step-tail-no-border': ''" 
      :style="[bgColorTail]"
      >
      <em 
        class="bx-step-tail-arrow1" 
        :style="[bgColorTail]"
        />
      <em 
        class="bx-step-tail-arrow2" 
        :style="[bgColorTail]"
        />
      <p 
        class="bx-step-item-title" 
        :style="[colorTail]"
        >
        <slot />
      </p>
    </div>
  </div>
</template>
<script>
import Icon from '../icon/index'
import { create } from '../utils'

export default create({
  name: 'step',
  props: {
    description: {
      type: String,
      default: '',
    },
    status: {
      // status类型。状态
      type: String,
      default: '',
      validator(value) {
        // 值必须是这些字符串中的一个
        return ['', 'error'].indexOf(value) !== -1
      },
    },
  },
  computed: {
    type() {
      return this.$parent.type
    },
    stepCount() {
      return this.$parent.stepCount
    },
    index() {
      return this.$parent.$children.indexOf(this)
    },
    errorColor() {
      return this.status === 'error' ? '#F4333C' : ''
    },
    bgColorHorizontal() {
      return {
        background:
          this.index <= this.$parent.active
            ? this.errorColor || this.$parent.activeColor
            : '',
      }
    },
    colorHorizontal() {
      return {
        color:
          this.index <= this.$parent.active
            ? this.errorColor || this.$parent.activeColor
            : '',
      }
    },
    bgColorTail() {
      return {
        background:
          this.index === this.$parent.active
            ? this.errorColor || this.$parent.activeBgColor
            : '',
      }
    },
    colorTail() {
      const color = this.status === 'error' ? '#fff' : this.$parent.activeColor
      return {
        color: this.index === this.$parent.active ? color : '',
      }
    },
  },
  components: {
    [Icon.name]: Icon,
  },
})
</script>
<style>
@import './index.css';
</style>
