<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: '',
  },
});

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"
    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">
      {{ $t(item.label) }}
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.el-menu-demo {
  margin-top: 8px;
  margin-bottom: 16px;
  margin-right: 24px;
}

.el-menu--horizontal,
.el-menu-item.is-active,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(0, 0, 0, 0);
}

.el-menu--horizontal > .el-menu-item {
  height: auto;
  line-height: 1;
  padding: 0 0 8px 0;
  margin-right: 32px;
}

.el-menu--horizontal > .el-menu-item:last-child {
  margin-right: 0;
}

.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-menu-item {
  border-bottom-width: 1px;
  font-weight: 600;
}

.el-menu--horizontal > .el-menu-item.is-active {
  color: var(--o-color-primary) !important;
  border-bottom: 2px solid var(--o-color-primary) !important;
}

.el-menu--horizontal > .el-menu-item {
  color: var(--o-text-color-secondary);
  font-size: 14px;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: var(--o-color-primary-secondary) !important;
}
</style>
