<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :show-timeout="200"
        :default-active="defaultActive?defaultActive:''"
        :collapse="isCollapse"
        mode="vertical"
        @select="selectMenu"
      >
        <el-menu-item v-if="systemName" :title="systemName" index="1" disabled class="system-item" style="padding-left: 10px">
          {{ systemName }}
        </el-menu-item>
        <sidebar-item v-for="menu in menus" :key="menu.code" :item="menu" />
      </el-menu>
    </el-scrollbar>
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import Vue from 'vue'
import { getLanguageWithLocale } from '../../../../utils/util'
import { isShowSystemMenu } from '../../../../utils/common-util'
import tabJs from '../../../../api/tab'
import { getI18nName } from '../../../../utils/menu'
import Cookies from 'js-cookie'
import { getMenus } from '../../../../utils/permissionAuth'
export default {
  name: 'Menubar',
  components: {
    SidebarItem
  },
  props: {
    systemCode: {
      type: String,
      default: null
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let systemName
    if (isShowSystemMenu() === true) {
      const language = getLanguageWithLocale()
      const systemNameObj = Vue.prototype.systemNameObj
      if (systemNameObj) {
        systemName = systemNameObj[language]
      }
    }
    const menus = getMenus()
    return {
      firstLeafMenu: null, // 第一个有权限的叶子菜单，用于默认展开第一个父菜单
      systemName,
      defaultActive: '',
      menus
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse() {
      if (this.collapse === false) {
        return !this.sidebar.opened
      }
      return true
    }
  },
  watch: {
    $route() {
      this.firstLeafMenu = this.getFirstMenu(this.menus)
      if (this.firstLeafMenu) {
      // Breadcrumb组件需要使用Vue.prototype._selectMenu的值，格式为：fullPath~~title
        this.defaultActive = this.firstLeafMenu.fullPath + '~~' + this.firstLeafMenu.i18nValue
        Vue.prototype._selectMenu = this.defaultActive
      }
    }
  },
  created() {
    this.firstLeafMenu = this.getFirstMenu(this.menus)
    if (this.firstLeafMenu) {
      // Breadcrumb组件需要使用Vue.prototype._selectMenu的值，格式为：fullPath~~title
      this.defaultActive = this.firstLeafMenu.fullPath + '~~' + this.firstLeafMenu.i18nValue
      Vue.prototype._selectMenu = this.defaultActive
    }
    if (this.firstLeafMenu && this.firstLeafMenu.fullPath) {
      // 跳转到第一个页面
      if (this.firstLeafMenu.pageType && this.firstLeafMenu.pageType === 'iframe') {
        const iframeSrc = this.firstLeafMenu.fullPath
        // this.$router.push({ path: '/iframe-page/page', query: { src: iframeSrc }})
        const query = { src: iframeSrc, customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
        this.addTabs(query, this.$store.state.tabContent.openTab, '/iframe-page/page', '/iframe-page/page')
        // this.$router.push({ path: '/iframe-page/page', query: query })
        this.$router.push({ path: '/tab-content-iframe-index', query: query })
      } else {
        const query = { customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
        const path = this.firstLeafMenu.fullPath
        this.addTabs(query, this.$store.state.tabContent.openTab, path, path)
        this.$router.push({ path: '/tab-content-index', query: query })
        // this.$router.push({ path: this.firstLeafMenu.fullPath })
      }
    }
  },
  methods: {
    ...tabJs,
    toggleSideBar() {
      this.$store.dispatch('toggleSidebar')
    },
    selectMenu(index, indexPath) {
      Vue.prototype._selectMenu = index
      Cookies.set('selectMenu', index)
    },
    getFirstMenu(menus) {
      if (menus && menus.length > 0) {
        let shouldSelectMenu
        for (let i = 0; i < menus.length; i++) {
          const menu = menus[i]
          shouldSelectMenu = this.getShouldSelectMenu(menu)
          if (shouldSelectMenu) {
            // 表示获得到了应该选中的菜单
            break
          }
        }
        // if (!shouldSelectMenu) {
        //   // 如果没有获得默认选中的菜单，则默认选中第一个菜单
        //   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
        // }
        return shouldSelectMenu
      }
    },
    getShouldSelectMenu(menu) {
      const currentMenuCode = this.$route.query ? this.$route.query._menuCode : null
      if (menu && currentMenuCode) {
        let shouldSelectMenu
        const children = menu.children
        if (children && children.length > 0) {
          shouldSelectMenu = this.getFirstMenu(children)
        } else if (menu.code && menu.code === currentMenuCode) {
          shouldSelectMenu = menu
        }
        return shouldSelectMenu
      }
      // if (menu) {
      //   const cookieMenu = Cookies.get('selectMenu')
      //   let currentRoute = this.$route.path
      //   if (cookieMenu && cookieMenu.indexOf('~~') > 0) {
      //     // cookie中记录了选中的菜单路径
      //     const path = cookieMenu.substring(0, cookieMenu.lastIndexOf('~~'))
      //     currentRoute = path
      //   }
      //   let shouldSelectMenu
      //   const children = menu.children
      //   if (children && children.length > 0) {
      //     shouldSelectMenu = this.getFirstMenu(children)
      //   } else if (menu.fullPath && menu.fullPath === currentRoute) {
      //     shouldSelectMenu = menu
      //   }
      //   return shouldSelectMenu
      // }
    },
    getSelectMenuWithFirstMenu(menu) {
      if (menu) {
        let shouldSelectMenu
        const children = menu.children
        if (children && children.length > 0) {
          shouldSelectMenu = this.getFirstMenu(children)
        } else {
          shouldSelectMenu = menu
        }
        return shouldSelectMenu
      }
    }
  }
}
</script>
