<template>
  <div ref="itemRef" :class="cls" @click="handleClick">
    <div v-if="showTail" :class="`${prefixCls}-tail`" />
    <div v-if="stepType !== 'arrow'" :class="`${prefixCls}-node`">
      <slot name="node" :step="stepNumber" :status="computedStatus">
        <div v-if="stepType !== 'dot'" :class="iconCls">
          <slot name="icon" :step="stepNumber" :status="computedStatus">
            <i class="el-icon-check" v-if="computedStatus === 'finish'" />
            <i class="el-icon-close" v-else-if="computedStatus === 'error'" />
            <template v-else>{{ stepNumber }}</template>
          </slot>
        </div>
      </slot>
    </div>
    <div :class="`${prefixCls}-content`">
      <div :class="`${prefixCls}-title`">
        <slot>{{ title }}</slot>
      </div>
      <div
        v-if="description || $slots.description"
        :class="`${prefixCls}-description`"
      >
        <slot name="description">
          {{ description }}
        </slot>
      </div>
      <i v-if="type === 'navigation'" class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
import useIndex from '../mixins/index';

export default {
  name: 'ElStep',
  mixins: [useIndex],
  props: {
    /**
     * @zh 步骤的标题
     * @en Title of the step
     */
    title: String,
    /**
     * @zh 步骤的描述信息
     * @en Description of the step
     */
    description: String,
    /**
     * @zh 步骤的状态
     * @en Status of the step
     * @values 'wait', 'process', 'finish', 'error'
     */
    status: {
      type: String,
    },
    /**
     * @zh 是否禁用
     * @en Whether to disable
     */
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  /**
   * @zh 节点
   * @en Node
   * @slot node
   * @binding {number} step
   * @binding {string} status
   */
  /**
   * @zh 图标
   * @en Icon
   * @slot icon
   * @binding {number} step
   * @binding {string} status
   */
  /**
   * @zh 描述内容
   * @en Description
   * @slot description
   */
  inject: [
    'type',
    'parentCls',
    'getStatus',
    'onClick',
    'errorSteps',
    'addItem',
    'removeItem',
    'lineLess',
    'labelPlacement',
    'direction',
    'current'
  ],
  data() {
    return {
      prefixCls: 'el-steps-item',
      icon: 'el-steps-icon',
      itemRef: null,
      selector: '.el-steps-item',
      iconCls: 'el-steps-icon'
    }
  },
  computed: {
    stepNumber() {
      return this.computedIndex + 1;
    },
    computedStatus() {
      return this.status || this.getStatus(this.stepNumber) || 'process';
    },
    nextStepError() {
      return this.errorSteps.includes(this.stepNumber + 1) || false;
    },
    showTail() {
      return !this.lineLess &&
        (this.labelPlacement === 'vertical' ||
          this.direction === 'vertical')
    },
    cls() {
      return [
        this.prefixCls,
        `${this.prefixCls}-${this.computedStatus}`,
        {
          [`${this.prefixCls}-active`]: this.stepNumber === this.current,
          [`${this.prefixCls}-next-error`]: this.nextStepError,
          [`${this.prefixCls}-disabled`]: this.disabled,
          // [`${prefixCls}-custom`]: !!icon,
        },
      ]
    },
    stepType() {
      return this.type || 'default';
    }
  },
  created() {
    if (this) {
      this.addItem(
        this.uid,
        {
          step: this.stepNumber,
          status: this.computedStatus,
        }
      );
    }
    this.itemRef = this.$refs.itemRef;
  },
  mounted() {
    this.itemRef = this.$refs.itemRef;
  },
  methods: {
    handleClick(ev) {
      if (!this.disabled) {
        this.onClick(this.stepNumber, ev);
      }
    }
  },
  beforeDestroy() {
    if (this) {
      this.removeItem(this.uid);
    }
  }
}
</script>
