<script>
import { useModel } from '@/store'
import { menus } from '@/router/routes'
import { computed, h, resolveComponent } from 'vue'

const getAuthMenu = (menuList, authList) => menuList.reduce((acc, menu) => {
  const exists = authList.filter(x => x.code === menu.route.name)[0]
  if (!exists) {
    return acc
  }

  if (menu.children) {
    menu.children = getAuthMenu(menu.children, authList)
  }

  return acc.concat(menu)
}, [])

export default {
  setup(props) {
    const { user } = useModel('user')
    const menuList = getAuthMenu(menus, user.menuList)
    console.log(menuList)

    const renderMenuItem = menu => [h(i, { class: menu.icon }, '&nbsp;'), menu.title]
    const renderMenuWithLink = menu => h('router-link', { to: {name: menu.route.name} }, renderMenuText(menu))

    const renderSubMenu = list => list.map(menu => h(
      'el-submenu',
      {},
      [
        h(
          resolveComponent('template'),
          {},
          {
            title: props => menu.children ? renderMenuItem(menu) : renderMenuWithLink(menu)
          }
        ),
        ...(menu.children ? renderSubMenu(menu.children) : [])
      ]
    ))

    return () => h('el-menu', {}, renderSubMenu(menuList))
  }
}
</script>
