<template>
  <div :class="NavsideClass">
    <div class="logoContainer">
      <img class="logo" src="../assets/img/nav/logo.png"/>
    </div>
    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router
             :collapse="isCollapse" @select="selectMenu">
      <el-submenu :index="nav.clmid" v-for="nav in navs">
        <template slot="title">
          <i :class="nav.icon"></i>
          <span slot="title">{{ nav.clmname }}</span>
        </template>
        <el-menu-item-group v-if="nav.Childs">
          <el-menu-item :index="c.clmid" v-for="c in nav.Childs"> {{ c.clmname }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import {
  getNavListQuery
} from '../api/getApiRes.js'

let qs = require('qs');
export default {
  data() {
    return {
      navs: [],
      NavsideClass: 'NavsideShort',
    };
  },
  props: ['isCollapse'],
  watch: {
    isCollapse: {
      handler(newName, oldName) {
        let that = this;
        if (newName) {
          that.NavsideClass = 'NavsideShort'
        } else {
          that.NavsideClass = 'navSide'
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.userLevelDeafult = this.$route.meta.clmid;
    this.getTableQuery();
  },
  methods: {
    selectMenu(i, t, c) {
      // todo 拿不到二级的结果
      let thatNum = parseInt(t[0]);
      let thisNum = parseInt(t[0]) - 1;
      if (t[0] == 1) {
        // 重复的默认就不要加了
        return false
      }
      let res = {
        title: c.$route.meta.title,
        clmurl: c.$route.meta.path,
        name: thatNum.toString()
      }
      console.log('res', res);
      this.$emit('refreshList', res);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    getTableQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      getNavListQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 菜单
          that.navs = json.Rs;
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.navSide {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: white;
  box-shadow: #2c2e2f;

  /deep/ .el-menu-vertical-demo {
    width: 100%;
  }
}

.NavsideShort {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 100%;
  background: white;
  box-shadow: #2c2e2f;

  /deep/ .el-menu-vertical-demo {
    width: 72px;
  }
}

.logoContainer {
  width: 100%;
  height: 72px;
  background-color: #3699FF;
}

.logo {
  width: 72px;
  height: 72px;
  box-shadow: #2c2e2f;
}


/deep/
.el-submenu__title {
  margin-left: -20px;
}

.el-submenu__title:hover {
  background-color: #3699FF;
  color: #fff;

  i {
    color: #fff;
  }
}
</style>