<template>
  <el-header :class="{border: navMode !== 'topSideMenu-UD'}">
    <div
      :class="[
        'header-container',
        {topmenu: navMode == 'topMenu' || navMode == 'topSideMenu-UD'}
      ]"
    >
      <div class="header-left">
        <!-- 系统标题和logo -->
        <template v-if="navMode == 'topMenu' || navMode == 'topSideMenu-UD'">
          <img class="logo" :src="logoUrl" @click="toBigScreenIndex" />
          <span
            :class="[
              'title',
              {
                topmenu: navMode == 'topMenu' || navMode == 'topSideMenu-UD'
              }
            ]"
            >{{ companyName }}</span
          >
        </template>
        <!-- 侧边栏收折按钮 -->
        <!-- <i
          v-if="navMode !== 'topMenu'"
          :class="[
            {'dark-icon': navMode !== 'topSideMenu-UD'},
            {'light-icon': navMode == 'topSideMenu-UD'},
            {'el-icon-s-fold': menuShow},
            {'el-icon-s-unfold': !menuShow}
          ]"
          @click="handleMenuCollapse"
        ></i> -->
        <div class="logo_title">
          <!-- <img class="logo" :src="logoUrl" /> -->
          <span :class="['title', {'title-hidden': !menuShow}]"
            >智采平台</span
          >
        </div>
      </div>
      <!-- 顶部导航 -->
      <div class="first-menus" v-if="navMode == 'topMenu' && bizMenu.length">
        <topMenu></topMenu>
      </div>
      <!-- 顶部导航 -->
      <!-- 顶部侧边导航 -->
      <div
        class="first-menus"
        v-if="
          (navMode == 'topSideMenu-LR' || navMode == 'topSideMenu-UD') &&
            bizMenu.length
        "
      >
        <scroll-view>
          <div class="nav-container">
            <div
              :class="
                `first-menus-item ${
                  activeMenu == item.alias ? 'active-menu' : ''
                } ${navMode == 'topSideMenu-UD' ? 'light' : 'dark'}`
              "
              v-for="item in bizMenu"
              :key="item.alias"
              @click="handleClickMenu(item)"
            >
              <svgIcon
                icon-style="icon header-icon"
                :icon-class="item.menuIcon ? item.menuIcon : ''"
              />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </scroll-view>
      </div>
      <!-- 顶部导航-->
      <div
        :class="[
          'header-right',
          {
            topmenu: navMode == 'topMenu' || navMode == 'topSideMenu-UD'
          }
        ]"
      >
        <!-- <i
          v-if="hasAuthToBigScreen"
          class="el-icon-data-line"
          @click="toBigScreenIndex"
          title="返回大屏"
        ></i> -->
        <HtAvatar class="avatar" :user="currentUser" />
        <!-- <langSelect /> 语言切换 -->
        <el-popover
          popper-class="header-popper"
          width="100"
          placement="bottom"
          trigger="hover"
        >
          <!-- 用户名 -->
          <div slot="reference" class="user-name">
            {{
              $store.state.login.currentUser &&
                $store.state.login.currentUser.username
            }}
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="user-box-header">
            <h3 v-if="$store.state.login.currentUser" style="margin: 5px 0">
              {{
                $store.state.login.currentUser &&
                  $store.state.login.currentUser.username
              }}
            </h3>
          </div>
          <ul class="user-link-ul">
            <!-- 个人中心 -->
            <li @click="openPersonalCenter">
              <i class="el-icon-user"></i>
              <span>{{ $t('navigator.personalCenter') }}</span>
            </li>
            <!-- 密码重置 -->
            <li @click="openResetPwdDialog">
              <i class="el-icon-setting"></i>
              <span>{{ $t('navigator.changePsd') }}</span>
            </li>
            <!-- mvue管理系统 -->
            <li v-if="userType !== 2" @click="handleSysPlat">
              <i class="el-icon-monitor" />
              <span>{{ $t('navigator.manageSys') }}</span>
            </li>
            <!-- 退出登录 -->
            <li @click="logout">
              <i class="el-icon-circle-close" />
              <span>{{ $t('navigator.signOut') }}</span>
            </li>
          </ul>
        </el-popover>
      </div>
    </div>
  </el-header>
</template>

