<template>
  <header class="app-header" :class="[`header-${effect}`]">
    <div class="header-inner">
      <div class="header-before">
        <!-- Logo -->
        <router-link to="/">
          <!-- <el-image
            :src="`/img/brand_${effect === 'light' ? 'blue' : 'white'}.png`"
            fit="scale-down"
          ></el-image> -->
          <el-image
            :src="`/img/logo.png`"
            fit="scale-down"
            style="width: 300px"
          ></el-image>
        </router-link>
        <!-- 导航菜单 -->
        <el-menu
          :default-active="$route.path"
          mode="horizontal"
          router
          unique-opened
        >
          <template v-for="item in allModules">
            <template v-if="!item.hidden && item.status">
              <!-- 没有子菜单 -->
              <el-menu-item
                v-if="!item.children"
                :key="item.id"
                :index="item.path"
              >
                {{ item.name }}
              </el-menu-item>
              <!-- 有子菜单 -->
              <el-submenu v-else :key="item.id" :index="item.id + ''">
                <template slot="title">{{ item.name }}</template>
                <template v-for="subitem in item.children">
                  <template v-if="!subitem.hidden && subitem.status">
                    <el-menu-item
                      v-if="!subitem.isExternal"
                      :key="subitem.id"
                      :index="subitem.path"
                    >
                      {{ subitem.name }}
                    </el-menu-item>
                    <el-menu-item
                      v-else
                      :key="subitem.id"
                      @click="openNewTab(subitem.path)"
                    >
                      {{ subitem.name }}
                    </el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </template>
          </template>
        </el-menu>
      </div>
      <router-link to="/search">
        <el-link :underline="false">
          <i class="el-icon-search"></i>
        </el-link>
      </router-link>
      <el-link :underline="false" href="http://192.168.1.133:8080">
        <div>后台入口</div>
      </el-link>
    </div>
  </header>
</template>

<script>
import loadConfig from '@/mixins/load-config'
import { mapState } from 'vuex'
import { openNewTab } from '@/utils/common.js'

export default {
  name: 'AppHeader',
  mixins: [loadConfig],
  props: {
    effect: {
      type: String,
      default: 'transparent',
      description: '导航栏主题，(transparent | dark | light)'
    }
  },
  methods: {
    openNewTab
  },
  computed: {
    ...mapState(['allModules'])
  }
}
</script>
