<template>
  <el-header :height="'64px'" class="header-page" style="-webkit-app-region: drag">
    <!-- 标志 -->
    <div class="logo-box">
      <!-- <img class="logo-img" src="../assets/images/jvchat.png" alt /> -->
      <span class="logo-title can-not-select">企聊客服系统</span>
    </div>
    <!-- 导航 -->
    <ul class="nav-ul">
      <li
        class="nav-li"
        style="-webkit-app-region: no-drag"
        :class="{ 'active-nav': $route.path === nav.navPath }"
        v-for="(nav, index) in navs"
        :key="index"
        @click="showPath(nav)"
      >
        <i :class="nav.navIcon" aria-hidden="true"></i>
        <span class="nav-name can-not-select" v-text="nav.navName"></span>
      </li>
    </ul>
    <!-- 下拉菜单 -->
    <el-dropdown class="my-el-dropdown" @command="handleCommand" style="-webkit-app-region: no-drag">
      <div class="el-dropdown-link">
        <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
        <span class="nick-name can-not-select" v-text="this.$store.getters.currentUser.NickName"></span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item disabled>
          <i class="fa fa-plus-square" aria-hidden="true"></i>
          其他
        </el-dropdown-item>
        <el-dropdown-item disabled>
          <i class="fa fa-question-circle" aria-hidden="true"></i>
          帮助
        </el-dropdown-item>
        <el-dropdown-item command="logout">
          <i class="fa fa-sign-out" aria-hidden="true"></i>
          退出
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--electron 最大|最小|关闭 -->
    <div style="-webkit-app-region: no-drag" class="menu" v-if="$store.getters.currentMode === 'electron'">
      <div class="icon-smaller" @click="minimizeWindow()">
        <hr class="smaller" />
      </div>
      <div class="icon-bigger" @click="maximizeWindow()">
        <div class="bigger"></div>
      </div>
      <div class="icon-close" @click="hiddenWindow()">
        <div class="close"></div>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: 'HeaderPage',
  data() {
    return {
      navs: [
        {
          navName: '聚合聊天',
          navIcon: 'fa fa-h-square fa-lg',
          navPath: '/conversation'
        },
        {
          navName: '朋友圈',
          navIcon: 'fa fa-chrome fa-lg',
          navPath: '/friend-circle'
        },
        {
          navName: '群发',
          navIcon: 'fa fa-paper-plane-o fa-lg',
          navPath: '/group-assistant'
        },
        {
          navName: '加好友',
          navIcon: 'fa fa-user-plus fa-lg',
          navPath: '/add-friend'
        },
        {
          navName: '功能大全',
          navIcon: 'fa fa-th-large fa-lg',
          navPath: '/tools'
        }
      ]
    }
  },
  methods: {
    // 路由跳转
    showPath(nav) {
      if (this.$route.path === nav.navPath) return
      // 新的页面展示
      this.$router.push({ path: nav.navPath })
    },
    // 处理下拉菜单
    handleCommand(command) {
      switch (command) {
        case 'logout':
          // 退出之前需要二次确认
          this.$confirm('你将退出登陆 ?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 确认退出后，向服务端通知
              this.$store.dispatch('websocket/AccountLogoutNotice')
              // 清除token
              this.$store.commit('SET_WEBSOCKET_TOKEN', '')
              // 刷新页面
              window.location.reload()
            })
            .catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消退出登陆'
              // });
            })
          break
        default:
          this.$message('click on item ' + command)
          break
      }
    },
    // 最小化
    minimizeWindow() {
      this.$ipcRenderer.send('operations', 'min')
    },
    // 最大化
    maximizeWindow() {
      this.$ipcRenderer.send('operations', 'max')
    },
    // 自定义窗口操作
    hiddenWindow() {
      this.$ipcRenderer.send('operations', 'hidden')
    }
  }
}
</script>

<style lang="scss" scoped>
.header-page {
  display: flex;
  align-items: center;
  background-color: $bg-color-nav-title-1;

  .logo-box {
    display: flex;
    align-items: center;
    .logo-img {
      width: 40px;
    }
    .logo-title {
      color: #fff;
      font-size: 28px;
      // margin-left: 10px;
      margin-right: 20px;
    }
  }

  .nav-ul {
    color: rgba($color: #fff, $alpha: 0.6);
    display: flex;
    flex: 1 1 auto;
    .nav-li {
      padding: 5px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .fa {
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
      }
      .nav-name {
        font-size: 16px;
        margin-top: 2px;
      }
      &:hover {
        cursor: pointer;
        color: #fff;
      }
    }
    .active-nav {
      color: #fff;
    }
  }

  .my-el-dropdown {
    // margin-right: 20px;
    .el-dropdown-link {
      display: flex;
      align-items: center;
      color: white;
      text-align: center;
      .nick-name {
        font-size: 16px;
        margin: 0 5px;
      }
    }
  }

  .menu {
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    justify-content: space-between;
    .icon-smaller,
    .icon-bigger {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .bigger {
        width: 10px;
        height: 10px;
        border: solid white 1px;
      }
      .smaller {
        width: 10px;
        border: solid white 1px;
      }
      &:hover {
        background: #c3c3c3;
      }
    }
    .icon-close {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .close {
        position: relative;
        width: 2px;
        height: 15px;
        background: #fff;
        transform: rotate(45deg);
        display: inline-block;
      }
      .close:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
      &:hover {
        background: red;
      }
    }
  }
}
</style>
