import { defineComponent } from 'vue'
import { RouterLink } from 'vue-router'
import styles from './index.module.less'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}
// 个人中心默认地址
const defaultRoute = 'studentInfo'

export default defineComponent({
  name: 'user-menu',
  data() {
    return {}
  },
  computed: {
    activeRoute() {
      return this.$route.name
    },
    acitveMenuRoute() {
      return this.$route.meta.activeMenu
    },
    menuList() {
      const hasRoute = this.$router.hasRoute(defaultRoute)
      // 判断是否有个人中心的菜单
      if (!hasRoute) {
        return
      }
      const allRouter = this.$router.getRoutes()
      const userInfoRouter = allRouter.find(item => item.name === defaultRoute)
      const list: any = []
      userInfoRouter?.children.forEach((item: any) => {
        if (!item.meta.hidden) {
          list.push(item)
        }
      })
      return list
    }
  },
  render() {
    return (
      <div class="bg-white rounded-[6px] text-center pt-6 flex items-center flex-col">
        {this.menuList.map((item: any) => (
          <RouterLink
            to={item.path}
            class={[
              'py-4 px-6 flex items-center text-lg font-semibold text-[#666] w-full last:mb-0 cursor-pointer',
              styles.menuItem,
              (item.name === this.activeRoute ||
                item.name === this.acitveMenuRoute) &&
                styles.active
            ]}
          >
            <i
              class={['w-6 h-6 mr-[22px]', styles['icon' + item.meta.index]]}
            ></i>
            {item.meta.title}
          </RouterLink>
        ))}
      </div>
    )
  }
})
