<template>
  <div :class="{'topmenu': layoutMode==='topmenu', 'layout-header__fixed': fixedHeader}" class="layout-header">
    <nav class="navbar navbar-expand-lg align-items-center layout-nav--top">
      <top-menu v-if="layoutMode==='topmenu'" :theme="theme" :menus="menus" @menuSelect="$_menuSelect"/>
      <t-icon v-else :icon="collapsed === true ? 'format-indent-increase-outline' : 'format-indent-decrease-outline'" size="24" class="text-gray cursor-pointer" @click.native="switchedSidebarState"></t-icon>
      <!--<span class="splitter d-lg-none"></span>-->
      <!--<h3 class="text-lg mb-0 mr-auto"></h3>-->
      <div class="layout-header-right ml-auto">
        <div :class="['layout-header-action layout-search',{'search--open': searcherOpened}]">
          <t-icon :class="['search__open-trigger']" icon="search-outline" size="20" @click.native.stop="onSearchIconClick"></t-icon>
          <!--<t-input v-model="searchText" icon="search-outline" placeholder="请输入搜索关键字"></t-input>-->
          <t-select
            ref="searchInput"
            v-model="searchText"
            :loading="loading"
            class="search-input"
            filterable
            remote
            placeholder="请输入搜索关键字"
            size="sm"
            @on-keyup="onSelectKeyUp"
            @on-blur="onSelectBlur">
            <t-option-group label="菜单">
              <t-option value="1" label="--" style="height: auto">
                <div class="d-flex align-items-start">
                  <t-icon icon="chart-areaspline" size="16" class="mr-2 text-muted"></t-icon>
                  <div>
                    <p class="mb-0">--</p>
                    <small class="text-muted">综合业务分析</small>
                  </div>
                </div>
              </t-option>
              <t-option value="2" label="--">
                <div class="d-flex align-items-center">
                  <t-icon icon="chart-areaspline" size="16" class="mr-2 text-muted"></t-icon>
                  <div>
                    <p class="mb-0">--</p>
                  </div>
                </div>
              </t-option>
            </t-option-group>
            <t-option-group label="用户">
              <t-option value="3" label="luxf@asiainfo.com">
                <div class="d-flex align-items-center">
                  <img src="/static/images/avastar.jpg" alt="" width="24" class="rounded-circle mr-2">
                  <p class="mb-0">luxf@asiainfo.com</p>
                </div>
              </t-option>
              <t-option value="4" label="luxf@asiainfo.com">
                <div class="d-flex align-items-center">
                  <img src="/static/images/avastar.jpg" alt="" width="24" class="rounded-circle mr-2">
                  <p class="mb-0">luxf@asiainfo.com</p>
                </div>
              </t-option>
            </t-option-group>
          </t-select>
        </div>
        <notices class="layout-header-action"></notices>
        <t-dropdown ref="personMenu" class="layout-header-action" position="bottom-end" trigger-mode="click" >
          <a slot="trigger" href="javascript:void(0)">
            <t-avatar :img-src="userInfo.imageUrl" :text="userInfo.realName" :dot="false"></t-avatar>
            <span>{{ userInfo.realName }}</span>
            <!--<i class="aid aid-arrow-down-drop-outline align-middle"></i>-->
          </a>
          <div slot="popper" style="width:120px;">
            <div class="card card-has-shadowed border-0">
              <!--<div class="card-block d-flex align-items-center bg-gray-darker rounded-top px-4">-->
              <!--<img :src="userInfo.imageUrl" class="rounded-circle" width="56">-->
              <!--<div class="ml-3 text-truncate">-->
              <!--<p class="mb-0 text-truncate text-white text-base">{{ userInfo.realName }}</p>-->
              <!--<small class="text-sm text-truncate text-muted">{{ userInfo.role }}</small>-->
              <!--</div>-->
              <!--</div>-->
              <div class="list__options">
                <router-link to="/account/center">
                  <a href="#" class="list__item">
                    <t-icon icon="user-outline" class="text-muted mr-4 pr-1 text-base"></t-icon>
                    个人中心
                  </a>
                </router-link>
                <router-link to="/account/settings">
                  <a href="#" class="list__item">
                    <t-icon icon="setting-outline" class="text-muted mr-4 pr-1 text-base"></t-icon>
                    个人设置
                  </a>
                </router-link>
                <!--<a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center py-2 px-4 border-0">-->
                <!--<i class="aid aid-view-dashboard text-muted mr-2 pr-1 text-base"></i>-->
                <!--主题定制-->
                <!--</a>-->
                <!--<a href="javascript:void(0)"-->
                <!--class="list-group-item list-group-item-action d-flex align-items-center py-2 px-4 border-0"-->
                <!--@click="onLockItemClick">-->
                <!--<i class="aid aid-lock text-muted mr-2 pr-1 text-base"></i>-->
                <!--锁屏-->
                <!--</a>-->
                <router-link to="/">
                  <a href="javascript:void(0)" class="list__item" @click="onLogoutItemClick">
                    <t-icon icon="logout-outline" class="text-muted mr-4 pr-1 text-base"></t-icon>
                    登出
                  </a>
                </router-link>
              </div>
            </div>
          </div>
        </t-dropdown>
        <t-icon :color="clientConnected?'success':'danger'" icon="lightbulb" size="20" class="mr-5"></t-icon>
        <!-- <t-button :title="$t('portal.switchTo')+`${langAlternativeName}`"
                  :ghost="theme === 'dark' && layoutMode === 'topmenu'"
                  size="sm"
                  style="width:32px; height: 32px"
                  class="text-center p-0"
                  @click="onLangButtonClick">{{ langAlternativeAbbr }}</t-button> -->
      </div>
    </nav>
  </div>
