<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[
      fixedHeader && 'ant-header-fixedHeader',
      sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
    ]"
    :style="{ padding: '0' }"
  >
    <div class="header" :class="theme">
      <div style="width: 500px" class="d-flex">
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
        <button-menu v-if="isMixMenuMode" :title.sync="menuTitle" :menus="menus" />
      </div>
      <user-menu :theme="theme" />
    </div>
  </a-layout-header>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import ButtonMenu from '@/components/menu/ButtonMenu'
import { mixin } from '@/utils/mixin.js'
import { mapState } from 'vuex'
import defaultSettings from '@/defaultSettings'

export default {
  name: 'GlobalHeader',
  components: {
    ButtonMenu,
    UserMenu,
    SMenu,
    Logo
  },
  mixins: [mixin],
  props: {
    // menus: {
    //   type: Array,
    //   required: true
    // },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    device: {
      type: String,
      required: false,
      default: 'desktop'
    }
  },
  data() {
    return {
      headerBarFixed: false,
      isMixMenuMode: defaultSettings.mixMenuMode,
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        topNavHeader: {},
        headerIndexRight: {},
        topSmenuStyle: {}
      },
      // 系统菜单样式
      isMenuStyle: true,
      resolution: 0,
      menuTitle: '',
      menus: []
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  watch: {
    /** 监听设备变化 */
    device() {
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
    /** 监听导航栏模式变化 */
    mode(newVal) {
      if (newVal === 'topmenu') {
        this.buildTopMenuStyle()
      }
    }
  },
  created() {
    //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
    this.menus = this.permissionMenuList
    if (this.isMixMenuMode) {
      if (this.menus[0].children && this.menus[0].children.length > 0) {
        this.menuTitle = this.menus[0].children[0].meta.title
      } else {
        this.menuTitle = this.menus[0].meta.title
      }
    }
    // 根据后台配置菜单，重新排序加载路由信息
    //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
  },
  //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    if (this.mode === 'topmenu') {
      this.buildTopMenuStyle()
    }
    //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  },
  methods: {
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.headerBarFixed = scrollTop > 100
      } else {
        this.headerBarFixed = false
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    onSelectMenu(title) {},
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    buildTopMenuStyle() {
      if (this.mode === 'topmenu') {
        if (this.device === 'mobile') {
          // 手机端需要清空样式，否则显示会错乱
          this.topMenuStyle.topNavHeader = {}
          this.topMenuStyle.topSmenuStyle = {}
          this.topMenuStyle.headerIndexRight = {}
          this.topMenuStyle.headerIndexLeft = {}
        } else {
          let rightWidth = '360px'
          this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
          this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 165px)' }
          this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
          this.topMenuStyle.headerIndexLeft = { width: `calc(100% - ${rightWidth})` }
        }
      }
    },
    find(list, { title }) {
      for (let key in list) {
        if (list[key].meta.title === title) {
          return key
        }
      }
    }
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  }
}
</script>

<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

@height: 59px;

.layout {
  .top-nav-header-index {
    .header-index-wide {
      margin-left: 10px;

      .ant-menu.ant-menu-horizontal {
        height: @height;
        line-height: @height;
      }
    }

    .trigger {
      //line-height: 64px;
      display: flex;
      align-items: center;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .header {
    z-index: 2;
    color: white;
    height: @height;
    background-color: @primary-color;
    transition: background 300ms;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* dark 样式 */

    &.dark {
      color: #000000;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      background-color: @primary-color;
    }
  }

  .header,
  .top-nav-header-index {
    &.dark .trigger:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.ant-layout-header {
  height: @height;
  line-height: @height;
}

.ant-btn-dashed:hover,
.ant-btn-dashed:focus {
  color: #faad14;
  border-color: #faad14;
}

.active {
  color: #faad14 !important;
  border-color: #faad14 !important;
}

::v-deep .ant-select-selection--single {
  background-color: #1890ff;
  color: #ffffff;
}

/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
</style>
