<template>
  <div class="ai-step"
    :style="style"
    :class="[
      !isSimple && !isBlockchain && `is-${$parent.direction}`,
      isSimple && 'is-simple',
      isVertical && isBlockchain &&  'ai-step__blockchain-vertical',
      !isVertical && isBlockchain && 'ai-step__blockchain-level',
      isLast && !isBlockchain && !space && !isCenter && 'is-flex',
      isCenter && !isVertical && !isSimple && 'is-center']">

    <!-- blockchain head -->
    <div v-if="isBlockchain"  
      :class="[
        isBlockchain && isVertical && 'ai-step__head-vertical',
        isBlockchain && !isVertical && 'ai-step__head-level']">
      <!-- title -->
      <div class="ai-step__blockchain-icon" :class="['is-' + currentStatus,]">
        <span v-if="!icon && !isSimple && isBlockchain" class="ai-step__blockchain-title" :class="['is-' + currentStatus]">{{ title }}</span>
      </div>
      <!-- line -->
      <div :class="isVertical ? 'ai-step__vertical-img' : 'ai-step__level-img' ">
        <img v-if="!isLast" class="ai-step__img" :src="stepSrc">
      </div>
    </div>
    <!-- blockchain description -->
    <div v-if="isBlockchain" 
      class="ai-step__blockchain-description" 
      :class="[
        'is-' + currentStatus,
        isVertical && isBlockchain && 'is-blockchain-vertical',
        !isVertical && isBlockchain && 'is-blockchain-level']">
        <slot name="description">{{ description }}</slot>
    </div>

    <!-- default head -->
    <div v-if="!isBlockchain" class="ai-step__head" :class="`is-${currentStatus}`">
      <!-- icon & line -->
      <div 
        class="ai-step__line"
        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }">
        <i class="ai-step__line-inner" :style="lineStyle"></i>
      </div>
      <div  class="ai-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
        <slot v-if="currentStatus !== 'success' && currentStatus !== 'error'" name="icon">
          <i v-if="icon" class="ai-step__icon-inner" :class="[icon]"></i>
          <!-- title -->
          <div class="ai-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
        </slot>
        <i v-else
          :class="['ai-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
          class="ai-step__icon-inner is-status">
        </i>
      </div>
    </div>
    <!-- default title & description -->
    <div v-if="!isBlockchain" class="ai-step__main">
      <div
        v-if="!isBlockchain"
        class="ai-step__title"
        ref="title"
        :class="['is-' + currentStatus]">
        <slot name="title">{{ title }}</slot>
      </div>
      <div v-if="isSimple" class="ai-step__arrow"></div>
      <div
        v-else
        class="ai-step__description"
        :class="['is-' + currentStatus]">
        <slot name="description">{{ description }}</slot>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AiStep',

  props: {
    title: String,
    icon: String,
    description: String,
    status: String
  },

  data() {
    return {
      index: -1,
      lineStyle: {},
      internalStatus: ''
    };
  },

  beforeCreate() {
    this.$parent.steps.push(this);
  },

  beforeDestroy() {
    const steps = this.$parent.steps;
    const index = steps.indexOf(this);
    if (index >= 0) {
      steps.splice(index, 1);
    }
  },

  computed: {
    currentStatus() {
      return this.status || this.internalStatus;
    },
    prevStatus() {
      const prevStep = this.$parent.steps[this.index - 1];
      return prevStep ? prevStep.currentStatus : 'wait';
    },
    isCenter() {
      return this.$parent.alignCenter;
    },
    isVertical() {
      return this.$parent.direction === 'vertical';
    },
    isSimple() {
      return this.$parent.simple;
    },
    isBlockchain() {
      return this.$parent.blockchain;
    },
    isLast() {
      const parent = this.$parent;
      return parent.steps[parent.steps.length - 1] === this;
    },
    stepsCount() {
      return this.$parent.steps.length;
    },
    space() {
      const { isSimple, $parent: { space } } = this;
      return isSimple ? '' : space ;
    },
    stepSrc() {
      // const stepSrc = this.$parent.stepSrc;
      // if (stepSrc.indexOf('data:image') > -1) {
      //   return stepSrc;
      // } else {
      //   return require(stepSrc);
      // }
      return this.$parent.stepSrc;
    },
    style: function() {
      const style = {};
      const parent = this.$parent;
      const len = parent.steps.length;

      const space = (typeof this.space === 'number'
        ? this.space + 'px'
        : this.space
          ? this.space
          : 100 / (len - (this.isCenter ? 0 : 1)) + '%');
      style.flexBasis = space;
      if (this.isVertical) return style;
      if (this.isLast) {
        style.maxWidth = 100 / this.stepsCount + '%';
      } else {
        style.marginRight = -this.$parent.stepOffset + 'px';
      }

      return style;
    }
  },

  methods: {
    /**
     * @method updateTwoStatus 设置状态
     * @param {Number} val 设置当前激活步骤
     */
    updateTwoStatus(val) {
      if (!this.isBlockchain) return;
      if (val === this.index && this.prevStatus !== 'error') {
        this.internalStatus = 'active';
      } else {
        this.internalStatus = 'inactive';
      }
    },
    updateStatus(val) {
      if (this.isBlockchain) return;
      const prevChild = this.$parent.$children[this.index - 1];
      if (val > this.index && !this.isBlockchain) {
        this.internalStatus = this.$parent.finishStatus;
      } else if (val === this.index && this.prevStatus !== 'error') {
        this.internalStatus = this.$parent.processStatus;
      } else {
        this.internalStatus = 'wait';
      }
      if (prevChild) prevChild.calcProgress(this.internalStatus);
    },

    calcProgress(status) {
      let step = 100;
      const style = {};
      // 过渡效果延时
      style.transitionDelay = 150 * this.index + 'ms';
      if (status === this.$parent.processStatus) {
        step = this.currentStatus !== 'error' ? 0 : 0;
      } else if (status === 'wait') {
        step = 0;
        style.transitionDelay = (-150 * this.index) + 'ms';
      }

      style.borderWidth = step && !this.isSimple ? '1px' : 0;
      this.$parent.direction === 'vertical'
        ? style.height = step + '%'
        : style.width = step + '%';

      this.lineStyle = style;
    }
  },

  mounted() {
    const unwatch = this.$watch('index', (val, oldVal) => {
      this.$watch('$parent.active', this.isBlockchain ? this.updateTwoStatus : this.updateStatus, { immediate: true });
      this.$watch('$parent.processStatus', () => {
        const activeIndex = this.$parent.active;
        this.isBlockchain ? this.updateTwoStatus(activeIndex) : this.updateStatus(activeIndex);
      }, { immediate: true });
      unwatch();
    });
  }
};
</script>
