<template>
    <div class="top-tabs-box" ref="topTabsElement">
      <div class="top-tabs">
        <ul class="top-tabs-container">
          <li
            v-for="(item, index) in tagsList"
            :key="index"
            @click="handleClick(item, index)"
            :class="[
              currentval === index ? 'top-tabs-item-active' : '',
              'top-tabs-item'
            ]"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
      <div class="top-tabs-content">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  import { debounce } from 'lodash-es';
  
  interface Tag {
    label: string;
  }
  
  interface Props {
    modelValue: number;
    tagsList: Tag[];
  }
  
  defineOptions({ name: 'TopTabs' });
  
  const props = withDefaults(defineProps<Props>(), {
    modelValue: 0,
    tagsList: () => []
  });
  
  const topTabsElement: any = ref(null);
  const currentval = ref(props.modelValue);
  
  const emit = defineEmits<{
    (e: 'update:modelValue', value: number): void;
    (e: 'tab-click', item: Tag, index: number, tagsList: Tag[]): void;
  }>();
  
  const handleClick = (item: Tag, index: number) => {
    if (index !== currentval.value) {
      currentval.value = index;
      emit('update:modelValue', index);
      emit('tab-click', item, index, props.tagsList);
  
      // 滚动到选中的 Tab 项
      const container = topTabsElement.value.querySelector('.top-tabs-container');
      const selectedTab = container.children[index];
      if (selectedTab) {
        selectedTab.scrollIntoView({
          behavior: 'smooth', // 平滑滚动
          block: 'nearest', // 滚动到最近的位置
          inline: 'center' // 水平居中
        });
      }
    }
  };
  
  /**
   * 设置元素宽度
   */
  const setElementWidth = async () => {
    await nextTick();
  
    // 使用 offsetWidth（包含边框和滚动条）  clientWidth 不包含滚动条和边框
    // 获取子级元素
    const childrens: any = topTabsElement.value.children;
    // 获取当前元素的宽度
    const width = topTabsElement.value.offsetWidth;
    // 获取第二个元素的宽度
    const childWidth1 = topTabsElement.value.children[0].offsetWidth;
    const childWidth2 = topTabsElement.value.children[1].offsetWidth;
  
    childrens[0].style.width = `${width - childWidth2 - 20}px`;
    if (width - childWidth2 - 20 < childWidth1) {
      childrens[0].style.overflowX = `auto`;
      childrens[0].className = childrens[0].className + ' scroll-container';
    } else {
      childrens[0].style.overflowX = 'hidden';
      childrens[0].className = `${childrens[0].className}`;
    }
  };
  
  const handleResize = debounce(() => setElementWidth(), 800);
  
  onMounted(() => {
    setElementWidth();
    window.addEventListener('resize', handleResize);
  });
  
  onUnmounted(() => window.removeEventListener('resize', handleResize));
  </script>
  
<style lang="scss" scoped>
.top-tabs-box {
  display: flex;
  justify-content: space-between;
  height: 100%; // 确保父容器有足够的高度
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.top-tabs {
  .top-tabs-container {
    display: flex;
    align-items: center;
    overflow-x: auto; // 支持水平滚动
    overflow-y: hidden; // 隐藏纵向滚动条
    max-height: 200px; // 设置最大高度，根据需要调整
    scrollbar-width: thin; // 滚动条宽度
    scrollbar-color: transparent transparent; // 默认滚动条透明

    &::-webkit-scrollbar {
      width: 6px; // 滚动条宽度
      height: 6px; // 水平滚动条高度
      background-color: transparent; // 滚动条背景透明
    }

    &::-webkit-scrollbar-track {
      background: transparent; // 滚动条轨道透明
    }

    &::-webkit-scrollbar-thumb {
      background: transparent; // 滚动条滑块默认透明
      border-radius: 3px; // 滚动条滑块圆角
      transition: background 0.3s ease; // 添加过渡效果
    }

    &:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.3); // hover 时滚动条滑块变为灰色
    }

    .top-tabs-item {
      cursor: pointer;
      padding: 5px 16px;
      height: 30px;
      margin-right: 8px;
      border-radius: 8px;
      font-size: 14px;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .top-tabs-item-active {
      color: #fff;
      background-color: var(--el-color-primary);
    }
  }
}
</style>