<!--
 * @Description: tagView
 * @Author: ZCY
 * @Date: 2022年12月7日12:33:00
-->
<template>
  <div ref="tagViewRef" class="tagView">
    <span v-if="tagViewHasScrollbar" class="tagView-arrow left-0" @click="onTagViewScroll('left')" v-text="'<'" />
    <div id="tagViewScrollBar" ref="tagViewScrollBarRef" class="tagView-content" @wheel.prevent="onHandleScroll">
      <div v-for="(menu, index) in filterMenus" :key="menu.key" class="tagView-content-item">
        <TagViewItem :key="menu.key" :tag-view="menu" :style="{ left: `-${index * 8}px` }" />
      </div>
    </div>
    <span v-if="tagViewHasScrollbar" class="tagView-arrow right-0" @click="onTagViewScroll('right')" v-text="'>'" />
    <a-dropdown trigger="click">
      <div class="tagView-operator">
        <Icon icon="carbon:overflow-menu-vertical" />
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item @click="handleCloseOtherTag()">
            <div style="display: flex; align-items: center">
              <Icon icon="carbon:close-outline" />
              <span style="margin-left: 8px; white-space: nowrap" v-text="'关闭其他'" />
            </div>
          </a-menu-item>
          <a-menu-item @click="handleFullscreen()">
            <div style="display: flex; align-items: center">
              <Icon icon="ant-design:fullscreen-outlined" />
              <span style="margin-left: 8px; white-space: nowrap" v-text="'标签全屏'" />
            </div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts" setup>
import type { ComputedRef, Ref } from 'vue';
import { computed, inject, ref } from 'vue';
import { Icon } from '@iconify/vue';
import { useFullscreen } from '@vueuse/core';
import type { AntMenu, ThemeColor } from '../../types';
import { clickedMenusKey, routeKey, themeColorKey } from '../../utils/injectedKeys';
import TagViewItem from './components/TagViewItem.vue';

const { route } = inject<{ route: ComputedRef<Record<string, any>> }>(routeKey)!;
const { themeColor } = inject<{ themeColor: Ref<ThemeColor> }>(themeColorKey)!;
const { clickedMenus, removeOtherClickedMenus } = inject<{
  clickedMenus: Ref<AntMenu[]>;
  removeOtherClickedMenus: (menuList: AntMenu) => void;
}>(clickedMenusKey)!;

const tagViewRef = ref();
const tagViewScrollBarRef = ref();

const filterMenus = computed(() => clickedMenus.value.filter(i => !i.meta?.isHidden));

const tagViewHasScrollbar = computed(() => {
  const el = tagViewScrollBarRef.value as HTMLDivElement;
  const { scrollWidth, clientWidth } = el || {};
  return scrollWidth > clientWidth;
});
// 鼠标滚动事件
const onHandleScroll = (e: any) => {
  const el = tagViewScrollBarRef.value as HTMLDivElement;
  el.scrollLeft = el.scrollLeft - e.wheelDelta / 5;
};
// 左右滚动条点击事件
const onTagViewScroll = (direction: 'left' | 'right') => {
  const el = tagViewScrollBarRef.value as HTMLDivElement;
  if (direction === 'left' && el.scrollLeft > 0) el.scrollLeft = el.scrollLeft - 10;
  if (direction === 'right') el.scrollLeft = el.scrollLeft + 10;
};

/**
 * ------------------------- tagView 更多操作菜单 -------------------------
 */
// 关闭其他标签
const handleCloseOtherTag = () => {
  const currentTag = clickedMenus.value.find(menu => menu.key === route.value.path);
  if (currentTag) removeOtherClickedMenus(currentTag);
};
const handleFullscreen = () => {
  const el = ref(document.getElementById('theMain'));
  const { enter } = useFullscreen(el);
  enter();
};
</script>

<style scoped>
.tagView {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 38px;
}
.tagView-operator {
  position: relative;
  height: 100%;
  width: 38px;
  min-width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tagView-operator:hover {
  color: v-bind("themeColor.primary");
}

.tagView-content {
  display: flex;
  align-items: center;
  flex: 1;
  height: 38px;
  margin: 0 0.25rem;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all ease 0.3s 0s;
}
.tagView-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tagView-content-item {
  display: inline-flex;
  padding: 0 3px;
  height: 100%;
}

.tagView-arrow {
  position: sticky;
  width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px #cccccc solid;
  cursor: pointer;
}

.tagView-arrow:hover {
  background-color: v-bind("themeColor.primary");
  color: white;
  border-color: v-bind("themeColor.primary");
}
</style>
