<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-14 17:22:32
 * @LastEditors: Heloise
 * @LastEditTime: 2022-06-15 14:00:51
-->
<template>
  <div ref="customStepsRef" class="el-custom-steps">
    <el-steps direction="vertical">
      <el-step
        v-for="(item, index) in stepsList"
        :id="`step${item.id}`"
        :key="`${item.id}${index}`"
        :title="item.title"
        :icon="item.icon"
        :description="item.description"
        :class="[activeId === item.id && 'el-custom-steps--active']"
        @click.native="clickStep(item.id)"
      ></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: 'ElCustomSteps',
  props: {
    active: [Number, String],
    stepsList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    activeId() {
      if (this.active && document.getElementById(`step${this.active}`)) {
        let box = document.getElementById(`step${this.active}`);
        this.$refs.customStepsRef.scrollTo({
          top: box.offsetTop,
          behavior: 'smooth'
        });
      }
      return this.active;
    }
  },
  methods: {
    clickStep(id) {
      this.$emit('clickStep', id);
    }
  }
};
</script>
