<template>
  <div id="menu">

    <div style="width: 100%; height: 100%; display: flex;flex-direction: row">

      <div style="height: 100vh;background-color: rgb(84,92,100); ">
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#993333"
            :router=true
            :default-active="$route.name"
            @open="handleOpen"
            @close="handleClose">

          <div class="logo" style="height: 50px;  background-color:rgb(84,92,100)">
            <div class="img">
              <img src="" alt="" style="height: 100%">
            </div>
          </div>


          <el-menu-item index="/">
            <i class="el-icon-location"></i>
            <span slot="title">数据可视化大屏</span>
          </el-menu-item>

          <el-menu-item index="/operator">
            <i class="el-icon-location"></i>
            <span slot="title">运营商管理</span>
          </el-menu-item>

          <el-menu-item index="/project">
            <i class="el-icon-location"></i>
            <span slot="title">项目管理</span>
          </el-menu-item>

          <el-menu-item index="/gateway">
            <i class="el-icon-location"></i>
            <span slot="title">网关管理</span>
          </el-menu-item>

          <el-submenu index="3-2" style="display: flex;flex-direction:column">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span @click="device(index)">设备管理</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="/">运行状态</el-menu-item>
              <el-menu-item index="/">数据曲线</el-menu-item>
              <el-menu-item index="/">参数设定</el-menu-item>
              <el-menu-item index="/">系统参数</el-menu-item>
              <el-menu-item index="/">报警设置</el-menu-item>
              <el-menu-item index="/">报警记录</el-menu-item>
              <el-menu-item index="/">维保记录</el-menu-item>
            </el-menu-item-group>

          </el-submenu>


          <el-menu-item index="/deviceAlarmRecord">
            <i class="el-icon-location"></i>
            <span slot="title">报警管理</span>
          </el-menu-item>

          <el-menu-item index="/operatorLog">
            <i class="el-icon-location"></i>
            <span slot="title">操作日志</span>
          </el-menu-item>

          <el-menu-item index="/user">
            <i class="el-icon-location"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>

          <el-submenu index="7" style="display: flex;flex-direction:column">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限设置</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="/role">角色管理</el-menu-item>
              <el-menu-item index="/power">权限管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </div>


      <div style="width: 90% ; float: right">
        <el-header class="header" style="height: 80px;">

          <!-- 点击展开收起导航和切换对应图标 -->

          <i class="el-icon-s-fold" @click="isC" v-show="block"></i>
          <i class="el-icon-s-unfold" @click="isC" v-show="toggle"></i>

          <!--          <el-radio-group v-model="isCollapse" style="margin-top: 15px;">-->
          <!--            <el-radio-button :label="false">展开</el-radio-button>-->
          <!--            <el-radio-button :label="true">收起</el-radio-button>-->
          <!--          </el-radio-group>-->

          <el-dropdown style="margin-right: 20px;float: right;margin-top: 10px">
            <i class="el-icon-setting"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <span style="float: right; margin-right: 20px; margin-top: 10px">{{ realname }}</span>

        </el-header>

        <el-main style="background-color: rgb(245,247,249);height: 100vh">
          <router-view></router-view>
        </el-main>
      </div>


    </div>
  </div>

</template>

<script>
export default {
  name: "menu",

  data() {
    return {
      realname:'',

      index: '1',

      isCollapse: false,
      toggle: false,//第二个图标默认隐藏
      block: true,//默认显示第一个图标

    }
  },

  created: function () {
    let vm = this;

    var resp = this.$route.query.resp

    this.realname = resp.data.data.user.realname

    console.log(resp)

    vm.$router.push('/operator')

  },

  methods: {


    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    }
    ,
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },


    device() {
      let vm = this;
      vm.$router.push('/device')
    },

  }
}
</script>

<style>
.img {
  background-color: darkgrey;
  height: 40px;
  width: 40px;
  margin: auto;
  text-align: center;
  line-height: 100px;
  align-items: center;
}

.header {
  height: 64px;
  line-height: 64px;
  /*background-color: darkgrey;*/
  padding: 0 20px;
  position: relative
}

/*.el-aside {*/

/*  float: left;*/
/*  background-color: #545c64;*/
/*  text-color: #fff;*/
/*  active-text-color: #993333*/
/*}*/

.el-menu {
  float: left;
  background-color: #545c64;
  text-color: #fff;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;

}

.el-main {
  padding: 5px 5px 5px 5px
}

.logo {
  margin-top: 20px;
  margin-bottom: 10px;
}

.el-icon-s-fold {
  margin-top: 30px;
  width: 20px;
  height: 20px;
}

.el-icon-s-unfold {
  margin-top: 30px;
  width: 20px;
  height: 20px;
}

.el-button{
  color: black;
}
</style>
