
<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>
  <script>
export default {
  name: "YSteps",
  props: {
    current: [String, Number],
    vertical: Boolean,
    mini: Boolean,
    status: {
      validator: v => {
        return ["wait", "process", "finish", "error"].indexOf(v) >= 0;
      },
      default: "process"
    }
  },
  data() {
    return {
      children: []
    };
  },
  watch: {
    current(v) {
      this.setState();
    }
  },
  computed: {
    classes() {
      return [
        "k-steps",
        {
          ["k-steps-vertical"]: this.vertical,
          ["k-steps-mini"]: this.mini
        }
      ];
    }
  },
  created() {
    this.$on("steps-add", this.add);
    this.$on("steps-remove", this.remove);
  },
  mounted() {
    this.setState();
  },
  methods: {
    setState() {
      this.children.forEach((child, index) => {
        child.width = !this.vertical ? 100 / this.children.length : 0;
        // if (index == this.current) {
        //   child.state = this.status == "error" ? "error" : "process";
        // } else if (index > this.current) {
        //   child.state = "wait";
        // } else if (index < this.current) {
        //   child.state = "finish";
        // }
        if (index > this.current) {
          child.state = "wait";
        } else if (index == this.current) {
          child.state = this.status == "error" ? "error" : "process";
        } else if (index == this.current - 1 && this.status == "error") {
          child.state = "next";
        } else if (index == this.current - 1 && this.status !== "error") {
          child.state = "finish";
        } else if (index < this.current - 1) {
          child.state = "finish";
        }
      });
    },
    add(obj) {
      this.children.push(obj);
      obj.step = this.children.length;
    },
    remove(obj) {
      this.children.splice(this.children.indexOf(obj), 1);
    }
  }
};
</script>
