<template>
  <div
    :class="[
      'menu-cascader-second-item',
      {
        'menu-cascader-second-item-active': isChildMenu(activeMenu, menu),
      },
    ]"
    @click="handleMenuClick"
  >
    <TextOverflow :text="renderMenuTitle(menu)" tooltip-placement="right" class="menu-title-text" />
  </div>
</template>

<script setup lang="ts">
import { type TreeMenuItem } from 'cube-front/core/stores/menu';
import { isChildMenu, renderMenuTitle } from 'cube-front/core/utils/menuHelpers';
import TextOverflow from 'cube-front/core/components/TextOverflow.vue';

/**
 * 二级层叠菜单项组件Props接口定义
 */
interface SecondCascaderMenuItemProps {
  /** 菜单项 */
  menu: TreeMenuItem;
  /** 激活菜单项 */
  activeMenu?: TreeMenuItem;
  /** 菜单点击回调函数 */
  onMenuClick: (menu: TreeMenuItem) => void;
}

const props = defineProps<SecondCascaderMenuItemProps>();

/**
 * 处理菜单项点击
 * @param event 鼠标事件
 */
const handleMenuClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  props.onMenuClick?.(props.menu);
};
</script>

<style lang="scss" scoped>
.menu-cascader-second-item {
  font-size: 14px;
  letter-spacing: 0;
  width: 100%;
  height: 36px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 16px;
  padding-left: 20px;
  padding-right: 10px;
  color: #6a6a6a;
  line-height: 36px;
  cursor: pointer;

  .menu-title-text {
    width: 100%;
    display: block;
  }
  box-sizing: border-box;

  &-active,
  &:hover {
    color: var(--primary-color);
    background: #e9f6fe;
  }
}
</style>