</template>

<script>
import topMenu from '@/modules/menu/topMenu.vue'
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
import notices from '@/modules/tools/notices.vue'
import EventBus from '../../bus'
import {
  LANG_CN,
  LANG_US
} from '@/constants'
export default {
  name: 'GlobalHeader',
  components: {
    notices,
    topMenu
  },
  props: {
    collapsed: Boolean,
    theme: {
      type: String,
      required: false,
      default: 'light'
    },
    menus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searcherOpened: false,
      loading: false,
      searchTimer: null,
      searchText: '',
      userInfo: {
        imageUrl: '/static/images/avastar.jpg',
        realName: 'Poter'
      },
      clientConnected: false
    }
  },
  computed: {
    ...mapGetters(['langAlternativeAbbr', 'langAlternativeName']),
    ...mapState({
      layoutMode: state => state.app.layout,
      fixedHeader: state => state.app.fixedHeader,
      currentTitle: 'currentTitle',
      screenIsLocked: 'screenIsLocked',
      lang: 'lang'
    })
  },
  created() {
    document.body.addEventListener('click', () => {
      if (this.searcherOpened === true) {
        this.searcherOpened = false
      }
    })
    EventBus.$on('connected', (msg) => {
      this.clientConnected = msg
    })
  },
  methods: {
    ...mapMutations(['lockScreen', 'unlockScreen', 'changeLang', 'setTagNavList']),
    ...mapActions('user', {
      doLogout: 'doLogout'
    }),
    onSelectKeyUp() {
      if (this.searchTimer !== null) {
        clearTimeout(this.searchTimer)
        this.searchTimer = null
      }
      this.loading = true
      if (this.searchText === '') {
        this.loading = false
      } else {
        this.searchTimer = setTimeout(() => {
          this.loading = false
        }, 400)
      }
    },
    onSelectBlur() {
    },
    onLockItemClick() {
      this.lockScreen()
    },
    onLogoutItemClick() {
      this.doLogout().then(() => {
        this.$router.push({
          name: 'login'
        })
        // 清除标签导航
        window.localStorage.removeItem('tagNaveList')
      })
    },
    onLangButtonClick() {
      if (this.lang === LANG_CN) {
        this.changeLang(LANG_US)
      } else {
        this.changeLang(LANG_CN)
      }
    },
    onSearchIconClick() {
      this.searcherOpened = !this.searcherOpened
      this.$nextTick(() => { this.$refs.searchInput.focus() })
    },
    switchedSidebarState() {
      this.$emit('update:collapsed', !this.collapsed)
    },
    $_menuSelect(name) {
      this.$emit('menuSelect', name)
    }
  }
}
</script>