<template>
  <div class="ps-steps" :class="[`ps-steps--${this.direction}`]">
      <!-- <div class="ps-steps--top"></div> -->
      <slot></slot>
      <!-- <div class="ps-steps--bottom"></div> -->
  </div>
</template>

<script>
export default {
  name: "PsSteps",
  props: {
    direction: {
      type: String,
      default: 'horizontal'
    }, 
    active: {
      type: Number,
      default: 1,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    active: {
      handler(val) {
        this.operaOnChild(val);
      },
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  created() {},
  mounted() {
    this.operaInit();
  },
  methods: {
    operaInit() {
      let childrenList = this.$children || [];
      console.log(childrenList);
      this.$children[0].operaSetImplement();
      // this.$children[0].operaSetChecked();
      childrenList.forEach((el, index) => {
        this.$children[index].operaSetStepsNumber(index * 1 + 1);
      });
    },
    operaOnChild(val) {
      console.log(val);
      let childrenList = this.$children || [];
      childrenList.forEach((el, index) => {
        this.$children[index].operaCloseImplement();

        if (index < val) {
          this.$children[index].operaSetComplete();
        }
      });
      this.$children[val - 1].operaSetImplement();
    },
    operaResetSteps(){
      let childrenList = this.$children || [];
      childrenList.forEach((el, index) => {
          this.$children[index].operaCloseChecked();
        
      });
    }
  },
};
</script>

<style>
</style>
