<template>
  <div class="fill-step">
    <!-- <div
      v-for="(item, index) in steps"
      :key="index"
      :class="
        item.state1 == curStep
          ? 'edit-color'
          : stepStates.includes(item.state2)
          ? setSelectIndex==2 && item.state1==2 ? 'cur-color':'finish-color'
          : 'cur-color'
      "
    >
    
      <div>
        <i
          class="el-icon-success"
          v-if="stepStates.includes(item.state2) && item.state1 != curStep "
        ></i>
        <i class="el-icon-success" v-else></i>
        <span> {{ item.label }}</span>
      </div>
      <div v-if="setSelectIndex==2 && item.state1==2"></div>
      <el-button
        type="text"
       v-else-if="stepStates.includes(item.state2) && item.state1 != curStep"
        @click="editStepBtn(item)"
        :loading="editLoading && curClickStep == item.state1"
        >編輯</el-button
      >
    </div> -->
    <div
        v-for="(item, index) in steps"
        :key="index"
        :class="item.state1 == curStep
          ? 'edit-color'
          : stepStates.includes(item.state2)
            ? setSelectIndex == 2 && item.state1 == 2 ? 'cur-color' : 'finish-color'
            : 'cur-color'
        "
      >
    
        <div>
          <i
            class="el-icon-success"
            v-if="stepStates.includes(item.state2) && item.state1 != curStep"
          ></i>
          <i class="el-icon-success" v-else></i>
          <span> {{ item.label }}</span>
        </div>
        <div v-if="setSelectIndex == 2 && item.state1 == 2"></div>
        <el-button
          type="text"
          v-else-if="stepEdit.includes(item.state2) && item.state1 != curStep"
          @click="editStepBtn(item)"
          :loading="editLoading && curClickStep == item.state1"
          :disabled="editDisabled"
          >編輯</el-button
        >
      </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: {
    curStep: {
      type: Number,
      default() {
        return 1;
      },
    },
    //控制颜色
    stepStates: {
      type: Array,
      default() {
        return [];
      },
    },
    //控制编辑按钮显示
    stepEdit: {
      type: Array,
      default() {
        return [];
      },
    },
    editLoading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    editDisabled: {
      type: Boolean,
      default() {
        return false;
      },
    },
    setSelectIndex: {
      type: Number,
      
    },
  },
  data() {
    return {
      curClickStep: null,
    };
  },
  created() {},
  computed: {
    steps() {
      return [
        {
          label: this.$t("fillIn.step1"),
          state1: 1,
          state2: "finish1",
        },
        {
          label: this.$t("fillIn.step2"),
          state1: 2,
          state2: "finish2",
        },
        {
          label: this.$t("fillIn.step3"),
          state1: 3,
          state2: "finish3",
        },
      ];
    },
  },
  methods: {
    editStepBtn(val) {
      this.curClickStep = val.state1;
      let filtStep = this.stepStates.filter((item) => item != val.state2);
      this.$emit("setStepStates", [...new Set(filtStep)]);
      this.$emit("editNextStep", {
        curStep: val.state1,
        leaveStep: this.curStep,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fill-step {
  padding: 16px 16px;
  line-height: 40px;
  // display: flex;
  // flex-direction: column
  .cur-color {
    display: flex;
    justify-content: space-between;
    color: #919191;
  }
  .edit-color {
    display: flex;
    justify-content: space-between;
    color: #4d148c;
  }
  .finish-color {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: #008a00;
  }
}
</style>