<template>
  <!--标签栏-->
  <el-tabs
    class="layout-tabs wow animate__animated animate__slideInRight"
    data-wow-duration=".5s"
    data-wow-delay=".3s"
    id="layout-tabs"
    v-model="menuActivePath"
    type="card"
    @contextmenu.prevent="handleOpenMenu"
    @tab-click="handleTabClick"
    @tab-remove="removeTab"
  >
    <el-tab-pane
      v-for="item in tagsList"
      :key="item.path"
      :label="locale === 'zh' ? item.meta.menuName : item.name"
      :name="item.path"
      :closable="item.path !== '/main'"
    ></el-tab-pane>
  </el-tabs>
  <!--右键菜单项-->
  <TabsContextMenu v-show="isShowMenu" :style="menuStyle" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLayoutStore } from '@/store/layout'
import { useThemeStore } from '@/store/theme'
import { storeToRefs } from 'pinia'
import TabsContextMenu from './components/TabsContextMenu.vue'
import { useI18nStore } from '@/store/i18n'
import { addEvent, removeEvent } from '@/utils'

const router = useRouter()
const route = useRoute()
const layoutStore = useLayoutStore()
const themeStore = useThemeStore()
const { mainColor, fontColor, fontColorActive } = storeToRefs(themeStore)

/* 处理tabs栏 */
// 获取响应式 pinia 数据
const { menuActivePath, tagsList } = storeToRefs(layoutStore)
// 点击tabs栏子项
const handleTabClick = async ({ paneName }: { paneName: string }) => {
  await handleMenuActivePath(paneName)
}
// 移除tabs栏子项
const removeTab = async (targetPath: string) => {
  let activePath = menuActivePath.value
  const tabs = tagsList.value
  if (menuActivePath.value === targetPath) {
    tagsList.value.forEach((tab: any, index: number) => {
      if (tab.path === targetPath) {
        const nextTab: any = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activePath = nextTab.path
          router.push(nextTab.path)
        }
      }
    })
  }
  layoutStore.$patch({
    menuActivePath: activePath,
    tagsList: tagsList.value.filter((tab: any) => tab.path !== targetPath)
  })
  if (!tagsList.value.length) {
    await handleMenuActivePath('/main')
  }
}
// 跳转路由
const handleMenuActivePath = async (path: string) => {
  if (path === route.path) return
  await router.push(path)
}

/* 国际化 */
const i18nStore = useI18nStore()
const { locale } = storeToRefs(i18nStore)

/* 右键处理 */
const isShowMenu = ref(false)
// const path = ref(route.path)
const menuStyle = reactive({
  left: '0',
  top: '0'
})
const handleOpenMenu = (event: any) => {
  const path = event.target.id.split('-')[1]
  // 只能右键点击当前选中的菜单
  if (path !== route.path) return
  // 跳转右键菜单
  // if (path) handleMenuActivePath(path)
  const { x, y } = event
  menuStyle.left = x + 'px'
  menuStyle.top = y + 'px'
  isShowMenu.value = true
}
const handleCloseMenu = () => {
  isShowMenu.value = false
}
onMounted(() => {
  addEvent(document.body, 'click', handleCloseMenu)
})
onBeforeMount(() => {
  removeEvent(document.body, 'click', handleCloseMenu)
})
</script>

<style lang="scss" scoped>
.layout-tabs {
  height: 50px;

  @include flexRow;
  :deep(.el-tabs__header) {
    margin: 0;
    width: 100%;
    height: 100%;

    @include flexRow;

    //background-color: v-bind(mainColor);
    //border-bottom: none;
    .el-tabs__nav {
      height: 100%;
      border: 1px solid v-bind(fontColor);
      .el-tabs__item {
        //background-color: v-bind(mainColor);
        color: v-bind(fontColor);
        text-shadow: 0 0 0.5px #333333;
        transition: all 0.3s ease-out;
        &:hover {
          color: v-bind(fontColor);
          background-color: v-bind(mainColor);
          opacity: 0.9;
        }
        &.is-active {
          color: v-bind(fontColorActive);
          background-color: v-bind(mainColor);
        }
      }
    }
  }
}
</style>
