<!--
 * @Author: 曹捷
 * @Date: 2020-06-02 09:11:01
 * @LastEditors: cjSound 876304802@qq.com
 * @LastEditTime: 2022-07-22 19:29:03
 * @Description: 左侧菜单
--> 
<template>
  <div class="left-menu" id="left-menu" :class="classObj">
    <logo v-if="config.logo.show ==='menu'" />
    <obitScrollbarVue>
      <a-menu id="layout-menu" mode="inline" @click="toPath" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
        <sidebar-item :base-path="route.path" :item="route" :key="route[config.menu.key]" v-for="route in routes" />
      </a-menu>
    </obitScrollbarVue>
  </div>
</template>

<script>  
 import  Logo from './Logo.vue'
import SidebarItem from './SidebarItem.vue'
import { computed, provide, reactive, toRaw, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import obitScrollbarVue from '../../../components/obit-scrollbar/obit-scrollbar.vue'
// import {Menu} from 'ant-design-vue'
export default {
  name: 'layoutMenu',
  components: { SidebarItem, Logo, obitScrollbarVue },
  setup () {
    let store = useStore()
    let router = useRouter()
    let route = useRoute()
    let config = store.state.settings
    let menuList = store.state.permission.menuList
    let methods = {
      sysnMenuSelectKey () {
        let item = menuList.find(ele => {
          return ele[config.menu.url] === route.path
        })
        return [item ? item[config.menu.key] : '']
      }
    }
    let _data = reactive({
      selectedKeys: methods.sysnMenuSelectKey(),
      openKeys: function () {
        let arr = []
        let currInfo = menuList.find(ele => {
          return ele[config.menu.url] === route.path
        })
        function getPInfo (currInfo) {
          let item = menuList.find(ele => ele[config.menu.id] === currInfo[config.menu.parentId])
          if (item) {
            arr.push(item[config.menu.key])
            getPInfo(item)
          }
        }
        if (currInfo) getPInfo(currInfo)
        return arr
      }(),
      oldOpenKey: []
    })
    let _computed = {
      menuList: computed(() => menuList),
      routes: computed(() => store.state.permission.sysMenu),
      config: computed(() => config),
      classObj: computed(() => {
        let obj = {}
        if (config.logo.show) obj['has-logo'] = true
        obj[config.layout + '-menu'] = true
        return obj
      })

    }
    let _methods = {
      toPath ({ item, key }) {
        let info = toRaw(menuList.find(ele => ele[config.menu.key] == key))
        info.mateName = info[config.menu.name]
        store.dispatch('tagsView/addVisitedView', info)
        // console.log('🚀乾坤子应用', route.path, info[config.menu.url], config)
        let topath = info[config.menu.url]
        if(topath.indexOf('http') !==-1){
          topath = `/frame?url=${topath}`
        }
        if (route.path !== info[config.menu.url]) {
          if (!config.subApp) {
            // 主框架 微应用跳转
            history.pushState(null, topath, topath)
          } else {
            // 子框架独立运行 采用路由
            let query ={}
            if(topath.indexOf('http') !==-1){
              query.url = info[config.menu.url]
            }
            router.push({
              path: topath,
              query
            })
          }

        }
      }
    }
    watch(() => store.state.settings.menu.opened, (value, evalue) => {
      if (value) {
        _data.oldOpenKey = _data.openKeys
        _data.openKeys = []
      } else {
        _data.openKeys = _data.oldOpenKey
      }
    })
    watch(() => route.path, (value) => {
      _data.selectedKeys = methods.sysnMenuSelectKey()
    })
    return {
      ...toRefs(_data),
      ..._computed, ..._methods
    }
  },
}
</script>

