<script lang="jsx">
import { ref , computed , mergeProps } from 'vue'
import { useRoute , useRouter } from 'vue-router'
import { empty } from '@monda/utils'
import { GET_MENUS } from '@/http/apis/user'
import { IconApps } from '@arco-design/web-vue/es/icon'
import store from '@/store'

/**
 * 左侧导航栏
 */
export default {
  name: "LayoutAside" ,
  setup () {

    const route = useRoute()
    const router = useRouter()

    const openKeys = ref([])
    const disabled = ref(false)
    const doUpdateDisabled = bool => disabled.value = bool

    // 将数组转成健值对方，配合菜单数据通过路由名称获取到路由的相关信息
    const routes = router.getRoutes().reduce((routes , route) => {
      const { name } = route
      return empty(name) ? routes : mergeProps(routes , { [name] : route })
    } , {/*_*/})

    // 当前选中路由数组
    const selectedKeys = computed(() => {
      const items = route.matched.map(({ name }) => name)
      openKeys.value = items
      return items
    })

    // 菜单数据
    const menuItems = computed(() => {
      return store.getters[GET_MENUS]
    })

    // 菜单点击
    const doMenuItemClick = name => {
      if (disabled.value){
        return // 提示过程中不做改动
      }
      if (empty(routes[name])) {
        return Promise.reject(new Error('不存在的路由'))
      }
      router.push({ name })
    }

    // 展开/收起
    const onSubMenuClick = (name , items) => {
      if (disabled.value){
        return // 提示过程中不做改动
      }
      openKeys.value = items
    }


    return () => {

      const _attrs = {
        openKeys : openKeys.value ,
        selectedKeys : selectedKeys.value ,
        onSubMenuClick ,
        autoScrollIntoView : true ,
        showCollapseButton : true ,
        autoOpenSelected : true ,
        levelIndent : 30 ,
      }

      const getMenuItem = (item , lv) => {
        const { name , routeName , children } = item
        const Icon = routes[routeName]?.meta?.icon || IconApps
        // a-menu-item
        if (empty(children)) {
          const itemSlots = { default : () => name }
          const onClick = (...args) => doMenuItemClick(routeName , ...args)
          if (lv < 1) {
            itemSlots.icon = () => <Icon/>
          }
          return [
            <my-tips error click position="right" onUpdate:visible={ doUpdateDisabled }>
              <a-menu-item key={ routeName } onClick={ onClick } v-slots={ itemSlots }/>
            </my-tips>
          ]
        }
        // a-sub-menu
        const subMenuSlots = {
          title : () => name ,
          default : () => children.map(item => getMenuItem(item , lv+1)) ,
        }
        if (lv < 1) {
          subMenuSlots.icon = () => <Icon/>
        }
        return <a-sub-menu key={ routeName } v-slots={ subMenuSlots }/>
      }

      return [
        <a-layout-sider class="my-aside">
          <a-menu { ..._attrs }>
            { menuItems.value.map(item => getMenuItem(item,0)) }
          </a-menu>
        </a-layout-sider>
      ]
    }
  }
}
</script>

<style scoped lang="less">
.my-aside{
  width: initial!important;

  .arco-menu{
    width: 200px;
    height: 100%;

    &.arco-menu-collapsed{
      width: 48px;
    }
  }
}
</style>