<template>
  <div>
    <header class="navbar">
      <div class="container">
        <!--        <button v-show="$store.state.app.device === 'mobile'" :aria-expanded="isShowMenuMobile" class="navbar-toggler" @click="isShowMenuMobile = !isShowMenuMobile">-->
        <!--          <span class="navbar-toggler-icon" />-->
        <!--        </button>-->
        <div class="navbar-brand">
          <router-link to="/">
            <img class="navbar-brand__logo" :src="require('@/assets/logo-mini.png')" alt="">
            <img class="navbar-brand__img" :src="require('@/assets/title.png')" alt="">
          </router-link>
        </div>
        <div class="navbar-module" @click="isShowMenuMobile = !isShowMenuMobile">
          <svg-icon icon-class="modules" class-name="modules__toggler" />
          <el-menu
            id="navbar-menu"
            :text-color="variables.menuText"
            :background-color="variables.menuBg"
            :active-text-color="variables.menuActiveText"
            :default-active="activeMenu"
            mode="horizontal"
          >
            <Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
          </el-menu>
        </div>
        <div class="navbar-nav flex-row order-md-last">

          <div class="tool">
            <template v-if="isFullscreen">
              <div class="tool-item fullscreen" @click="fullscreen">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                  <path stroke-width="2" d="M 4 8 l 4 0 l 0 -4 M 16 4 l 0 4 l 4 0 M 20 16 l -4 0 l 0 4 M 8 20 l 0 -4 l -4 0" />
                </svg>
              </div>
            </template>
            <template v-else>
              <div class="tool-item fullscreen" @click="fullscreen">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                  <path stroke-width="2" d="M 4 8 l 0 -4 l 4 0 M 16 4 l 4 0 l 0 4 M 20 16 l 0 4 l -4 0 M 8 20 l -4 0 l 0 -4" />
                </svg>
              </div>
            </template>
            <theme-picker class="tool-item" />
            <el-badge :is-dot="device === 'mobile'" :max="99" :value="12" class="tool-item">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
            </el-badge>
          </div>
          <div class="nav-item">
            <el-dropdown @command="userCommandHandle">
              <a class="nav-link d-flex lh-1 text-reset p-0 nav-info">
                <img class="avatar avatar-sm" style="" src="@/assets/face.jpg" alt="">
                <div class="d-none d-xl-block ps-2">
                  <div>{{ name }}</div>
                  <div class="mt-1 small" style="color: #eee;">{{ (department && department.name) ? department.name : '暂无部门' }}</div>
                </div>
              </a>

              <el-dropdown-menu slot="dropdown" size="mini">
                <el-dropdown-item command="info">
                  <SvgIcon icon-class="user" />
                  <span style="padding-left: 8px;">用户信息</span>
                </el-dropdown-item>
                <el-dropdown-item command="password">
                  <SvgIcon icon-class="password" />
                  <span style="padding-left: 8px;">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <SvgIcon icon-class="logout" />
                  <span style="padding-left: 8px;">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>

    <header class="navbar-expand-md">
      <!--      <div v-if="$store.state.app.device === 'desktop'" id="navbar-menu" class="navbar-collapse">-->
      <!--        <el-menu-->
      <!--          style="width: 100%;padding: 0 10px;"-->
      <!--          :text-color="variables.menuText"-->
      <!--          :background-color="variables.menuBg"-->
      <!--          :active-text-color="variables.menuActiveText"-->
      <!--          :default-active="activeMenu"-->
      <!--          mode="horizontal"-->
      <!--        >-->
      <!--          <Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />-->
      <!--        </el-menu>-->
      <!--      </div>-->

      <div id="navbar-menu-mobile" class="navbar-collapse collapse" :style="{ zIndex: zIndex }">
        <transition name="fade-transform-y">
          <div v-show="isShowMenuMobile" class="navbar">
            <el-menu
              unique-opened
              style="width: 100%;padding: 0 6px;"
              :text-color="variables.menuText"
              :background-color="variables.menuBg"
              :active-text-color="variables.menuActiveText"
              :default-active="activeMenu"
              @select="isShowMenuMobile = false"
            >
              <Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
            </el-menu>
          </div>
        </transition>
      </div>
    </header>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import { mapGetters } from 'vuex'
import Item from './Item.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import ThemePicker from '@/components/ThemePicker/index.vue'
import { PopupManager } from 'element-ui/lib/utils/popup'
export default {
  components: {
    ThemePicker,
    Item,
    SvgIcon
  },
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      isFullscreen: false,
      isShowMenuMobile: false,
    }
  },
  computed: {
    variables() {
      return variables
    },
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'permission_routes',
      'department',
      'device'
    ]),
    activeMenu() {
      const route = this.$route
      const {
        meta,
        path
      } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  watch: {
    isShowMenuMobile(newVal) {
      if (newVal) {
        this.zIndex = PopupManager.nextZIndex()
      }
    }
  },
  created() {
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreen)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreen)
  },
  methods: {
    handleFullscreen() {
      this.isFullscreen = document.fullscreenElement !== null
    },
    fullscreen() {
      if (!document.fullscreenElement) {
        // 请求全屏
        document.documentElement.requestFullscreen()
      } else {
        // 退出全屏
        document.exitFullscreen()
      }
    },

    async userCommandHandle(command) {
      switch (command) {
        case 'logout':
          await this.logout()
          break
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      await this.$store.commit('permission/SET_ROUTES', [])
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/styles/navbar.scss');

</style>
