<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <el-tabs
        v-model="tabsMenuValue"
        type="card"
        @tab-click="tabClick"
        @contextmenu.prevent="openRightMenu($event)"
        @tab-remove="tabRemove"
      >
        <el-tab-pane
          v-for="item in tabsMenuList"
          :key="item.path"
          :label="item.title"
          :name="item.path"
          :closable="item.close"
        >
          <template #label>
            {{ item.title }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <!-- <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
        <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
        <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li>
        <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
        <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
        <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
        <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
      </ul> -->
      <MoreButton
        v-show="visible"
        :style="{ left: left + 'px', top: top + 'px' }"
        class="contextmenu"
        :selectedTag="selectedTag"
      />
    </div>
  </div>
</template>

<script setup>
  import Sortable from 'sortablejs';
  import { ref, computed, watch, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useGlobalStore } from '@/stores/modules/global';
  import { useTabsStore } from '@/stores/modules/tabs';
  import { useAuthStore } from '@/stores/modules/auth';

  import MoreButton from './components/MoreButton.vue';

  const route = useRoute();
  const router = useRouter();
  const tabStore = useTabsStore();
  const authStore = useAuthStore();
  const globalStore = useGlobalStore();

  const tabsMenuValue = ref(route.fullPath);
  const visible = ref(false);
  const selectedTag = ref({});
  const left = ref(0);
  const top = ref(0);
  const tabsMenuList = computed(() => tabStore.tabsMenuList);
  const tabsIcon = computed(() => globalStore.tabsIcon);

  onMounted(() => {
    tabsDrop();
    initTabs();
  });

  const openRightMenu = (e) => {
    visible.value = false;
    console.log('eee', e);
    if (e.srcElement.id) {
      // 右键点击的是tab
      selectedTag.value = {
        title: e.srcElement.innerText,
        path: e.srcElement.id.replace('tab-', ''),
        close: e.srcElement.firstElementChild ? true : false,
      };
      left.value = e.clientX;
      top.value = e.clientY;
      visible.value = true;
    }
  };
  watch(
    () => visible.value,
    (value) => {
      if (value) {
        document.body.addEventListener('click', () => {
          visible.value = false;
        });
      } else {
        document.body.removeEventListener('click', () => {
          visible.value = false;
        });
      }
    }
  );
  // 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
  watch(
    () => route.fullPath,
    () => {
      if (route.meta.isFull) return;
      tabsMenuValue.value = route.fullPath;
      const tabsParams = {
        icon: route.meta.icon,
        title: route.meta.title,
        path: route.fullPath,
        name: route.name,
        close: !route.meta.isAffix,
        isKeepAlive: route.meta.isKeepAlive,
      };
      tabStore.addTabs(tabsParams);
    },
    { immediate: true }
  );

  // 初始化需要固定的 tabs
  const initTabs = () => {
    authStore.flatMenuListGet.forEach((item) => {
      if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
        const tabsParams = {
          icon: item.meta.icon,
          title: item.meta.title,
          path: item.path,
          name: item.name,
          close: !item.meta.isAffix,
          isKeepAlive: item.meta.isKeepAlive,
        };
        tabStore.addTabs(tabsParams);
      }
    });
  };

  // tabs 拖拽排序
  const tabsDrop = () => {
    Sortable.create(document.querySelector('.el-tabs__nav'), {
      draggable: '.el-tabs__item',
      animation: 300,
      onEnd({ newIndex, oldIndex }) {
        const tabsList = [...tabStore.tabsMenuList];
        const currRow = tabsList.splice(oldIndex, 1)[0];
        tabsList.splice(newIndex, 0, currRow);
        tabStore.setTabs(tabsList);
      },
    });
  };

  // Tab Click
  const tabClick = (tabItem) => {
    const fullPath = tabItem.props.name;
    router.push(fullPath);
  };

  // Remove Tab
  const tabRemove = (fullPath) => {
    tabStore.removeTabs(fullPath, fullPath == route.fullPath);
  };
</script>

<style scoped lang="scss">
  @use './index.scss';
</style>
