<template>
  <div class="entryStep">
    <div
      v-for="(item, index) in stepList"
      :key="index"
      v-if="item.showType"
      :class="{
        stepItem: 'stepItem',
        itemActive: item.type == '1' ? 'itemActive' : '',
        itemSuccess:
          item.status == '1' && item.type != '1' ? 'itemSuccess' : '',
      }"
    >
      <div class="itemTitle">
        <div>
          <i
            v-if="item.status != '1' || item.type == '1'"
            class="el-icon-circle-check"
          ></i>
          <i v-else class="el-icon-success"></i>
          {{ item.name }}
        </div>
        <div
          v-if="
            (item.type == '0' && item.status == '1') ||
            (item.firstFlag == 1 && tab != item.index)
          "
        >
          <el-button
            :ref="'edit' + index"
            type="text"
            :loading="item.editLoading"
            :disabled="disabled"
            @click="edit(item, index)"
            >{{ $t("system.edit") }}</el-button
          >
        </div>
      </div>
      <!-- 缩略内容 -->
      <div v-if="item.status == '1' && item.type != '1'" class="itemInfoList">
        <slot name="slot" :data="item"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stepList: {
      type: Array,
      default: [],
    },
    tab: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {
    this.stepListChange();
  },
  watch: {
    tab(val) {
      this.stepListChange();
    },
  },
  methods: {
    edit(val, idx) {
      this.$emit("edit", val);
    },
    stepListChange() {
      let arr = this.stepList;
      arr.forEach((item) => {
        item.index == this.tab ? (item.type = "1") : (item.type = "0");
      });
      this.$emit("stepListChange", arr);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.entryStep {
  width: 100%;
  height: max-content;
  background-color: #fff;
  border: 1px solid #e3e3e3;

  .stepItem {
    height: auto;
    font-size: 0.75rem;
    padding: 16px;
    border-bottom: 1px solid $fedexBorder;

    .itemTitle {
      display: flex;
      justify-content: space-between;
      color: #8e8e8e;

      .el-icon-success {
        color: #008a16 !important;
      }

      .el-button {
        font-size: 0.875rem;
        color: $fedexButton;
        font-weight: 700;
        padding: 0;
      }
    }

    .itemInfoList {
      font-size: 12px;
      height: max-content;
      line-height: normal;
      padding-top: 0.5rem;
    }
  }

  .itemActive {
    font-weight: 500;
    color: $fedexColor !important;
    background-color: #fafafa;

    .itemTitle {
      color: $fedexColor !important;
    }
  }

  .itemSuccess {
    font-weight: 500;
    color: #333333 !important;

    .itemTitle {
      color: #333333 !important;
    }
  }
}
</style>