<template>
  <div :class="_class">
    <slot>
      <div :class="_iconClass">
        <Icon
          icon="tick"
          v-if="_icon === 'finish'"
        />
        <Icon
          icon="error"
          v-else-if="_icon === 'error'"
        />
        <template v-else>
          {{ index }}
        </template>
      </div>
      <div class="hive-steps__content">
        <div
          v-if="_showTail"
          :class="_tail"
        />
        <div :class="_title">
          {{ title }}
        </div>
        <div :class="_description">
          {{ desc }}
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
import Icon from '../icon';
const name = 'hive-steps__item';
const iconName = 'hive-steps__icon';
const tail = 'hive-steps__tail';
const title = 'hive-steps__title';
const description = 'hive-steps__description';

export default {
  name,
  components: { Icon },
  props: {
    title: String,
    desc: String,
    skip: Boolean
  },
  data() {
    return {
      index: -1,
      total: 1,
      skipType: 0,
      icon: {
        finish: '',
        error: ''
      }
    };
  },
  inject: [
    'steps'
  ],
  computed: {
    _class() {
      let { status, next, direction } = this.statusObj();
      return [
        name,
        name + '--' + status,
        next === '' ? '' : name + '--next--' + next,
        direction ? name + '--' + direction : '',
        direction ? next === '' ? '' : name + '--' + direction + '--next--' + next : ''
      ];
    },
    _iconClass() {
      let { status } = this.statusObj();
      return [
        iconName,
        iconName + '--' + status
      ];
    },
    _tail() {
      let { next, direction } = this.statusObj();
      return [
        tail + '--' + direction,
        next === '' ? '' : tail + '--next--' + next
      ];
    },
    _title() {
      let { status, next, direction } = this.statusObj();
      return [
        title,
        title + '--' + status,
        next === '' ? '' : title + '--next--' + next,
        direction ? title + '--' + direction : ''
      ];
    },
    _description() {
      let { status } = this.statusObj();
      return [
        description,
        description + '--' + status
      ];
    },
    _icon() {
      let { status } = this.statusObj();
      return status;
    },
    _showTail() {
      if (this.steps.direction === 'vertical') {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    getStatus(active, index, total, direction, type, skip) {
      let status, next;
      let _type = type && type !== '' ? type : 'process';
      if (active === index) {
        status = type && type !== '' ? type : 'process';
        next = 'wait';
      } else if (index > active) {
        status = 'wait';
        next = index === total ? '' : 'wait';
      } else if (index < active) {
        status = 'finish';
        next = index === active - 1 ? _type : 'finish';
      }
      if (skip !== 0) {
        status = skip === 2 || skip === 3 ? 'skip' : status;
        next = skip === 1 || skip === 2 ? 'skip' : next;
      }
      if (direction === 'vertical') {
        return {
          status: status,
          next: next,
          direction: direction
        };
      } else {
        return {
          status: status,
          next: next
        };
      }
    },
    statusObj() {
      return this.getStatus(this.steps.active, this.index, this.total, this.steps.direction, this.steps.status, this.skipType);
    }
  }
};
</script>
