<template>
  <div
    class="navbar"
  >
    <hamburger
      class="hamburger-container"
      :toggle-click="toggleSideBar"
      :is-active="sidebar.opened"
    />

    <breadcrumb class="breadcrumb-container" />

    <ul class="right-menu">
      <li style="padding-right:10px; background:rgb(55, 145, 67);color:#fff;padding:3px 5px; border:0">
        欢迎，{{ $store.state.user.name }}
      </li>
      <li v-if="scenicName==='仙门山'">
        <a @click="openLink">老系统</a>
      </li>
      <li>
        <router-link to="/index/dashboard">
          首页
        </router-link>
      </li>
      <!-- <li><a>通知</a></li> -->
      <!-- <li><a>帮助中心</a></li> -->
      <li>
        <a @click="handleFull">
          全屏
        </a>
      </li>
      <li>
        <a @click="$refs.password.show()">
          修改密码
        </a>
      </li>
      <li>
        <a @click="logout">
          退出登录
        </a>
      </li>
      <li>
        <a @click="$refs.release.render()">
          更新日志
        </a>
      </li>
      <!-- <error-log class="errLog-container right-menu-item"/> -->
      <!-- <lang-select class="international right-menu-item"/> -->
      <!-- <el-tooltip
        effect="dark"
        content="帮助"
        placement="bottom"
      >
        <svg-icon icon-class="help" />
      </el-tooltip>

      <el-tooltip
        effect="dark"
        content="全屏"
        placement="bottom"
      >
        <screenfull class="screenfull right-menu-item" />
      </el-tooltip>

      <el-tooltip
        effect="dark"
        content="消息"
        placement="bottom"
      >
        <svg-icon icon-class="message" />
      </el-tooltip>

      <el-dropdown
        class="avatar-container right-menu-item"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <svg-icon icon-class="user" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/index/dashboard">
            <el-dropdown-item>
              {{ '首页' }}
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
            <span
              @click="logout"
              style="display:block;"
            >
              {{ '退出' }}
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </ul>

    <div
      class="appVersion"
      @click="goDemo">
      <span
        v-if="terminalNO"
        style="margin-right:10px">
        pos 终端号：{{ terminalNO }}
      </span>
      <span>
        当前版本：{{ version }}
      </span>
      <span v-if="appStatus.status===0">
        【正在下载更新 {{ appStatus.process }}%】
      </span>
      <span v-if="appStatus.status===2">
        <a @click="updateNow">
          【有新版本，立即更新】
        </a>
      </span>
    </div>
    <!-- <div
      class="termId"
      >
      pos 终端号：{{ $localStore.get('termId') }}
    </div> -->
    <Password ref="password"></Password>

    <Release ref="release"></Release>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
import screenfull from 'screenfull'
import Breadcrumb from '@/components/Breadcrumb'
import Password from '@/components/Layout/components/Password'
import Release from '@/Release'
// import ErrorLog from '@/components/ErrorLog'
// import Screenfull from '@/components/Screenfull'
// import LangSelect from '@/components/LangSelect'
// import ThemePicker from '@/components/ThemePicker'
const { app } = require('electron').remote
export default {
  components: {
    Release,
    Hamburger,
    Breadcrumb,
    Password
    // ErrorLog,
    // Screenfull
    // LangSelect
    // ThemePicker
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'name',
      'avatar',
      'appStatus'
    ]),
    terminalNO () {
      return this.$store.state.app.terminalNO
    },
    scenicName () {
      return this.$store.state.user.scenicName
    }
  },
  data () {
    return {
      demoIndex: 0,
      visible: true,
      version: app.getVersion()
    }
  },
  methods: {
    goDemo () {
      this.demoIndex++
      if (this.demoIndex === 12) {
        this.demoIndex = 0
        this.$router.push('/demo')
      }
    },
    updateNow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('updateNow')
    },
    toggleSideBar () {
      this.$store.dispatch('toggleSideBar')
    },
    logout () {
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push('/login')
        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
      })
    },
    handleFull () {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    openLink () {
      const { shell } = require('electron')

      shell.openExternal('http://117.159.178.68:8989/XZA/ulogin/login')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__item {
  span {
    color: white !important;
  }
}

::v-deep .appVersion {
  span {
    color: white !important;
  }
}
.navbar {
  /*
  height: 50px;  border-radius: 0 !important; background: $darkgray; position: relative;
  */
  height: 50px;  border-radius: 0 !important;  background-color: rgba(0, 0, 0, 0); position: relative;
  .hamburger-container {
    float: left;  height: 50px;  padding: 0 10px; line-height: 58px;
  }
  .breadcrumb-container {
    float: left;
  }
  .errLog-container {
    display: inline-block;  vertical-align: top;
  }
  .right-menu {
    display: flex; float: right;  height: 36px;  align-items: center; font-size: 13px;
    a{
      /*
      color: $blue;display: inline-block; padding:  0 10px;
      */
      color: #fff; display: inline-block; padding:  0 10px;
      &:hover{
        color: $activeblue;text-decoration: underline;
      }
    }
    li{
      border-right:1px solid $blue;
      &:last-child{
        border: none;
      }
    }
    &:focus {
      outline: none;
    }
  }
}

.appVersion{
  display: flex; justify-content: center; align-items: center; position: absolute; right: 10px; bottom: 0px;
  span{
    color: $activeblue; font-size: 12px;
  }
  a{
     cursor: pointer;display: flex; align-items: center; font-size: 12px;color: rgb(255, 0, 0);
  }
  i{
    display: inline-block; width: 8px;height: 8px;background: rgb(230, 36, 36); border-radius: 50%; margin-right: 5px;
  }
}

.termId{
position: absolute; right: 120px; bottom: 0px; color: $activeblue;font-size: 12px;
}
</style>

<style>
.navbar .svg-icon { width: 20px;  height: 20px;
  cursor: pointer;
}

</style>
