<template>
  <div
    class="tabs-pro"
    :class="{ dark: settingsStore.isDark }"
    v-bind:style="{
      background: settingsStore.isDark ? '#1e1e1e' : '#ffffff',
    }"
  >
    <div class="tabs-wrapper">
      <div
        class="tabs-scroll-area"
        ref="scrollArea"
      >
        <div class="tabs-content">
          <!--  v-bind:style="{
              background: settingsStore.isDark ? 'null' : '#eef9e8',
            }" -->
          <div
            v-for="tab in tabList"
            :key="tab.value"
            class="tab-item"
            :class="{ 'tab-active': modelValue === tab.value }"
            @click="handleTabClick(tab.value)"
            :data-value="tab.value"
          >
            <!-- 添加左下角装饰 -->
            <div class="tab-corner tab-corner-left"></div>
            <!-- 添加分隔线 -->
            <div
              class="tab-divider"
              v-if="tab.value !== tabList[0].value"
            ></div>
            <div class="tab-content">
              <Icon
                :name="tab.icon"
                :color="
                  settingsStore.isDark && modelValue !== tab.value
                    ? '#ffffff'
                    : '#000000'
                "
              />
              <div class="tab-label">{{ tab.label }}</div>
              <div
                class="tab-close"
                @click.stop="handleTabClose(tab.value)"
                v-if="tab.closable"
              >
                <svg
                  viewBox="0 0 24 24"
                  width="14"
                  height="14"
                >
                  <path
                    fill="currentColor"
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </div>
            </div>
            <!-- 添加右下角装饰 -->
            <div class="tab-corner tab-corner-right"></div>
          </div>
        </div>
      </div>
      <div class="tabs-actions">
        <div
          class="scroll-button left"
          @click="scrollLeft"
          v-show="canScrollLeft"
        >
          <svg
            viewBox="0 0 24 24"
            width="16"
            height="16"
          >
            <path
              fill="currentColor"
              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
            />
          </svg>
        </div>
        <div
          class="scroll-button right"
          @click="scrollRight"
          v-show="canScrollRight"
        >
          <svg
            viewBox="0 0 24 24"
            width="16"
            height="16"
          >
            <path
              fill="currentColor"
              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
            />
          </svg>
        </div>
        <div class="tabs-slot">
          <slot name="actions"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useSettingsStore } from "@/stores/settings";
  const settingsStore = useSettingsStore();
  import { ref, onMounted, nextTick, watch } from "vue";
  import { tabsProProps } from "./tabsPro";
  const modelValue = defineModel<string>("value", { default: "" });
  const { tabList } = defineProps(tabsProProps);
  const emits = defineEmits(["handlerClose"]);
  const scrollArea = ref<HTMLElement | null>(null);
  const canScrollLeft = ref(false);
  const canScrollRight = ref(false);
  // 处理标签点击
  const handleTabClick = (value: string) => {
    modelValue.value = value;
    scrollToTab(value);
  };

  // 处理标签关闭
  const handleTabClose = (value: string) => {
    const index = tabList.findIndex((tab) => tab.value === value);
    if (index !== -1) {
      tabList.splice(index, 1);
      // 如果关闭的是当前激活的标签，则激活前一个标签或第一个标签
      if (modelValue.value === value) {
        if (tabList.length > 0) {
          const newActiveIndex = Math.min(index, tabList.length - 1);
          modelValue.value = tabList[newActiveIndex].value;
        }
      }
    }
    emits("handlerClose", value);
  };

  // 滚动到指定标签
  const scrollToTab = (value: string) => {
    nextTick(() => {
      if (!scrollArea.value) return;

      const tabElement = scrollArea.value.querySelector(
        `[data-value="${value}"]`
      ) as HTMLElement;
      if (tabElement) {
        const scrollLeft =
          tabElement.offsetLeft -
          scrollArea.value.offsetWidth / 2 +
          tabElement.offsetWidth / 2;
        scrollArea.value.scrollTo({
          left: Math.max(0, scrollLeft),
          behavior: "smooth",
        });
      }

      updateScrollButtons();
    });
  };

  // 向左滚动
  const scrollLeft = () => {
    if (!scrollArea.value) return;
    scrollArea.value.scrollBy({
      left: -200,
      behavior: "smooth",
    });
  };

  // 向右滚动
  const scrollRight = () => {
    if (!scrollArea.value) return;
    scrollArea.value.scrollBy({
      left: 200,
      behavior: "smooth",
    });
  };

  // 更新滚动按钮状态
  const updateScrollButtons = () => {
    if (!scrollArea.value) return;
    canScrollLeft.value = scrollArea.value.scrollLeft > 0;
    canScrollRight.value =
      scrollArea.value.scrollLeft <
      scrollArea.value.scrollWidth - scrollArea.value.clientWidth;
  };

  // 监听滚动事件
  onMounted(() => {
    if (scrollArea.value) {
      scrollArea.value.addEventListener("scroll", updateScrollButtons);
      window.addEventListener("resize", updateScrollButtons);

      // 初始化滚动按钮状态
      nextTick(() => {
        updateScrollButtons();
        scrollToTab(modelValue.value as string);
      });
    }
  });

  // 监听标签变化
  watch(
    () => modelValue.value,
    (newValue) => {
      scrollToTab(newValue as string);
    }
  );