<script>
import topMenu from './TopMenu.vue'
import HtAvatar from '@/components/common/HtAvatar.vue'
import langSelect from '@/components/langSelect'
import {mapState} from 'vuex'
import ScrollView from './ScrollView.vue'
export default {
  name: 'navigator',
  components: {topMenu, HtAvatar, langSelect, ScrollView},
  props: ['menuShow', 'navMode', 'aliasPath', 'bizMenuIndex', 'bizMenuAlias'],
  data() {
    return {
      hasAuthToBigScreen: null, //是否有大屏菜单
      companyName: '', //系统名称
      logoUrl: '', //logo地址
      bizMenu: [], // 工作台菜单
      bigScreen: [] //大屏菜单
    }
  },
  created() {
    if (this.navMode == 'topMenu' || this.navMode == 'topSideMenu-UD')
      this.getSysInfo()
  },
  mounted() {
    this.$store.dispatch('user/loadCurrentUserDetail')
    this.filterBizMenu(this.frontMenus)
    this.checkBigScreenAuth()
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.currentUserDetail,
      token: state => state.login.currentUser.token,
      frontMenus: state => {
        return state.menu.frontMenus
      },
      sysMenus: state => state.menu.sysMenus,
      userType: function() {
        if (this.currentUser && this.currentUser.user) {
          return this.currentUser.user.userType
        }
      }
    }),
    activeMenu: {
      get: function() {
        return this.aliasPath[this.bizMenuIndex]
      },
      set: function(value) {
        return value
      }
    }
  },
  methods: {
    // 菜单的收折
    handleMenuCollapse() {
      this.$emit('update:menuShow', !this.menuShow)
    },
    // 获取系统信息
    getSysInfo() {
      let url = '${uc}/uc/tenantManage/v1/getTenantByCode?code=platform'
      this.$http.get(url).then(resp => {
        if (resp.data) {
          let tenantManage = resp.data
          this.companyName = tenantManage.nameFront
          if (tenantManage.frontLogo) {
            let frontLogo = JSON.parse(tenantManage.frontLogo)
            if (frontLogo && frontLogo.length > 0) {
              this.$http
                .get(
                  window.context.portal +
                    '/file/onlinePreviewController/v1/getFileById_' +
                    frontLogo[0].id,
                  'arraybuffer'
                )
                .then(response => {
                  let type = response.headers['content-type']
                  if (type) {
                    this.logoUrl = window.URL.createObjectURL(
                      new Blob([response.data], {
                        type: type
                      })
                    )
                  } else {
                    this.logoUrl = window.URL.createObjectURL(
                      new Blob([response.data])
                    )
                  }
                })
            }
          }
        }
      })
    },
    openResetPwdDialog() {
      this.$router.push({
        path: '/platLayout/resetPwdView',
        query: {type: 'settings'}
      })
    },
    openPersonalCenter() {
      this.$router.push({
        path: '/platLayout/PersonalInfo'
      })
    },
    handleSysPlat() {
      // let url = window.context.manage + '/getAuth?token=' + this.token
      // window.open(url, '_blank')
      if (!this.sysMenus.length) {
                this.$store.dispatch('menu/actionSysMenus').then((res) => {
                    if (res) {
                        window.open(
                            window.context.manage +
                                // "http://localhost:8081/mvue"+
                                '/sysplat/' +
                                `${this.sysMenus[0].children[0].alias}` +
                                '?token=' +
                                this.token,
                            '_blank'
                        )
                    }
                })
            } else {
                window.open(
                    window.context.manage +
                        // "http://localhost:8081/mvue"+
                        '/sysplat/' +
                        `${this.sysMenus[0].children[0].alias}` +
                        '?token=' +
                        this.token,
                    '_blank'
                )
            }
    },
    logout() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', [])
      let loginRouthPath =
        localStorage.getItem(
          this.$store.state.login.currentUser.account + 'loginRoutePath'
        ) || '/login'
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            this.$router.push({
              path: loginRouthPath
            })
            break
        }
      })
    },
    // 是否有大屏菜单
    checkBigScreenAuth() {
      this.bigScreen = this.frontMenus.filter(
        item => item.alias === 'bigScreen'
      )
      this.hasAuthToBigScreen = this.bigScreen.length ? true : false
    },
    // 跳转回到大屏
    toBigScreenIndex() {
      if (!this.hasAuthToBigScreen) return
      let alise = this.bigScreen[0].children[0].alias
      console.log(alise)
      this.$router.push({
        path: `/${alise}`
      })
    },
    // 过滤出业务菜单
    filterBizMenu(menus) {
      menus.forEach(item => {
        if (item.alias === this.bizMenuAlias) {
          this.bizMenu = item.children
        } else if (item.children && item.children.length) {
          this.filterBizMenu(item.children)
        }
      })
    },
    handleClickMenu(item) {
      console.log(item)
      let hasSideMenu = item.children.length ? true : false
      this.$emit('update:menuShow', hasSideMenu)
      this.activeMenu = item.alias
      if (hasSideMenu) {
        let childrens = item.children
        let subPath = childrens[0].alias
        if (childrens[0].children && childrens[0].children.length !== 0) {
          let threeChildrens = childrens[0].children
          let threePath = threeChildrens[0].alias
          this.$router.push('/platLayout/' + threePath)
        } else {
          this.$router.push('/platLayout/' + subPath)
        }
      } else {
        this.$router.push('/platLayout/' + item.alias)
        this.activeMenu = item.alias
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-header {
  padding: 0;
  height: $--nav-height !important;
  box-sizing: border-box;
}
.el-header.border {
  border-bottom: 1px solid #dcdfe6 !important;
}

.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //   background-color: $--navigator-main-color;
  background-color: #0063b0;
  z-index: 999;
}
.header-container.topmenu {
  background-color: $--menu-bg;
}

.header-left {
  margin-left: 10px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  .logo_title {
    height: 70px;
    line-height: 70px;
    width: 100%;
    color: #fff;
    text-align: center;
    overflow: hidden;
    .logo {
      width: 50px;
      vertical-align: middle;
      margin-right: 6px;
    }
    .title {
      font-size: 24px;
      font-weight: bold;
      opacity: 1;
      transition: opacity 0.5s linear;
    }
    .title.title-hidden {
      opacity: 0;
    }
  }
  .logo {
    width: 50px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
  }
  .title {
    height: $--nav-height;
    font-size: 24px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    line-height: $--nav-height;
    margin-right: 20px;
  }
  .title.topmenu {
    color: #fff;
  }
  .dark-icon {
    color: $--navigator-main-text-color;
  }
  .light-icon {
    color: #fff;
  }
  .el-icon-s-fold,
  .el-icon-s-unfold {
    font-size: 20px;

    cursor: pointer;
  }

  .el-icon-s-fold:hover,
  .el-icon-s-unfold:hover {
    color: $--color-primary;
  }
}

.first-menus {
  width: 78%;
  display: flex;
  .nav-container {
    width: 100%;
    display: flex;
  }
  .first-menus-item {
    margin: 0 10px;
    padding: 8px 20px 12px;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    .header-icon {
      font-size: $--navigator-text-size;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      font-size: $--navigator-text-size;
    }
  }
  .first-menus-item.active-menu span {
    font-size: $--navigator-text-size;
  }

  .first-menus-item.light {
    color: $--navigator-menu-text;
  }
  .first-menus-item.light.active-menu,
  .first-menus-item.light:hover {
    color: $--navigator-main-color;
  }

  .first-menus-item.dark {
    color: $--navigator-menu-text;
  }
  .first-menus-item.dark.active-menu,
  .first-menus-item.dark:hover {
    color: $--navigator-menu-text-active;
  }
}

.header-right {
  margin-right: 10px;
  display: flex;
  align-items: center;
  .el-icon-data-line {
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
    color: $--navigator-main-text-color;
  }
  .el-icon-data-line:hover {
    color: $--color-primary;
  }
  .user-name {
    color: #fff;
    // color: #000;
    margin: 0 10px;
  }
}
.header-right.topmenu {
  .el-icon-data-line {
    color: #fff;
  }
  .el-icon-data-line:hover {
    color: $--color-primary;
  }
  .user-name {
    color: #fff;
  }
}

.el-avatar i {
  font-size: 16px;
  color: #c0c4cc;
}

.user-box-header {
  padding: 10px;
  h3 {
    color: $--navigator-text-color;
    font-weight: bold;
  }
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  > li {
    padding: 8px 10px;
    cursor: pointer;
    span {
      vertical-align: middle;
      color: $--navigator-text-color;
    }
  }
  > li > i {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
  }
  > li:hover {
    background-color: rgba($--theme-color, 0.2);
    span,
    i {
      color: $--theme-color;
    }
  }
  .el-link {
    color: #606266 !important;
    i {
      font-size: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
</style>

<style lang="scss">
.header-popper {
  border-radius: 10px;
  overflow: hidden;
  padding: 10px !important;
  vertical-align: middle;
  right: 10px !important;
  left: initial !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.2);
}
</style>
