import type { RouteMeta } from 'vue-router'
import { Icon } from '../../../Icon'
import { useI18n } from '../../../../hooks/web/useI18n'
import { ref } from 'vue'

export const useRenderMenuTitle = () => {
  const renderMenuTitle = (meta: RouteMeta) => {
    const { t } = useI18n()
    const { title = 'Please set title', icon, count } = meta
    // 是否显示计数 （undefined时不显示）
    const showCount = !!count
    const countFormat = ref(0)
    if (showCount) {
      const c = Number(count)
      // 大于99 最大显示99
      countFormat.value = c > 99 ? 99 : c
    }
    return (
      <>
        {/*@ts-ignore*/}
        {icon ? <Icon icon={meta.icon} title={title} size={14}></Icon> : ''}
        <div class="countItem">
          <span
            class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap"
            title={title}
          >
            {t(title as string)}
          </span>
          {/* 为 0 时 依旧不显示 */}
          {/*&& countFormat.value > 0*/}
          {showCount ? (
            <div class="count">
              <span>{countFormat.value}</span>
            </div>
          ) : (
            ''
          )}
        </div>
      </>
    )
  }

  return {
    renderMenuTitle
  }
}
