<template>
  <div class="zui-steps" :class="stepsClassRender">
    <template v-for="(step, index) of steps">
      <div class="step-wrapper" :class="[$_getStepStatusClass(index)]" :key="stepKey(index)">
        <div v-if="$scopedSlots.icon" class="icon-wrapper">
          <slot name="icon" :index="index" :current-index="currentLength" :step="step"></slot>
        </div>
        <div v-else class="icon-wrapper">
          <template v-if="index < currentLength">
            <slot v-if="$scopedSlots.reached || $slots.reached" name="reached" :index="index"></slot>
            <div v-else class="step-node-default">
              <div class="step-node-default-icon" style="width: 8px;height: 8px;border-radius: 50%;"></div>
            </div>
          </template>
          <template v-else-if="index == currentLength">
            <slot v-if="$scopedSlots.current || $slots.current" name="current" :index="index"></slot>
            <zui-icon v-else name="checkcircle"></zui-icon>
          </template>
          <template v-else>
            <slot v-if="$scopedSlots.unreached || $slots.unreached" name="unreached" :index="index"></slot>
            <div v-else class="step-node-default">
              <div class="step-node-default-icon" style="width: 8px;height: 8px;border-radius: 50%;"></div>
            </div>
          </template>
        </div>
        <div class="text-wrapper">
          <slot v-if="$scopedSlots.content" name="content" :index="index" :step="step"></slot>
          <template v-else>
            <div class="name">{{step.name}}</div>
            <div class="desc" v-if="step.text">{{step.text}}</div>
          </template>
        </div>
      </div>
      <div class="bar" :class="barClassRender" :style="$_getStepSizeForStyle(index)" :key="barKey(index)">
        <i class="bar-inner" v-if="progress[index]" :style="$_barInnerStyle(index)"></i>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Steps",
  props: {
    steps: {
      type: Array,
      default: function() {
        /* istanbul ignore next */
        return [];
      }
    },
    current: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0;
      }
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    transition: {
      type: Boolean,
      default: false
    },
    verticalAdaptive: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      initialed: false,
      progress: [],
      stepsSize: [],
      currentLength: 0,
      duration: 0.3,
      timer: null
    };
  },
  computed: {
    stepsClassRender: function() {
      return {
        "zui-steps-vertical": this.direction == "vertical",
        "zui-steps-horizontal": this.direction == "horizontal",
        "vertical-adaptive":
          this.direction == "vertical" && this.verticalAdaptive,
        "no-current": this.currentLength % 1 !== 0
      };
    },
    barClassRender: function() {
      return [this.direction == 'horizontal' ? 'horizontal-bar' : 'vertical-bar']
    },
    $_barInnerStyle: function() {
      var progress = this.progress;
      var self = this;
      return function(index) {
        var transform =
          self.direction == "horizontal"
            ? '(' + (progress[index]["len"] - 1) * 100 + '%, 0, 0)'
            : '(0, ' + (progress[index]["len"] - 1) * 100 + '%, 0)';
        return {
          transform: 'translate3d' + transform,
          transition: 'all ' + progress[index]["time"] + 's linear'
        };
      };
    }
  },
  watch: {
    current: function(val, oldVal) {
      var currentStep = this.$_formatValue(val);
      var newProgress = this.$_sliceProgress(currentStep);
      if (this.transition) {
        var isAdd = currentStep >= oldVal;
        var self = this;
        this.timer && clearTimeout(this.timer);
        this.timer = setTimeout(function() {
          self.$_doTransition(function(newProgress, isAdd, len) {
            if (
              (isAdd && len > self.currentLength) ||
              (!isAdd && len < self.currentLength)
            ) {
              self.currentLength = len;
            }
          });
        }, 100);
      } else {
        this.progress = newProgress;
        this.currentLength = currentStep;
      }
    }
  },
  created: function() {
    var currentStep = this.$_formatValue(this.current);
    this.currentLength = currentStep;
    this.progress = this.$_sliceProgress(currentStep);
  },
  mounted: function() {
    this.$_initStepSize();
  },
  updated: function() {
    this.$nextTick(function() {
      this.$_initStepSize();
    });
  },
  methods: {
    stepKey: function(index) {
      return "steps-" + index;
    },
    barKey: function(index) {
      return "bar-" + index;
    },
    toArray: function(list, start) {
      start = start || 0;
      var i = list.length - start;
      var ret = [];
      while (i--) {
        ret.unshift(list[i + start]);
      }
      return ret;
    },
    // MARK: private methods
    $_initStepSize: function() {
      if (this.direction != "vertical" || this.verticalAdaptive) {
        return;
      }
      var iconWrappers = this.$el.querySelectorAll(".icon-wrapper");
      var textWrappers = this.$el.querySelectorAll(".text-wrapper");
      var self = this;
      var stepsSize = this.toArray(textWrappers).map(function(wrapper, index) {
        var stepHeight = wrapper.clientHeight;
        var iconHeight = iconWrappers[index].clientHeight;
        if (index == textWrappers.length - 1) {
          // The last step needs to subtract floated height
          stepHeight -= iconHeight;
        } else {
          // Add spacing between steps to prevent distance too close
          // stepHeight += 40
          // 这里减小空白间隙，使其看起来更紧凑
          stepHeight += self.stepHeightFix == 0 ? self.stepHeightFix : self.stepHeightFix || -15;
        }
        return stepHeight > 0 ? stepHeight : 0;
      });
      if (stepsSize.toString() != this.stepsSize.toString()) {
        this.stepsSize = stepsSize;
      }
    },
    $_getStepSizeForStyle: function(index) {
      var size =
        this.direction == "vertical" && !this.verticalAdaptive
          ? this.stepsSize[index]
          : 0;
      return size
        ? {
            height: size + 'px'
          }
        : null;
    },
    $_getStepStatusClass: function(index) {
      var currentLength = this.currentLength;
      var status = [];
      if (index < currentLength) {
        status.push("reached");
      }
      if (index == Math.floor(currentLength)) {
        status.push("current");
      }
      return status.join(" ");
    },
    $_formatValue: function(val) {
      if (val < 0) {
        return 0;
      } else if (val > this.steps.length - 1) {
        return this.steps.length - 1;
      } else {
        return val;
      }
    },
    $_sliceProgress: function(current) {
      var self = this;
      return this.steps.slice(0, this.steps.length - 1).map(function(step, index) {
        var offset = current - index;
        var progress = self.progress[index];
        var isNewProgress = progress == undefined;
        var len, time;
        if (offset <= 0) {
          len = 0;
        } else if (offset >= 1) {
          len = 1;
        } else {
          len = offset;
        }
        time =
          (isNewProgress ? len : Math.abs(progress.len - len)) * self.duration;
        return {
          len,
          time
        };
      });
    },
    $_doTransition: function(progress, isAdd, step) {
      var currentLength = isAdd ? 0 : this.currentLength;
      var self = this;
      var walk = function(index) {
        if ((index < progress.length) & (index > -1) && progress[index]) {
          if (isAdd) {
            currentLength += progress[index].len;
          } else {
            currentLength -= self.progress[index].len - progress[index].len;
          }
          setTimeout(function() {
            index += isAdd ? 1 : -1;
            step(currentLength);
            walk(index);
          }, progress[index].time * 1000);
        }
        self.$set(self.progress, index, progress[index]);
      };
      walk(isAdd ? 0 : progress.length - 1);
    }
  }
};
</script>

<style>
@import "./index.css";
</style>