<template>
  <el-tabs v-model="activeName" class="gz-tab flex-1 overflow-h" v-bind="$attrs" v-on="$listeners"
           @tab-click="onTabClick"
  >
    <slot>
      <el-tab-pane v-for="(tab, index) in tabs" :key="tab[valueKey]" :closable="tab.closable" :disabled="tab.disabled"
                   :name="tab[valueKey]"
      >
        <template #label>
          <slot :item="tab" name="label">
            <div class="pos-rel flex-row-s-c">
              <span>{{ tab[viewKey] }}</span>
              <div v-if="tools.length" class="tools">
                <template v-for="(btn, i) in tools">
                  <i
                    v-if="!btn.hidden({ tab, tabIndex: index, btn, btnIndex: i })"
                    :key="i"
                    :class="btn.icon"
                    class="ml-5"
                    @click="handleToolClick(tab, btn)"
                  />
                </template>
              </div>
            </div>
          </slot>
        </template>

        <div :class="tabContentClass" class="h-100 w-100">
          <slot :item="tab" name="tabPane" />
        </div>
      </el-tab-pane>
    </slot>
  </el-tabs>
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      default: '',
    },
    tabList: {
      type: Array,
      default: () => [],
    },
    tools: {
      type: Array,
      default: () => [],
    },
    valueKey: {
      type: String,
      default: 'name',
    },
    viewKey: {
      type: String,
      default: 'label',
    },
  },
  data() {
    return {
      activeName: '',
      tabs: [],
      previousIndex: 0, // 上一个激活 tab 的索引
      currentIndex: 0, // 当前激活 tab 的索引
    };
  },
  computed: {
    tabContentClass() {
      return {
        'slide-enter-active': true,
        'slide-leave-active': this.currentIndex > this.previousIndex,
        'slide-enter': this.currentIndex < this.previousIndex,
        'slide-leave-to': this.currentIndex > this.previousIndex,
      };
    },
  },
  watch: {
    tabList: {
      immediate: true,
      handler(list) {
        if (list?.length) {
          this.tabs = list;
          !this.activeName && (this.activeName = list[0][this.valueKey]);
        }
      },
    },
  },
  mounted() {
    if (this.active !== '') {
      this.activeName = this.active;
    }
    console.log(this.activeName);
  },
  methods: {
    setActive(act) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.activeName = act;
        });
      });
    },
    onTabClick(tab) {
      this.previousIndex = Number(this.currentIndex);
      this.currentIndex = Number(tab.index);
      this.$nextTick(() => {
        this.previousIndex = Number(this.currentIndex);
        this.$emit('tabClick', tab);
      });
    },
    handleToolClick(tab, btn) {
      if (typeof btn?.onClick === 'function') {
        btn.onClick(tab, btn);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.slide-enter-active,
.slide-leave-active {
  //cubic-bezier(0.175, 0.885, 0.42, 1.31);
  //  cubic-bezier(0.00, 1.02, 0.89, 1.14)
  transition: all 0.4s cubic-bezier(0, 1.02, 0.03, 1.17);
  opacity: 1;
}

.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

::v-deep {
  .el-tabs__item {
    position: relative;

    .tools {
      //position: absolute;
      left: 100%;
      top: 0;

      i {
        font-size: 14px;
      }
    }

    i {
      transition: all 0.3s;

      &:hover {
        opacity: 0.5;
      }
    }

    .el-icon-error:hover {
      color: #c0c4cc;
    }
  }
}
</style>
