<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 v-if="mode === 'sidemenu'" class="header" :class="theme">
      <a-icon v-if="device === 'mobile'" class="trigger" :type="collapsed ? 'menu' : 'menu'" @click="toggle"></a-icon>
      <a-icon v-else class="trigger" :type="collapsed ? 'menu' : 'menu'" @click="toggle" />

      <!--      <span v-if="device === 'desktop'">欢迎进入平台</span>-->
      <!-- <span v-else>Jeecg-Boot</span> -->
      <div class="top_menu" v-if="tenantList.length != 0">
        <a-menu mode="horizontal" @select="onSelect" :default-selected-keys="defTanent">
          <a-menu-item :key="item.id" v-for="(item) in tenantList"><a-icon :type="item.icon" />{{ item.name
          }}</a-menu-item>
          <!-- <a-menu-item :key="item2.id" v-for="(item2, index2) in tenantList2">{{ item2.name }}</a-menu-item> -->
        </a-menu>
      </div>

      <user-menu :theme="theme" />
    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <logo class="top-nav-header" :show-title="device !== 'mobile'" :title="title"
            :style="topMenuStyle.topNavHeader" />
          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
            <s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
          </div>
          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"></a-icon>
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/indexSec'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
import Logo from '../tools/Logo'
import { mixin } from '@/utils/mixin.js'
export default {
  name: 'GlobalHeader',
  components: {
    UserMenu,
    SMenu,
    Logo,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: 'sidemenu',
    },
    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,
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        topNavHeader: {},
        headerIndexRight: {},
        topSmenuStyle: {},
      },
      chatStatus: '',
      title: '',
      //默认租户
      defTanent: [],
      //顶部租户当前选择项
      current: [],
      //租户列表
      tenantList: [],
      //当前租户下的菜单列表
      oneMenu: [],
      inde: 1,
      tenantList2: [
        {
          name: '网站监管',
          id: '202304051122',
          icon: 'pie-chart',
          type: '2',
          url: 'https://www.baidu.com/'
        },
      ],
    }
  },
  watch: {
    /** 监听设备变化 */
    device () {
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
    /** 监听导航栏模式变化 */
    mode (newVal) {
      if (newVal === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
  },
  //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  mounted () {
    this.getTanent()
    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
        if (scrollTop > 100) {
          this.headerBarFixed = true
        } else {
          this.headerBarFixed = false
        }
      } else {
        this.headerBarFixed = false
      }
    },
    toggle () {
      this.$emit('toggle')
    },
    //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})` }
        }
      }
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    getTanent () {
      // getAction('/sys/tenant/authList')
      getAction('/sys/tenant/list')
        .then((res) => {
          let { result } = res
          // this.tenantList = [...result.records, ...this.tenantList2]
          this.tenantList = result.records
          console.log(this.tenantList);
          // console.log(this.tenantList);
          this.$nextTick(() => {
            this.defTanent.push(this.tenantList[0].id)
          })
        })
        .finally(() => { })
    },
    //获取当前租户菜单列表
    onSelect (obj) {
      // console.log(obj);
      let cunrnt = this.tenantList.filter(item => item.id == obj.key)
      if (cunrnt[0].type == '1') {
        let param = {
          tenantId: obj.key,
        }
        getAction('/sys/permission/getUserPermissionByToken', param).then((res) => {
          let { result } = res
          // console.log(res);
          this.$emit('secMenu', result.menu)
        })
      } else {
        window.open(cunrnt[0].url)
      }

    },
  },
}
</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;
      font-size: 17px;

      &: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: white !important;
    }
  }

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

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

.top_menu {
  width: 80%;

  .ant-menu-horizontal {
    height: 59px;
    line-height: 57px;
    background: #fff;
    color: #3d3d3d;
  }

  ::v-deep .ant-menu-item {
    color: #3d3d3d;

    a {
      color: #3d3d3d;
    }


  }

  .ant-menu {
    font-size: 16px;
  }

  ::v-deep .ant-menu-horizontal>.ant-menu-item-selected {}

  ::v-deep .ant-menu-submenu-selected {}

  ::v-deep .ant-menu-item:hover>a {}

  ::v-deep .ant-menu-submenu-title span {
    //
    font-size: 31px;
    display: block;
  }

  ::v-deep .ant-menu-submenu-title:hover {}

  ::v-deep .ant-menu-submenu:hover {

    border-bottom: none;
  }

  ::v-deep .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
  .ant-menu-submenu-active {

    border-bottom: none;
  }

  ::v-deep .ant-menu-horizontal>.ant-menu-submenu-selected {
    border-bottom: none;
  }

  // ::v-deep .ant-menu-item:hover {
  //   color: #fff !important;
  //   
  // }
  // ::v-deep .ant-menu-item:active {
  //   
  //   color: #fff !important;
  // }
  // ::v-deep .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  //   
  //   color: #fff !important;
  // }
}

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