<template>
  <a-layout-header :class="[headerTheme, 'admin-header']">
    <div :class="['admin-header-wide', layout, pageWidth]">
      <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
        <img :src="logoSrc" width="32" alt="logo"/>
        <h1 v-if="!isMobile">{{ systemName }}</h1>
      </router-link>
      <a-divider v-if="isMobile" type="vertical" />
      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
      </div>
      <div :class="['admin-header-right', headerTheme]">
        <component class="header-item" :is="dynamicComponents['HeaderSearch']" @active="val => searchActive = val"/>
        <a-tooltip class="header-item" placement="bottom" title="清理缓存" >
          <a @click="handleToClearCache">
            <a-icon type="reload" />
          </a>
        </a-tooltip>
        <component v-if="menuTools.notice" class="header-item" :is="dynamicComponents['HeaderNotice']"/>
        <header-avatar class="header-item"/>
        <a-dropdown class="lang header-item">
          <div>
            <a-icon type="global"/> {{ langAlias }}
          </div>
          <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import HeaderSearch from './HeaderSearch'
import HeaderAvatar from './HeaderAvatar'
import IMenu from '@vue2-client/components/menu/menu'
import { mapState, mapMutations } from 'vuex'
import { Modal } from 'ant-design-vue'
import { indexedDB } from '@vue2-client/utils/indexedDB'

const loadComponents = (value) => {
  const component = {
    HeaderSearch: import('@vue2-client/layouts/header/HeaderSearch'),
    HeaderNotice: import('@vue2-client/layouts/header/HeaderNotice')
  }
  if (!value) {
    return component
  }
  for (const item in component) {
    const path = value[item]
    if (path) {
      component[item] = import(`@/layouts/header/${path}`).catch(() => import(`@vue2-client/layouts/header/${path}`))
    }
  }
  return component
}

export default {
  name: 'AdminHeader',
  components: { IMenu, HeaderAvatar, HeaderSearch },
  // eslint-disable-next-line vue/require-prop-types
  props: ['collapsed', 'menuData'],
  data () {
    return {
      langList: [
        { key: 'CN', name: '简体中文', alias: '简体' },
        { key: 'HK', name: '繁體中文', alias: '繁體' },
        { key: 'US', name: 'English', alias: 'English' }
      ],
      searchActive: false,
      dynamicComponents: {}
    }
  },
  computed: {
    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'logoSrc', 'lang', 'pageWidth', 'menuTools', 'customizeComponent']),
    headerTheme () {
      if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
        return 'light'
      }
      return this.theme.mode
    },
    langAlias () {
      const lang = this.langList.find(item => item.key === this.lang)
      return lang.alias
    },
    menuWidth () {
      const { layout, searchActive } = this
      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
      const extraWidth = searchActive ? '600px' : '400px'
      return `calc(${headWidth} - ${extraWidth})`
    }
  },
  created () {
    const components = loadComponents(this.customizeComponent)
    for (const item in components) {
      const value = components[item]
      if (typeof value === 'function') {
        this.$set(this.dynamicComponents, item, value)
      } else {
        components[item].then(result => {
          this.$set(this.dynamicComponents, item, result.default)
        })
      }
    }
  },
  methods: {
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    handleToClearCache () {
      Modal.confirm({
        title: '信息',
        content: '您确定要清除缓存吗？',
        onOk: () => {
          indexedDB.clearCache()
        },
        onCancel () {}
      })
    },
    ...mapMutations('setting', ['setLang'])
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>
