<template>
  <a-tabs
class="base-frame" v-model:activeKey="tabsValue" type="editable-card" :hideAdd="true"
    v-if="ifShowTab == true" @edit="onEdit" >
    <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title" :closable="true">
      <component :is="tab.component" />
    </a-tab-pane>
  </a-tabs>
  <component v-else :is="dnyComponent" />
</template>

<script lang="ts">
import { defineComponent, watch, PropType, ref, computed, markRaw } from 'vue';
import { message } from 'ant-design-vue';


interface menuItem {
  title: string;
  key: string;
  icon: string;
  component: object;
  children?: children[];
}

interface children {
  title: string;
  key: string;
  icon: string;
  component: object;
  children?: children[];
}
export default defineComponent({
  name: 'LtALeftTabmenu',
  props: {
    selectKey: {
      type: String,
      default: '',
    },
    menuTree: {
      type: Array as PropType<menuItem[]>,
      default: () => [],
      isRequired: true,
    },
    ifShowTab: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    var tabs = ref<menuItem[]>([]); //: Array<menuItem> = [];
    var tabsValue = ref('');
    // const panes = ref<menuItem[]>([]);

    watch(
      () => props.selectKey,
      (newVal) => {
        //监听侧边菜单选项改变事件
        addTab(newVal);
      },
    );

    const dnyComponent = computed(() => {
      let targetMenu = findMenu(props.selectKey);
      return markRaw(targetMenu.component);
    });

    const addTab = function (menukey: string) {
      if (props.ifShowTab == true) {
        var bExit = false;
        for (var i in tabs.value) {
          let tab = tabs.value[i];
          if (tab.key == menukey) {
            bExit = true;
            break;
          }
        }
        //已经添加，选中
        if (bExit) {
          tabsValue.value = menukey;
        } else {
          //未添加、添加
          tabsValue.value = menukey;
          let targetMenu = findMenu(menukey);
          if (targetMenu.key == '') {
            message.warning('没有找到对应组件，请检查菜单配置项是否正确!', 0);
          } else {
            //将找到的tab压进去
            tabs.value.push(targetMenu);
          }
        }
      }
    };

    const findMenu = function (key: string): menuItem {
      let copy: menuItem[] = [];
      copy = copy.concat(props.menuTree);
      var item: menuItem = {
        title: '',
        key: '',
        icon: '',
        component: {},
        children: [],
      };
      while (copy.length) {
        let temp = copy.shift();
        if (temp) {
          if (temp.key == key) {
            item = temp;
          }
          if (temp.children) {
            copy = copy.concat(temp.children);
          }
        }
      }
      return item;
    };

    const onEdit = (targetKey: string) => {
      remove(targetKey);
    };

    const remove = (key: string) => {
      let lastIndex = 0;
      tabs.value.forEach((pane, i) => {
        if (pane.key === key) {
          lastIndex = i - 1;
        }
      });
      tabs.value = tabs.value.filter((pane) => pane.key !== key);
      if (tabs.value.length && tabsValue.value == key) {
        if (lastIndex >= 0) {
          tabsValue.value = tabs.value[lastIndex].key;
        } else {
          tabsValue.value = tabs.value[0].key;
        }
      }
    };

    return {
      tabs,
      tabsValue,
      dnyComponent,
      addTab,
      findMenu,
      onEdit,
    };
  },
});
</script>

<style scoped>
.ant-tabs.ant-tabs-top.ant-tabs-card {
  height: 100%;
}

.base-frame:deep(.ant-tabs-nav) {
  margin: 0 0 0 0;
}

.base-frame :deep(.ant-tabs-content.ant-tabs-content-top) {
  height: 100%;
}
</style>
