<template>
  <el-tabs
    v-model="activeName"
    class="tab-box tab-morenav"
    @tab-remove="removeTab"
    @tab-click="tabClick"
    ref="tabs"
  >
    <slot name="default"></slot>
    <template v-for="(tab, index) in tabs">
      <slot name="editTab" v-bind="{ tab, index, tabs, reloadTabContent }"></slot>
    </template>
  </el-tabs>
</template>
<script>
export default {
  name: "x-tabs",
  props: {
    value: String,
    paneKeyName: {
      type: String,
      default: () => "id",
    },
    tabNameEnable: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      activeName: "0",
      tabs: [],
    };
  },
  watch: {
    value(val) {
      this.activeName = val;
    },
    activeName(val) {
      this.$emit("input", val);
    },
  },
  created() {
    if (this.value) {
      this.activeName = this.value;
    }
  },
  methods: {
    openEditTab(row, param, option) {
      let paneKeyName = this.paneKeyName;
      let tab = this.tabs.find((tab) => tab.data[paneKeyName] === row[paneKeyName]);
      let tabParam = option?.tabParam || {};
      let dataId = row ? row[paneKeyName] : null;
      let newTab = {
        data: row,
        showContent: false,
        dataId: dataId,
        param,
        ...tabParam,
      };
      if (!tab) {
        tab = newTab;
        if (this.tabs.length >= 30) {
          this.tabs.splice(0, 1, tab);
        } else {
          this.tabs.push(tab);
        }
        this.$nextTick(() => {
          let paneName = this.getCurrentPaneName();
          tab.paneName = paneName;
        });
      } else {
        Object.assign(tab, newTab);
      }
      let tabNameEnable = this.tabNameEnable;
      this.activeName = row ? (tabNameEnable ? tab.tabName : row[paneKeyName] + "") : "";
      tab.showContent = false;
      setTimeout(() => {
        tab.showContent = true;
      }, 200);
    },
    removeTab(targetName) {
      let tabNameEnable = this.tabNameEnable;
      let paneKeyName = this.paneKeyName;
      let tabIndex = this.tabs.findIndex((tab) => {
        if (tabNameEnable) {
          return tab.tabName === targetName;
        } else {
          return tab.data[paneKeyName] + "" === targetName;
        }
      });
      if (this.activeName === targetName) {
        if (tabIndex > 0) {
          this.activeName = tabNameEnable
            ? tab.tabName
            : this.tabs[tabIndex - 1].data[paneKeyName] + "";
        } else {
          this.activeName = "second";
        }
      }
      if (tabIndex !== -1) {
        this.tabs.splice(tabIndex, 1);
      }
      this.$emit("removeTab", targetName);
    },
    getCurrentPaneName() {
      return this.getCurrntPaneTarget().paneName;
    },
    getCurrntPaneTarget() {
      let panes = this.$refs.tabs.panes;
      let target = panes.find((pane) => pane.active);
      return target;
    },
    reloadTabContent(target, param, tab) {
      let updateParam =
        param != null && param.updateParam != null ? param.updateParam : {};
      for (let key in updateParam) {
        target.$emit("update:" + key, updateParam[key]);
      }

      if (!tab) {
        let activeName = this.activeName;
        tab = this.tabs.find((item) => item.paneName == activeName);
      }
      if (tab) {
        tab.showContent = false;
        setTimeout(() => {
          tab.showContent = true;
        }, 200);
      }
    },
    tabClick(targetName) {
      this.$emit("tabClick", targetName);
    },
  },
};
</script>
<style scoped></style>
