<template>
  <div
    class="navbar"
  >
    <div class="left-menu">
      <div class="title">
        <div class="logo-container">
          <img
            :src="logo"
            class="logo"
          >
        </div>
        <div
          v-if="sidebar.opened"
          class="app-name">
          {{ appName }}
        </div>
      </div>
      <hamburger
        class="hamburger-container"
        :toggle-click="toggleSideBar"
        :is-active="sidebar.opened"
      />

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

    <ul class="right-menu">
      <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.release.render()">
          更新日志
        </a>
      </li>
      <li>
        <strong>{{ $store.state.user.name }}</strong>
      </li>
      <el-dropdown
        class="avatar-container right-menu-item"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <i
            class="iconfont icon-yonghu"
            style="font-size:22px"
          />
          <i class="el-icon-arrow-down" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/index/dashboard">
            <el-dropdown-item>
              欢迎 {{ $store.state.user.name }}
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
            <span
              @click="$refs.password.show()"
              style="display:block;"
            >
              修改密码
            </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span
              @click="logout"
              style="display:block;"
            >
              退出登录
            </span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display:block;">
              V{{ version }}
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </ul>

    <!-- <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 './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
    },
    logo () {
      return this.$store.state.app.customLogo
    }
  },
  data () {
    return {
      appName: this.$localStore.get('appName') || process.env.VUE_APP_PROJECT_NAME,
      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>
.navbar {
  height: 50px;
  border-radius: 0 !important;
  background: $blue;
  position: relative;
  color: #fff;
  display: flex;
  justify-content: space-between;

  .left-menu {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;

    .title {
      display: flex;
      align-items: center;
      width: 220px;
      height: 100%;
      justify-content: center;

      .logo-container {
        border-radius: 50%;
        height: 35px;
        width: 35px;
        background: #fff;
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          height: 25px;
          width: 30px;
        }
      }

      .app-name {
        margin-left: 15px;
      }
    }
  }

  .avatar-container {
    margin: 0 10px;
    cursor: pointer;

    .svg-icon {
      width: 20px;
      height: 20px;
      color: #fff;
    }

    i {
      color: #fff;
    }
  }

  .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: 50px;
    align-items: center;
    font-size: 13px;

    a {
      color: #fff;
      display: inline-block;
      padding: 0 10px;

      &:hover {
        color: #7991AD;
        text-decoration: none;
      }
    }

    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>
