<script lang="ts" setup>
import { PropType, ref, watch } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';
import { ISystemRightTabList } from '@/model/nav-datatype';

const props = defineProps({
  tabList: {
    type: Array as PropType<ISystemRightTabList[]>,
    required: true,
    default: () => [],
  },
  checkTabIndex: {
    type: String,
    required: true,
    default: '1',
  },
  id: {
    type: String,
    required: false,
    default: '',
  },
  // 是否需要翻译
  needTraduction: {
    type: Boolean,
    required: false,
    default: true,
  },
  isRouteMode: {
    type: Boolean,
    required: false,
    default: false,
  }
});

const tabIndex = ref(props.checkTabIndex);

watch(() => props.checkTabIndex, (val: string) => {
  tabIndex.value = val;
});

onBeforeRouteUpdate((to: any) => {
  props.tabList.forEach((item: any) => {
    if (item.router === to.path) {
      tabIndex.value = item.index;
      return;
    }
  });
});

const rightTabsEmit = defineEmits(['handleSelect']);

const handleSelect = (key: String) => {
  rightTabsEmit('handleSelect', key);
};
</script>

<template>
  <el-menu
    :id="id"
    :default-active="tabIndex"
    :router="isRouteMode"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item 
      v-for="item in tabList" 
      :id="item.id" 
      :key="item.label" 
      :index="item.index"
    >
      <!-- 未选中时的背景块，绝对定位，有透明度0.5 -->
      <div class="bg-box"></div>
      <!-- 是为了撑开盒子,透明度为0 -->
      <span class="text">{{ needTraduction ? $t(item.label) : item.label }}</span>
      <!-- 真正展示的文本，绝对定位，让其位置在透明背景的上方 -->
      <span class="text no-opcity-text">{{ needTraduction ? $t(item.label) : item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.el-menu--horizontal {
  border-bottom: none !important;
  background-color: rgba(0, 0, 0, 0);
  margin-bottom: 4px;
  min-height: 36px;

  > .el-menu-item {
    padding: 0 24px;
    margin-right: 4px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 1px 1px 0 0;
    font-size: 14px;
    color: var(--o-text-color-secondary);
    position: relative;

    .bg-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--o-bg-color-base);
      opacity: 0.5;
      z-index: 1;
    }

    .text {
      opacity: 0;
      display: inline-block;
      height: 100%;
      line-height: 36px;
    }

    .no-opcity-text {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      opacity: 1;
      font-weight: 600;
    }
    

    &:hover {
      background-color: var(--o-bg-color-base) !important;
      color: var(--o-color-primary-secondary);
    }
  }

  > .el-menu-item.is-active {
    color: var(--o-color-primary) !important;
    background-color: var(--o-bg-color-base) !important;
    position: relative;

    .bg-box {
      display: none;
    }

    &::before {
      position: absolute;
      content: '';
      bottom: -4px;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 4px;
      background-color: var(--o-bg-color-base);
    }
  }
}
</style>
