<template>
  <div
    class="ai-steps"
    :style="blockchain && direction === 'horizontal' ? `width:${stepsWidth}` : ''"
    :class="[
       !simple && 'ai-steps--' + direction,
       simple && 'ai-steps--simple',
       blockchain && direction === 'horizontal' && 'ai-steps--blockchain-level',
       blockchain && direction !== 'horizontal' && 'ai-steps--blockchain-vertical',
     ]">
      <slot></slot>
  </div>
</template>

<script>
import Migrating from 'aisino-ui/src/mixins/migrating';

export default {
  name: 'AiSteps',

  mixins: [Migrating],

  props: {
    // 每个 step 的间距，不填写将自适应间距。支持百分比
    space: [Number, String],
    // 设置当前激活步骤
    active: Number,
    // 显示方向
    direction: {
      type: String,
      default: 'horizontal'
    },
    // 居中对齐
    alignCenter: Boolean,
    // 是否应用简洁风格
    simple: Boolean,
    // 是否使用区块链风格
    blockchain: Boolean,
    // 设置结束步骤的状态
    finishStatus: {
      type: String,
      default: 'finish'
    },
    // 设置当前步骤的状态
    processStatus: {
      type: String,
      default: 'process'
    },
    // 步骤条图片路径
    stepSrc: {
      type: String,
      default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAiCAYAAADvVd+PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NzM5RTg0Qzc1NTMxMUU5QkIyQkFFRjZGOUE2MzA0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NzM5RTg0RDc1NTMxMUU5QkIyQkFFRjZGOUE2MzA0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc3MzlFODRBNzU1MzExRTlCQjJCQUVGNkY5QTYzMDQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3MzlFODRCNzU1MzExRTlCQjJCQUVGNkY5QTYzMDQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0nBBvQAABFhJREFUeNrkmXmMTWcYxs9cYxn7oNLYq6IUpWo3IpZaiigRWtpauqHW/iGE1BZbhAhiF2lFTEiF2v0x6aS1dJAZBCVMqiXG0hBLrMXz5v5uct2oceeec2bueJNfMvfcc775vvd83/s933MTLl+56yjeFjPEfXFJ/CVOiuPinhOfUUQ0EW1FY1FXVBPlxBPRSRxL5Obz4oSYE9HII3FU7BQ/i9NxMOiuor/oJSr8z32TbPD2RwIzwCIgPhO1oaFoJBLDHrQEbBJrxMUCNPBKYqT4VlQJu35WHBYZzObr4io4kQl4UZQSrUQP0UfU4vpjsUXMFZn5PPAJ4jtRkmtnxEY4m1sDuSXguXtZT/bP+jEznoptYrI45ePAi4nRYoooz7W9Ypb4LZqGoklAeNQU48SXogwzYhWJuOnx4FPEalGPzzvETKZ51BHIYycuiPHUimW0M5IpN8CjgSeJxSKdwVvh7kmxy8hro4EYO3WdJdFM/CreEKmsvwouDr4Ju9FodqYZFOidsTYccKmDVgg7iCHilviEqtvNhba/EQdFffGnaC2muqVPAi5P0x/Fe8yGqmKXmM3+HG2UED+Jlfy9lpnm6q4T8GCtXkBlTaA4mujYHlatXyWqUc0/F3fEp+IrcdftzgY8KlgmNeeL9kjr7giSd19xvR/ibf8t2lFXPAmvEhAKW7tNxQFRR/yRS13oypuvyjPNRZaXHfQ6AQ6ys6NYL0qzHIa94D4rnL9wz3qeuep15/xIgMUDMVjMQ0GupTaEwjTEBhTebO594EfHEn2UryabJ4ocsZCBJlPYpvH9GLHEz8NEXqVwrDFIrBNF+fyfGMrU9zUCTv5EKlohFIc5ZjuvQwJKYq58yPS/zZF7tyhb2BNQWaSJ3tSCFAb/D1LavnuzsCbA9MAR0VJk4y1k4SO0Q+d/gFZoVNgSYFbb76I6AqctSQiXzymIoBpiP8fcuE+AbbMLqO5JmCYdmf6R8S9niJWYLFvFDzhRcZmAurz178VDMcIJmpYvEzh21h+OMLKtcbrYg88QNwlIwCTJZL1f5K2viKKN5ewS10QX2uocDwkwr9DMyaVsdxvwB/bnoa10nk3jcLRPLHKCTnWBS4Ctb3NoT/PmzCrrT/G7EUO7ObQ3kWU01gn+gNO9oCTAnJ4hbGEzcW428uY2u+gtzAvbIt/CadpKncmXBCTh0JxB09fAxGgjBorLHizXk7Q/ygla773RELbMGvhxGEqgqNnU/kJU5Ho20z+VE50fUYkT5NccoZ8gr5eiJZ66lYBSZP0j0Zc3HYoD7PHb2LLyI2riK9gyLM61cyw/WyJHc+tbeAKaMtBkFJvZ0PUiPAMraFsQNBlOwYnKaAxzmmqFXb9F3cgiMZcYQ3ZIjIUS8L4T9O+KRzT8mLWXhiBJ98upiUGDmKT+2An+oPvOSxwq+30h0xJgBW0Wg78JOVT2U44HVrSPYSfLFhTJOnxOpm7YT2tDnwkwACaGEbwtL0qaAAAAAElFTkSuQmCC'
    }
  },

  data() {
    return {
      steps: [],
      stepOffset: 0,
      stepsWidth: 0
    };
  },

  methods: {
    getMigratingConfig() {
      return {
        props: {
          'center': 'center is removed.'
        }
      };
    },
    setBlockchainStyle(len) {
      this.stepsWidth = (48 * len + 64 * (len - 1)) + 'px';
    }
  },
  watch: {
    active(newVal, oldVal) {
      this.$emit('change', newVal, oldVal);
    },

    steps(steps) {
      this.setBlockchainStyle(steps.length);
      steps.forEach((child, index) => {
        child.index = index;
      });
    }
  }
};
</script>
