<template>
  <div class="viewBody">

    <div class="topMenuBar">
      <span>{{ $store.state.platformName }}</span>
      <div class="userInformationBar">
        <div style="margin-right:10px;">
          <span>{{userName}}</span>
          <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
        </div>
        <el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button>
        <img src="../imgs/yonghu.png">
      </div>
    </div>

    <div class="mainBody">
      <div class="leftMenuBar">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu class="el-menu-vertical-demo" background-color="rgb(9, 26, 69)" text-color="rgb(3,156,205)" active-text-color="white" :unique-opened="true" :router="true">

              <el-menu-item index="/homepage/mineMonitoring">
                  <i class="iconfont icon-zhuye" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">矿区监控</span>
              </el-menu-item>
              <el-menu-item index="/homepage/videoSurveillance">
                  <i class="iconfont icon-diannao" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">视频监控</span>
              </el-menu-item>
              <el-submenu index="shengchanzidonghua">
                <template slot="title">
                  <i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>生产系统</span>
                </template>
                <el-menu-item index="/homepage/AutomationHomepage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/AutomatedReport">生产报表</el-menu-item>
              </el-submenu>
              <el-submenu index="people">
                <template slot="title">
                  <i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>人员定位</span>
                </template>
                <el-menu-item index="/homepage/PersonnelPositioningHomePage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningnowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningTrajectory">轨迹回放</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningHistroyData">历史数据</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningAlarm">报警历史</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningEnclosure">围栏设定</el-menu-item>
                <el-menu-item index="/homepage/PersonnelPositioningRegister">人员登记</el-menu-item>
              </el-submenu>
              <el-submenu index="cars">
                <template slot="title">
                  <i class="iconfont icon-che" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>车辆定位</span>
                </template>
                <el-menu-item index="/homepage/carPositioningHomePage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/carPositioningnowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/carPositioningTrajectory">轨迹回放</el-menu-item>
                <el-menu-item index="/homepage/carPositioningHistroyData">历史数据</el-menu-item>
                <el-menu-item index="/homepage/carPositioningAlarm">报警历史</el-menu-item>
                <el-menu-item index="/homepage/carPositioningEnclosure">围栏设定</el-menu-item>
                <el-menu-item index="/homepage/carPositioningRegister">车辆登记</el-menu-item>
              </el-submenu>
              <el-submenu index="bianpo">
                <template slot="title">
                  <i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>边坡监测</span>
                </template>
                <el-menu-item index="/homepage/SlopeHomePage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/SlopeHorizontal">坝体表面水平位移</el-menu-item>
                <el-menu-item index="/homepage/SlopeVertical">坝体表面竖向位移</el-menu-item>
                <el-menu-item index="/homepage/SlopeRainfall">降雨量</el-menu-item>
                <el-menu-item index="/homepage/SlopeEarlyWarning">预警级别设置</el-menu-item>
                <el-menu-item index="/homepage/SlopeHistory">历史数据</el-menu-item>
                <el-menu-item index="/homepage/SlopeAlarm">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="huanjign">
                <template slot="title">
                  <i class="iconfont icon-leaf" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>环境监测</span>
                </template>
                <el-menu-item index="/homepage/EnvironmentHomepage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentNowData">实时数据</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentHistory">历史数据</el-menu-item>
                <el-menu-item index="/homepage/EnvironmentAlarm">报警记录</el-menu-item>
              </el-submenu>
              <el-submenu index="shuzihuachuliang">
                <template slot="title">
                  <i class="iconfont icon-kuaizhuanggengduo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>储量管理</span>
                </template>
                <el-menu-item index="/homepage/reservesHomepage">系统首页</el-menu-item>
                <el-menu-item index="/homepage/reservesList">管理列表</el-menu-item>
              </el-submenu>
              <el-menu-item index="/homepage/AccessHomepage">
                  <i class="iconfont icon-a-ziyuan50" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">门禁系统</span>
              </el-menu-item>
              <el-menu-item index="/homepage/unman">
                  <i class="iconfont icon-ren-jianshao" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span slot="title">无人值守</span>
              </el-menu-item>
              <el-menu-item index="jiankongdaping">
                  <a href="http://www.baidu.com" style="color:rgb(3,156,205);text-decoration: none;-webkit-tap-highlight-color: rgba(3,156,205);">
                    <i class="iconfont icon-diannao" style="margin-right:10px;color:rgb(3,156,205);"></i>
                    <span slot="title">监控大屏</span>
                  </a>
              </el-menu-item>
              <el-submenu index="xitongguanli">
                <template slot="title">
                  <i class="iconfont icon-shezhi" style="margin-right:10px;color:rgb(3,156,205);"></i>
                  <span>系统管理</span>
                </template>
                <el-menu-item index="/homepage/personManagement">人员系统管理</el-menu-item>
                <el-menu-item index="/homepage/carManagement">车辆系统管理</el-menu-item>
              </el-submenu>
              
            </el-menu>
          </el-col>
        </el-row>
      </div>

      <div class="rightBody">
          <router-view></router-view>
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  data(){
    return{
      userName:"qwqwqw",
			fullscreen: false,
      quanping:"iconfont icon-70BasicIcons-all-48",
    }
  },
  methods: {
    handleFullScreen(){
			let element = document.documentElement;
			if (this.fullscreen) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if (element.requestFullscreen) {
					element.requestFullscreen();
				} else if (element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if (element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
      if(this.fullscreen){
        this.quanping = "iconfont icon-70BasicIcons-all-48"
      }else{
        this.quanping = "iconfont icon-suoxiao"
      }
			this.fullscreen = !this.fullscreen;
		}
  }
};

</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.viewBody{
  height: 100vh;
  overflow: hidden;
}
.topMenuBar {
  width: 100%;
  height: 7%;
  background: -webkit-linear-gradient(rgb(14, 35, 94), rgb(9, 26, 69));
  padding: 0px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topMenuBar > span {
  background-image: -webkit-linear-gradient(
    bottom,
    rgb(182, 205, 249),
    rgb(255, 255, 255)
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px;
  line-height: 70px;
  font-size: 31px;
  font-weight: 600;
}
.userInformationBar {
  color: rgb(151, 227, 244);
  display: flex;
  align-items: center;
}
.userInformationBar i {
  width: 21px;
  height: 21px;
}
.mainBody{
    height: 93%;
    display: flex;
}
.leftMenuBar{
  width: 12.5%;
  height: 100%;
  overflow: auto;
  background-color: rgb(9,26,69);
  font-family: 'Tangerine', serif !important;
}
.leftMenuBar::-webkit-scrollbar{
  display:none;
}
.rightBody{
  width: 87.5%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,20,78);
}
.rightBody::-webkit-scrollbar{
  display:none;
}
.leftMenuBar>.tac>.el-col>ul{
  width: 240px;
  letter-spacing: 2px;
  font-weight: 600;
}
.el-menu .el-menu-item{
  font-size: 10px;
}
.el-menu .el-submenu__title{
  font-size: 10px;
}
.el-menu .iconfont{
  margin-left: 20px !important;
}
.el-menu-item:hover{
  background-color: rgb(7,36,118) !important;
}
.el-submenu__title:hover{
  background-color: rgb(7,36,118) !important;
}
.xiajiantou{
  display: inline-block;
  width: 18px;
  height: 18px;
}
.el-submenu>.el-menu>.el-menu-item{
  padding-left: 70px !important;
  box-sizing: border-box !important;
}
.el-menu-item, .el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
}
</style>