<template>
  <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
    <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <div v-if="showTitle" style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px; cursor: pointer;" @click="toHome">
      <img src="../../assets/img/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt="">
      {{ 'title' | i18nFilter }}
    </div>

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">

      <!-- <div v-if="showhome" class="right-menu-back" @click="toHome">
        <svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
        {{ 'navbar.homepage' | i18nFilter }}
      </div> -->
      <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back" @click="toHome">
        <svg-icon class="item-icon" :icon-class="showTitle ? 'homew' : 'homeb'" style="height: 24px; width: 24px; vertical-align: -8px; margin-right: 2px;" /></div>
      <!-- <svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" /></div> -->
      <el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
        <el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
          <!-- <svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" /> -->
          <svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarmw' : 'alarmb'" />
        </el-badge>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>暂无数据</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
        <svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'countdown' : 'countdown2'" />
        {{ formatTime }}
      </div>
      <template>
        <lang-select :style="showTitle ? 'color: #fff' : ''" class="right-menu-item hover-effect" :is-show="showTitle" />
      </template>
      <div class="right-menu-back">
        <a href="Lodap.zip"><svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="download" /></a>
      </div>
      <div class="right-menu-back">
        <a href="google.exe">
          <svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'chromew' : 'chromeb'" />
          <!-- <svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="chrome" /> -->
        </a>
      </div>
      <el-dropdown :style="showTitle ? 'color: #fff' : 'color: #000'" class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="require('@/assets/img/head.png')" class="user-avatar">
          <div class="avatar-username" :title="username">管理员</div>
          <div class="avatar-roles" :title="roles.join(',')">超级管理员</div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>
              <svg-icon class="item-icon" icon-class="user" />
              {{ 'navbar.profile' | i18nFilter }}
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="toMain">
            <svg-icon class="item-icon" icon-class="help" />
            {{ 'navbar.help' | i18nFilter }}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout">
            <svg-icon class="item-icon" icon-class="logout" />
            {{ 'navbar.logOut' | i18nFilter }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div :style="showTitle ? 'borderColor: #fff' : 'borderColor: #979797'" class="right-menu-back verticalBar" />
      <div :style="showTitle ? 'color: #fff' : 'color: red'" class="right-menu-back">
        <el-tooltip class="item" effect="dark" placement="bottom-end">
          <div slot="content">{{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }} <br>{{ 'copyright.version' | i18nFilter }}：3.0</div>
          <svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'introduce' : 'introduce2'" />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import moment from 'moment'

let logoutInterval = null
const timeInterval = null

export default {
  components: {
    Breadcrumb,
    Hamburger,
    LangSelect
  },
  props: {
    showhome: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    showTitle: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      logoutTime: 1800000,
      alarmNum: 0,
      eqAlarmNum: 0,
      MESAlarmNum: 0,
      blurTime: null,
      time: 30,
      showTime: '',
      showDay: '',
      m: '',
      s: '',
      h: ''
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'username',
      'choicepart',
      'roles'
    ]),
    formatTime() {
      return moment(this.logoutTime - 28800000).format('HH:mm:ss')
    }
  },
  watch: {
    logoutTime: function(val) {
      if (val <= 0) {
        this.logout()
      }
    },
    $route: function() {
      this.getAlarm()
    }
  },
  created() {
    // this.getTime()
  },
  mounted() {
    this.getAlarm()
    logoutInterval = setInterval(() => {
      this.logoutTime -= 1000
    }, 1000)
    addEventListener('click', this.logoutTimeReset)
    addEventListener('keydown', this.logoutTimeReset)
    addEventListener('visibilitychange', this.visibilitychangeListener)
  },
  destroyed() {
    clearInterval(logoutInterval)
    clearInterval(timeInterval)
    removeEventListener('click', this.logoutTimeReset)
    removeEventListener('keydown', this.logoutTimeReset)
    removeEventListener('visibilitychange', this.visibilitychangeListener)
  },
  methods: {
    winBlur() {
      this.blurTime = new Date()
      clearInterval(logoutInterval)
    },
    // 浏览器获取焦点
    winFocus() {
      if (this.logoutTime - (new Date() - this.blurTime).valueOf() <= 0) {
        this.logout()
      } else {
        this.logoutTime -= (new Date() - this.blurTime).valueOf()
        logoutInterval = setInterval(() => {
          this.logoutTime -= 1000
        }, 1000)
      }
    },
    // 重置退出时间
    logoutTimeReset() {
      this.logoutTime = this.time * 60000
    },
    visibilitychangeListener() {
      if (document.hidden) {
        this.winBlur()
      } else {
        this.winFocus()
      }
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      console.log("sessionStorage.getItem('loginspc')", sessionStorage.getItem('loginspc'))
      if (sessionStorage.getItem('loginspc') === 'login') {
        const spcUrl = `/spc/upms/userinfo/logoutUser?account=${'ZJCadmin'}`
        axios.get(spcUrl).then(res => {
          if (res.data.code !== 'OK') {
            this.$message.error(this.$t('module.quality.spc.error'))
          }
          sessionStorage.setItem('loginspc', 'logout')
        })
      }
      await this.$store.dispatch('user/logout')
      console.log('`/login?redirect=${this.$route.fullPath}`', `/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      clearInterval(logoutInterval)
    },
    toMain() {
      this.$store.dispatch('app/setChoicepart')
      this.$router.push('/')
    },
    async toHome() {
      // this.$store.dispatch('app/setChoicepart')
      // this.$router.push('/')
      if (sessionStorage.getItem('param')) {
        const param = JSON.parse(window.atob(sessionStorage.getItem('param')))
        window.location = 'http://main.cnbmai.picaiba.com?' + param
      }
    },
    handleAlarm() {},
    getAlarm() {
      // getAlarmNum().then(response => {
      //   if (response.data) {
      //     this.alarmNum = response.data.alarmNum
      //   } else {
      //     this.alarmNum = 0
      //   }
      // })
      // getEqAlarmNum().then(response => {
      //   if (response.data) {
      //     this.eqAlarmNum = response.data.alarmNum
      //   } else {
      //     this.eqAlarmNum = 0
      //   }
      // })
      // getMESAlarmNum().then(response => {
      //   if (response.data) {
      //     this.MESAlarmNum = response.data.alarmNum
      //   } else {
      //     this.MESAlarmNum = 0
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.time-menu {
  display: inline-block;
}
.navbar {
  height: 48px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 48px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

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

  .right-menu {
    float: right;
    height: 100%;
    line-height: 48px;
    position: relative;
    &:focus {
      outline: none;
    }

    .right-menu-back{
      display: inline-block;
      vertical-align: text-bottom;
      font-size: 14px;
      padding: 0 8px;
      text-align: center;
      cursor: pointer;
    }

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

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

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
    .verticalBar {
      height: 32px;
      width: 0;
      opacity: 0.49;
      padding: 0;
      border-right: 1px solid #fff;
      position: relative;
      top: -8px;
    }
    .avatar-container {
      .avatar-wrapper {
        padding-top: 9px;
        position: relative;
        width: 140px;
        height: 48px;
        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border-radius: 16px;
        }
        .avatar-username {
          width: 80px;
          text-align: center;
          position: absolute;
          font-size: 14px;
          right: 13px;
          top: 3px;
          line-height: 25px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .avatar-roles{
          width: 80px;
          text-align: center;
          position: absolute;
          font-size: 14px;
          top: 20px;
          right: 13px;
          line-height: 25px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          opacity: 0.64;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
.dropdown-badge {
  background: #ff4949;
  color: #fff;
  line-height: 16px;
  border-radius: 8px;
  padding: 0 8px;
  float: right;
  margin-left: 5px;
  position: relative;
  top: 7px;
}
.navbar-alarmbox {
  text-align: center;
  cursor: pointer;
}
</style>
