<template>
  <ElMenu
    class="syMenu"
    mode="horizontal"
    @select="handleSelect"
    :default-active="defaultModelValue"
    background-color="#ffff"
    :text-color="textColor"
    :active-text-color="activeTextColor"
  >
    <ElMenuItem
      v-for="(menu, index) in menuList"
      :key="menu.value"
      :index="menu.value"
    >
      <div
        :style="{
          fontWeight:
            modelValue === menu.value ? activeTextFontWeight : textFontWeight,
        }"
      >
        <ElTooltip
          :content="menu.label"
          placement="top"
          :disabled="menu.label.length <= 5"
        >
          {{
            menu.label.length > 5 ? menu.label.slice(0, 5) + "..." : menu.label
          }}
        </ElTooltip>
      </div>
      <div
        class="line short"
        :style="{
          backgroundColor:
            modelValue === menu.value ? activeTextColor : 'transparent',
        }"
        v-if="index === 0 || index === menuList.length - 1"
      ></div>
      <div
        class="line"
        :style="{
          backgroundColor:
            modelValue === menu.value ? activeTextColor : 'transparent',
        }"
        v-else
      ></div>
    </ElMenuItem>
  </ElMenu>
</template>

<script setup lang="ts">
import { ElMenu, ElMenuItem, ElTooltip } from "element-plus";
const props = withDefaults(
  defineProps<{
    menuList: {
      value: any;
      label: string;
    }[];
    modelValue: any;
    textColor?: string;
    activeTextColor?: string;
    textFontWeight?: number;
    activeTextFontWeight?: number;
    maxStrNum?: number;
  }>(),
  {
    textColor: "var(--sy-black)",
    activeTextColor: "var(--sy-blue)",
    textFontWeight: 500,
    activeTextFontWeight: 500,
    maxStrNum: 10,
  }
);
// eslint-disable-next-line vue/no-setup-props-destructure
const defaultModelValue = props.modelValue;
const emit = defineEmits(["update:modelValue"]);
const handleSelect = (k: any) => {
  emit("update:modelValue", k);
};

const getLineWidth = (index: number, length: number) => {
  if (index === 0 || index === length - 1) {
    return "calc(100% - 24px)" as any;
  } else {
    return "calc(100% - 38px)" as any;
  }
};
</script>

<style lang="scss">
.syMenu.el-menu {
  border-bottom: 0;
}
.syMenu {
  .el-menu-item.is-active {
    border-bottom: 0px;
    .line {
      background-color: var(--sy-blue);
    }
  }
  .el-menu-item {
    border-bottom: 0;
    padding-left: 14px;
    padding-right: 14px;
    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
    }
  }
  .line.short {
    width: calc(100% - 24px);
    bottom: 8px;
  }
  .line {
    position: absolute;
    width: calc(100% - 38px);
    min-width: 10px;
    height: 2px;
  }
}
.syMenu.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.syMenu.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent;
}
</style>
