<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :show-timeout="200"
        :default-active="getDefaultActive()"
        :collapse="isCollapse"
        mode="vertical"
        @select="selectMenu"
      >
        <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 Cookies from 'js-cookie'
import tabJs from '../../../api/tab'
import { getMenus } from '../../../utils/permissionAuth'
import { getI18nName } from '../../../utils/menu'
export default {
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  props: {
    systemCode: {
      type: String,
      default: null
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const menus = getMenus()
    return {
      menus
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse() {
      if (this.collapse === false) {
        return !this.sidebar.opened
      }
      return true
    }
  },
  created() {
    this.firstLeafMenu = this.getMyFirstMenu(this.menus)
    if (this.firstLeafMenu && this.firstLeafMenu.fullPath) {
      // 跳转到第一个页面
      if (this.firstLeafMenu.pageType && this.firstLeafMenu.pageType === 'iframe') {
        const iframeSrc = this.firstLeafMenu.fullPath
        // const pageCode = this.firstLeafMenu.path
        const menuName = getI18nName(this.firstLeafMenu)
        const query = { src: iframeSrc, customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: menuName }
        this.addTabs(query, this.$store.state.tabContent.openTab, '/dsc/iframe-page', '/dsc/iframe-page')
        this.$router.push({ path: '/dsc-index/iframe-page', query: query })
      } else {
        const pageCode = this.firstLeafMenu.path
        const query = { customSystem: this.systemCode, pageCode: pageCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
        this.addTabs(query, this.$store.state.tabContent.openTab, '/dsc/page', '/dsc/page')
        this.$router.push({ path: '/dsc-index/page', query: query })
        // this.$router.push({ path: this.firstLeafMenu.fullPath })
      }
    }
  },
  methods: {
    ...tabJs,
    getDefaultActive() {
      if (this.firstLeafMenu && this.firstLeafMenu.pageType !== 'iframe') {
        const pageCode = this.firstLeafMenu.path
        return '/dsc/' + this.firstLeafMenu.code + '~~' + pageCode
      } else if (this.firstLeafMenu && this.firstLeafMenu.pageType === 'iframe') {
        return '/dsc/' + this.firstLeafMenu.code + '~~'
      } else {
        return ''
      }
    },
    toggleSideBar() {
      this.$store.dispatch('toggleSidebar')
    },
    selectMenu(index, indexPath) {
      localStorage.setItem('selectMenu', index)
    },
    getMyFirstMenu(menus) {
      if (menus && menus.length > 0) {
        let shouldSelectMenu = this.getFirstMenu(menus)
        if (!shouldSelectMenu) {
          shouldSelectMenu = this.getFirstMenuWithCookie(menus)
        }
        // 默认不展示第一个有权限的菜单了，可以去掉下面的代码
        // if (!shouldSelectMenu) {
        //   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
        // }
        return shouldSelectMenu
      }
    },
    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
          }
        }
        return shouldSelectMenu
      }
    },
    getShouldSelectMenu(menu) {
      // console.log('dsc--getShouldSelectMenu--this.$route=', this.$route)
      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
      }
    },
    getSelectMenuWithFirstMenu(menu) {
      if (menu) {
        let shouldSelectMenu
        const children = menu.children
        if (children && children.length > 0) {
          shouldSelectMenu = this.getFirstMenu(children)
        } else {
          shouldSelectMenu = menu
        }
        return shouldSelectMenu
      }
    },
    getFirstMenuWithCookie(menus) {
      if (menus && menus.length > 0) {
        const cookieMenu = localStorage.getItem('selectMenu')
        if (cookieMenu) {
        //   // 表示缓存中存储了menu，格式为：/dsc/菜单编码~~pageCode
          const prefix = '/dsc/'
          const menuCode = cookieMenu.substring(cookieMenu.indexOf(prefix) + prefix.length, cookieMenu.lastIndexOf('~~'))

          let shouldSelectMenu
          for (let i = 0; i < menus.length; i++) {
            const menu = menus[i]
            shouldSelectMenu = this.getShouldSelectMenuWithCookie(menu, menuCode)
            if (shouldSelectMenu) {
            // 表示获得到了应该选中的菜单
              break
            }
          }
          return shouldSelectMenu
        }
      }
    },
    getShouldSelectMenuWithCookie(menu, menuCode) {
      if (menu) {
        // console.log('dsc--getShouldSelectMenuWithCookie--this.$route=', this.$route)
        let shouldSelectMenu
        const children = menu.children
        if (children && children.length > 0) {
          shouldSelectMenu = this.getFirstMenuWithCookie(children)
        } else if (menu.code && menu.code === menuCode) {
          shouldSelectMenu = menu
        }
        return shouldSelectMenu
      }
    }
  }
}
</script>
