<template>
  <div class="ef-steps-wrapper">
    <div v-for="(item,index) of steps" :key="index" class="step-item"
      :class="getStatus(index)=='wait'?'step-item-wait':''">
      <div :style="circleWidthStyle" @click="onClickItem(index)" v-if="getStatus(index)=='finish'"
        class="box box-finish">
        <ef-icon style="position: relative;left: 1px;top:1px" type="icon-seleted"></ef-icon>
      </div>
      <span :style="circleWidthStyle" @click="onClickItem(index)" v-else
        :class="[getStatus(index),'box']">{{index + 1}}</span>
      <span @click="onClickItem(index)" class="text">{{item.title}}</span>
      <span :style="{width:lineWidth+'px'}" v-if="index!=lastStepIndex" class="line"
        :class="{'ok':getStatus(index+1)!='wait'}"></span>
    </div>
  </div>
</template>

<script>
  import EfIcon from "../icon/icon.vue";
  export default {
    name: "ef-step",
    components: {
      EfIcon
    },
    props: {
      steps: {
        type: Array,
        default: [],
      },
      lineWidth: {
        type: Number,
        default: 60
      },
      circleWidth: {
        type: Number,
        default: 40
      }
    },
    data() {
      return {
        current: 0
      }
    },
    computed: {
      lastStepIndex() {
        return this.steps.length - 1;
      },
      circleWidthStyle() {
        return {
          width: this.circleWidth + 'px',
          height: this.circleWidth + 'px',
        }
      }
    },
    methods: {
      // === event  ===

      onClickItem(index) {
        if (this.getStatus(index) == "wait") {
          return;
        } else {
          this.current = index;
        }
      },

      // === event ===

      // === api ===

      // === api ===

      // === function ===

      to(current) {
        let next = current;
        if (current > this.lastStepIndex + 1) {
          next = this.lastStepIndex + 1;
        } else if (current < 0) {
          next = 0;
        }

        this.current = next;
      },

      next() {
        let next;
        if (this.current + 1 > this.lastStepIndex + 1) {
          next = this.lastStepIndex + 1;
        } else {
          next = this.current + 1;
        }

        this.current = next;

      },
      prev() {
        if (this.current - 1 < 0) {
          this.current = 0;
        } else {
          this.current--;
        }
      },

      getStatus(index) {
        if (index == this.current) {
          return "current";
        } else if (index < this.current) {
          return "finish";
        } else {
          return "wait";
        }
      },

      // === function ===
    },
    mounted() {

    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
</style>
