<template>
  <div class="navbar" style="padding:0px;display:block">
    <!-- <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />-->

    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
    <!-- <div
      class="nav-logo"
      :style="{ background: 'url(' + bgImg + ') no-repeat' }"
    ></div> -->
    <!-- <div class="nav-logo" :style="{ background: 'url(' + bgImg + ') no-repeat' }"></div> -->
    <div class="nav-title" style="margin-left:10px">{{ title }}</div>

    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <search id="header-search" class="right-menu-item hover-effect" />
        <notification id="header-notification" class="right-menu-item hover-effect" :items="notifications" @markAsRead="markNotificationAsRead" />
        <task id="header-task" class="right-menu-item hover-effect" :items="tasks" @markAsComplete="markTodoAsComplete" />
        <error-log class="errLog-container right-menu-item hover-effect" />

        <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip content="Global Size" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>-->
      </template>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <span style="font-size:12px;">您好! {{ name }}</span>
          <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <!-- <router-link to="/">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <router-link to="/">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>-->
          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>-->
          <el-dropdown-item>
            <span style="display:block;" @click="logout"> <i class="el-icon-refresh-left" />退出登陆 </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span style="display:block;" @click="$router.push({ name: 'Todo' })"> <i class="el-icon-document" />我的待办 </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span style="display:block;" @click="$router.push({ name: 'Notification' })"> <i class="el-icon-bell" />站内通知 </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
const defaultSettings = require('@/settings.js')
import { mapGetters } from 'vuex'
// import Breadcrumb from "@/components/Breadcrumb";
// import Hamburger from "@/components/Hamburger";
import ErrorLog from '@/components/ErrorLog'
// import Screenfull from "@/components/Screenfull";
// import SizeSelect from "@/components/SizeSelect";
import Search from '@/components/HeaderSearch'
import Task from '@/components/HeaderTask'
import Notification from '@/components/HeaderNotification'
import { getToken } from '@/utils/auth'

// import { runInterval } from '@/utils'

import { markAsComplete, getUserLatestToDoList } from '@/api/backbone/todo'
// import { markAsRead } from '@/api/notification'
const signalR = require('@microsoft/signalr')

export default {
  components: {
    // Breadcrumb,
    // Hamburger,
    ErrorLog,
    // Screenfull,
    // SizeSelect,
    Search,
    Task,
    Notification
  },
  data() {
    return {
      // bgImg: require('@/assets/header-logo3.png'),
      connection: null,
      tasks: [],
      title: defaultSettings.title,
      notifications: []
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device', 'name', 'userId'])
  },
  created() {
    this.getUserListEvents()
    // runInterval(this.getUserListEvents, 5000)

    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(process.env.VUE_APP_BASE_API + `/user-hub?Bearer=${getToken()}`, {})
      .withAutomaticReconnect()
      .configureLogging(signalR.LogLevel.Error)
      .build()
    this.connection.on('UpdateTodoItems', () => {
      this.getUserListEvents()
    })
    this.connection.onreconnected(connecitonId => {
      this.getUserListEvents()
    })

    this.connection.start()
  },
  methods: {
    getUserListEvents() {
      var loadTodo = getUserLatestToDoList(this.userId).then(res => {
        this.tasks = res
      })
      return Promise.all([loadTodo])
    },
    markTodoAsComplete(task) {
      markAsComplete(task.id)
    },
    markNotificationAsRead(notification) {
      // markAsRead(notification.id)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      if (process.env.VUE_APP_ONLY_SSO === 'true') {
        await this.$store.dispatch('user/logoutOidc')
      } else {
        var homeUrl = process.env.VUE_APP_HOME_URL
        if (homeUrl) {
          window.location.href = homeUrl
        } else {
          this.$router.push({ path: '/' })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.navbar {
  height: $headerHeight;
  overflow: hidden;
  position: relative;
  // background: #1b437e;
  background: url('../../assets/top_bg.png') no-repeat;
  background-size: 100% 100%;

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin: 0px;
  border-radius: 0px;
  border: none;

  .hamburger-container {
    line-height: $headerHeight;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

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

  .nav-logo {
    float: left;
    height: 100%;
    background-size: 100% 100% !important;
    width: 60px;
    margin-left: 5px;
  }
  // .nav-logo {
  //   float: left;
  //   height: 100%;
  //   width: 310px;
  // }

  .nav-title {
    height: 100%;
    line-height: $headerHeight;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    // margin-left: 20px;
    margin-left: 5px;
    display: inline-block;
  }

  .breadcrumb-container {
    float: left;
    color: #fff;

    ::v-deep .el-breadcrumb__inner a {
      color: #fff;
    }
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: $headerHeight;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

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

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
