<template>
  <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
    <div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
      <img src="../../assets/img/cnbm.png" alt="" />
      <span>
        {{ 'title' | i18nFilter }}
      </span>
    </div>

    <div v-if="showhome" style="display:flex; align-items: center;">
      <hamburger
        id="hamburger-container"
        :is-active="sidebar.opened"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
      />

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

    <div class="right-menu">
      <div class="right-menu-back" @click="toHome">
        <svg-icon
          class="item-icon"
          :icon-class="showTitle ? 'home' : 'homeb'"
          style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
        />
        <span v-if="showhome">
          {{ 'navbar.homepage' | i18nFilter }}
        </span>
      </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=" margin: 0 10px;  "
          @click.native="handleAlarm"
        >
          <svg-icon
            style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-4px * var(--beilv))"
            class="item-icon"
            :icon-class="showTitle ? 'alarm' : '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: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
          :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: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
            icon-class="download"
          />
        </a>
      </div>
      <div class="right-menu-back">
        <a href="google.exe">
          <svg-icon
            :style="showTitle ? 'color: #fff' : ''"
            style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
            :icon-class="showTitle ? 'chrome' : 'chromeb'"
          />
        </a>
      </div>
      <!-- <div class="right-menu-back" style="color: #fff" @click="$router.push({name: 'VisualCreate'})">
        可视化配置
      </div> -->
      <!-- <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
        <svg-icon class="item-icon" icon-class="ntp" />
        {{ showDay }}
        {{ showTime }}
      </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">{{ username }}</div>
          <div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
          <!-- <i class="el-icon-caret-bottom" /> -->
        </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="toHome">
            <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 class="right-menu-back">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">
            {{ 'navbar.copyright' | i18nFilter }}<br>
            {{ 'navbar.versionNum' | i18nFilter }}：v3.0
          </div>
          <el-button type="text">
            <svg-icon icon-class="black-info" />
          </el-button>
        </el-tooltip>
      </div> -->
      <!-- <div class="right-menu-back" @click="toHome">
        <svg-icon class="item-icon" icon-class="help" />
        {{ 'navbar.help' | i18nFilter }}
      </div>

      <div class="right-menu-back" @click="logout">
        <svg-icon class="item-icon" icon-class="logout" />
        {{ 'navbar.logOut' | i18nFilter }}
      </div> -->
      <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 { getAlarmNum, getEqAlarmNum, getMESAlarmNum } from '@/api/team-manage/team'
// import { downLoadTime } from '@/api/user'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import moment from 'moment'
import Cookie from 'js-cookie'

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: {
    goToRootPage() {
      // 11月演示，去到入口首页
      const username = Cookie.get('account')
      const password = Cookie.get('password')

      if (username && password) {
        window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
      }
    },
    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)
    },
    async toHome() {
      if (this.showhome) {
        this.$store.dispatch('app/setChoicepart')
        this.$router.push('/')
      } else {
        this.goToRootPage()
      }
    },
    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>
.navbar {
  height: calc(48px * var(--beilv));
  // height: calc(100vh / 1600 * 80);
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  // padding-right: calc(100vw / 2560 * 32);
  padding-right: calc(24px * var(--beilv));

  display: flex;
  justify-content: space-between;
  align-items: center;

  .homeNavIcon {
    cursor: pointer;
    color: #fff;
    line-height: 1;
    font-weight: 500;
    display: flex;
    align-items: center;
    // font-size: calc(100vw / 2560 * 28);
    // letter-spacing: calc(100vw / 2560 * 2);
    // padding-left: calc(100vw / 2560 * 32);
    font-size: calc(24px * var(--beilv));
    letter-spacing: calc(1px * var(--beilv));
    padding-left: calc(24px * var(--beilv));

    img {
      width: calc(24px * var(--beilv));
      height: calc(24px * var(--beilv));
      margin-right: calc(12px * var(--beilv));
      // width: calc(100vw / 2560 * 32);
      // height: calc(100vw / 2560 * 32);
      // margin-right: calc(100vw / 2560 * 16);
      // width: 26px;
      // height: 26px;
      // marginright: 14px;
    }
  }

  .hamburger-container {
    // line-height: calc(48px * var(--beilv));
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

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

  .breadcrumb-container {
    float: left;
  }

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

  .right-menu {
    float: right;
    height: 100%;
    line-height: calc(48px * var(--beilv));
    position: relative;
    &:focus {
      outline: none;
    }

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

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

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

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