<template>
  <el-row class="nav-bar" :style="{backgroundColor: headerColor}">
    <!-- 左侧系统名部分 -->
    <el-col :span="8">
      <el-col :span="12">
        <span class="logo-lg color-white" @click="toHome">
          蜂网仓储系统
          <!--<router-link to="/" class="color-white">蜂网仓储系统</router-link>-->
        </span>
      </el-col>
      <el-col v-if="!isIE9" :span="12" class="color-wrapper">
        <span class="color-white" style="margin-right: 5px; font-size: 14px;">切换主题色</span>
        <el-tooltip content="点击我更换颜色哦" effect="light" placement="right">
          <ThemePicker/>
        </el-tooltip>
      </el-col>

    </el-col>
    <!-- 右侧用户名部分 -->
    <el-col :span="16">
      <p class="right">
        <el-button title="全屏" @click="toFullScreen" type="text" icon="el-icon-rank" class="full-screen-btn"></el-button>
        <el-dropdown @command="changeProject" v-if="projectName" class="project">
          <span class="el-dropdown-link" style="color:#fff;">
            <span>{{projectName}}</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu class="project-menu" slot="dropdown">
            <el-dropdown-item
              v-for="item in projectList"
              :key="item.id"
              :command="item">{{item.ebpjProjectName}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" style="color:#fff;">
            <span>欢迎您&nbsp;&nbsp;</span>
            {{userName}}
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
    </el-col>
  </el-row>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
// import utils from '@/utils'
import ThemePicker from '@/components/ThemePicker'

const { mapState } = createNamespacedHelpers('framework')

export default {
  name: 'Hd',
  components: {
    ThemePicker,
  },
  created () {
    if (navigator.userAgent.indexOf('MSIE 9') > -1) {
      console.log('还在用 IE 9 呐 ? 换 chrome 吧')
      this.isIE9 = true
    }
  },
  mounted () {
    this.getProjectList()
  },
  computed: {
    headerColor () {
      return this.isIE9 ? '#409EFF' : this.$store.state.framework.theme
    },
    ...mapState({
      userName: 'userName',
      projectName: 'projectName'
    }),
  },
  data () {
    return {
      isIE9: false, // 浏览器为ie9
      projectList: [], // 仓库列表
    }
  },
  methods: {
    // 下拉菜单事件处理
    handleCommand (command) {
      this[command]()
    },
    // 登出
    logout () {
      // const url = this.$API.logout
      // this.$https.get(url)
      this.$router.replace({
        name: 'login'
      })
      this.$store.commit('framework/resetForLogout')
    },
    // 获取仓库列表
    getProjectList () {
      const url = this.$API.getProjectList
      this.$https.post(url)
        .then(data => {
          this.projectList = data.data
        })
    },
    // 切换仓库
    changeProject (command) {
      this.$store.commit('framework/changeProjectName', command.ebpjProjectName)
      const url = this.$API.changeProject
      const param = {
        ebpjId: command.ebpjId,
        projectName: command.ebpjProjectName,
        whCode: command.ebpjWhCode,
        whName: command.ebpjWhName,
      }
      this.$https.post(url, param)
        .then(data => {
          window.location.reload()
        })
    },
    // 回首页
    toHome () {
      this.$router.push({
        name: 'home'
      })
      this.$store.commit('framework/changePageName', '首页')
      this.$store.commit('framework/changeBreadcrumb', [{ name: '首页', route: { name: 'home' } }])
    },
    // 全屏
    toFullScreen (e) {
      const el = document.querySelector('html')
      // var el = e.srcElement || e.target// target兼容Firefox
      // el.innerHTML == '点我全屏' ? el.innerHTML = '退出全屏' : el.innerHTML = '点我全屏'
      FullScreen(el)
    },
  }
}

function FullScreen (el) {
  var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
  if (!isFullscreen) { // 进入全屏,多重短路表达式
    (el.requestFullscreen && el.requestFullscreen()) ||
      (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
      (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen())
  } else {	// 退出全屏,三目运算符
    document.exitFullscreen ? document.exitFullscreen()
      : document.mozCancelFullScreen ? document.mozCancelFullScreen()
        : document.webkitExitFullscreen ? document.webkitExitFullscreen() : ''
  }
}
</script>

<style scoped lang="scss">
  .nav-bar {
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px;
    width: 100%;
    height: 60px;
    line-height: 40px;
  }

  .logo-lg {
    font-size: 20px;
    margin-left: 20px;

    &:hover {
      cursor: pointer;
    }
  }

  .right {
    margin: 0 20px 0 0;
    text-align: right;
    color: #fff;
  }

  .color-white {
    color: #fff;
  }

  .color-wrapper {
    text-align: right;
  }

  .project {
    margin-right: 50px;
  }

  .project-menu {
    max-height: 500px;
    overflow: auto;
  }
  .full-screen-btn {
    margin-right: 20px;
    padding: 0;
    color: #fff;
    transform: rotateZ(45deg);
    font-size: 20px;
    vertical-align: middle;
    &.el-button--text:focus, &.el-button--text:hover {
      color: #fff;
    }
  }
</style>
