<template>
  <div id="menu">

    <div style="width: 100%; height: 100%; display: flex;flex-direction: row">
      <div style="" class="menu">
        <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="/daping">
            <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="/runningState">运行状态</el-menu-item>
              <el-menu-item index="/dataCurve">数据曲线</el-menu-item>
              <el-menu-item index="/paramSetting">参数设定</el-menu-item>
              <el-menu-item index="/systemParam">系统参数</el-menu-item>
              <el-menu-item index="/deviceAlarmConfig">报警设置</el-menu-item>
              <el-menu-item index="/detail">报警记录</el-menu-item>
              <el-menu-item index="/deviceAlarmRepairRecord">维保记录</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 index="/rolePower">关联角色权限</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 @click.native="userInfo">个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="showUpdatePassword">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dialog title="修改密码" :visible.sync="dialogFormVisible" style="width: 55% ; margin-left: 480px ;">

            <el-form label-position="left" :model="formData" :rules="rules" ref="formData">

              <el-row style="margin-left: 15px">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input style="width: 70%" v-model="formData.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input style="width: 70%" v-model="formData.oldPassword"></el-input>
                </el-form-item>
              </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button @click="cancel()">取 消</el-button>
              <el-button type="primary" @click="updatePassword('formData')">确 定</el-button>
            </div>
          </el-dialog>

          <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: '',
      dialogFormVisible: false,

      index: '1',

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

      formData: {
        oldPassword: '',
        newPassword: ''
      },

      rules: {
        oldPassword: [
          {required: true, message: '请输入原密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
      },

    }
  },

  created: function () {
    let vm = this;

    // var userBean = this.$route.query.userBean

    this.realname = localStorage.getItem("realname");

    var tag = localStorage.getItem("realname")
    if (tag == null) {
      vm.$router.push({
        path: '/',
      });
    }

    console.log(this.realname)

    if (this.realname) {
      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')
    },

    logout() {
      const vm = this;
      vm.$http.get(vm.$api.auth.logout).then((resp) => {
        console.log(resp)

        vm.$router.push('/')

        localStorage.clear()

        this.$message({
          type: 'success',
          showClose: true,
          message: resp.data.desc
        })
      })
    },

    userInfo() {
      const vm = this;
      vm.$http.get(vm.$api.auth.userInfo).then((resp) => {

        vm.$router.push({
          path: '/userInfo',
          query: {data: resp.data.data}
        })

      })
    },

    showUpdatePassword() {
      this.dialogFormVisible = true;
    },

    updatePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const vm = this;
          vm.$http.get(vm.$api.auth.updateUserPassword, {
            params: {
              newPassword: this.formData.newPassword,
              oldPassword: this.formData.oldPassword
            }
          }).then((resp) => {
            console.log(resp)

            if (resp.data.status === 400) {
              vm.$message({
                type: "error",
                showClose: true,
                message: resp.data.data.errorFields[0].message
              });
            }

            if (resp.data.status == 200) {
              vm.$message({
                type: 'success',
                showClose: true,
                message: resp.data.desc
              })

              vm.$router.push('/login')
            }
            if (resp.data.status == 401) {
              vm.$message({
                type: 'error',
                showClose: true,
                message: resp.data.desc
              })
            }

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.$refs.formData.clearValidate();
      this.dialogFormVisible = false;
    },
  }
}
</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
}

.menu {
  height: 100vh;
  background-color: rgb(84, 92, 100);
  overflow-y: auto;
  overflow-x: hidden;

}

::-webkit-scrollbar {
  width: 1px;
}

.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;
}

.el-form-item {
  margin-left: 30px;
}


</style>