</script>

<style scoped lang="scss">
  .tabs-pro {
    width: 100%;
    height: 20px;
    background-color: #ffffff;

    .tabs-wrapper {
      display: flex;
      height: 100%;
      position: relative;
    }

    .tabs-scroll-area {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }

    .tabs-content {
      display: flex;
      height: 100%;
      min-width: 100%;
    }

    .tab-item {
      height: 100%;
      width: 120px; // 设置固定宽度为150px
      padding: 0 12px; // 调整内边距
      position: relative;
      cursor: pointer;
      user-select: none;
      background-color: #ffffff;
      margin-right: 0;
      transition: all 0.2s ease;
      border-radius: 8px 8px 0 0;
      display: flex;
      align-items: center;
      z-index: 1;

      &:hover {
        background-color: #dee1e6;
        z-index: 2;

        .tab-corner-left {
          box-shadow: 4px 4px 0 #dee1e6;
        }

        .tab-corner-right {
          box-shadow: -4px 4px 0 #dee1e6;
        }
      }

      &.tab-active {
        background-color: #eef9e8; // 修改选中背景色为#eef9e8
        /* background-color: #18a058; */

        z-index: 3;

        .tab-label {
          color: #62c930; // 修改选中文字颜色为#62c930
          /* color: #000000; */
        }

        .tab-corner-left {
          box-shadow: 4px 4px 0 #eef9e8; // 修改角落装饰的颜色
          /* box-shadow: 4px 4px 0 #18a058; */
        }

        .tab-corner-right {
          box-shadow: -4px 4px 0 #eef9e8; // 修改角落装饰的颜色
          /* box-shadow: -4px 4px 0 #18a058; */
        }
      }
    }

    // 角落装饰元素
    .tab-corner {
      position: absolute;
      bottom: 0;
      width: 12px;
      height: 12px;
      background-color: transparent;
      transition: all 0.2s ease;
    }

    .tab-corner-left {
      left: -12px;
      box-shadow: 4px 4px 0 #ffffff;
      border-radius: 0 0 12px 0;
    }

    .tab-corner-right {
      right: -12px;
      box-shadow: -4px 4px 0 #ffffff;
      border-radius: 0 0 0 12px;
    }

    // 分隔线
    .tab-divider {
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 1px;
      background-color: #e0e0e0;
      z-index: 4; // 确保分隔线在最上层
    }

    // 当标签高亮或者前一个标签高亮时，隐藏分隔线
    .tab-active .tab-divider,
    .tab-active + .tab-item .tab-divider {
      display: none;
    }

    .tab-content {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%; // 确保内容占满整个tab-item
      overflow: hidden;
    }

    .tab-label {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      margin: 0 8px;
    }

    .tab-close {
      width: 16px;
      height: 16px;
      margin-left: auto; // 将关闭按钮推到右侧
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }

      svg {
        width: 12px;
        height: 12px;
        fill: #999;
      }
    }

    .tabs-actions {
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .scroll-button {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      &.left {
        margin-right: 4px;
      }
    }

    .tabs-slot {
      margin-left: 8px;
    }
  }
  // 🌙 暗黑模式
  .dark .tab-item {
    background-color: #1e1e1e;

    &:hover {
      background-color: #3a3a3a;

      .tab-corner-left {
        box-shadow: 4px 4px 0 #3a3a3a;
      }

      .tab-corner-right {
        box-shadow: -4px 4px 0 #3a3a3a;
      }
    }
  }

  .dark .tab-corner-left {
    left: -12px;
    box-shadow: 4px 4px 0 #1e1e1e;
    border-radius: 0 0 12px 0;
  }

  .dark .tab-corner-right {
    right: -12px;
    box-shadow: -4px 4px 0 #1e1e1e;
    border-radius: 0 0 0 12px;
  }
</style>
