<template>
  <div :class="NavsClass">
    <div class="logoContainer">
      <img class="logo" src="../assets/img/nav/logo.png"/>
    </div>
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="selectMenu" router :collapse="isCollapse">

      <el-menu-item :index="singleNavi.clmurl" :value = "singleNavi.clmname" v-for="singleNavi in singleNavs" style="margin-left: -20px">
        <template slot="title">
          <i :class="singleNavi.icon"></i>
          <span slot="title">{{ singleNavi.clmname }}</span>
        </template>
      </el-menu-item>

      <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.clmurl" :value = "c.clmname" v-for="c in nav.Childs"> {{ c.clmname }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </div>
</template>
<script>

import {
  GetShopNaviAllRequest
} from "@/grpc/base_pb";

let qs = require('qs');

export default {
  data() {
    return {
      navs: [],
      singleNavs: [],
      NavsClass: 'NavsShort',
    };
  },
  props: ['isCollapse'],
  watch: {
    isCollapse: {
      handler(newName, oldName) {
        let that = this;
        if (newName) {
          that.NavsClass = 'NavsShort'
        } else {
          that.NavsClass = 'navSide'
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getTableQuery();
  },
  methods: {
    //展开一级菜单
    handleOpen(key, keyPath) {
    },
    //关闭一级菜单
    handleClose(key, keyPath) {
    },
    //选中二级菜单栏项
    selectMenu(i, columnId, c) {
      //选中菜单的父菜单
      let parentSelect = columnId[0];
      //选中的二级菜单
      let childSelect = columnId[1];

      let res = {
        title: c.$attrs.value,
        name: childSelect.toString(),
        clmurl: i
      }
      //调用父级refreshList方法增加tab标签
      this.$emit('refreshList', res);
    },
    //查询生成菜单栏
    getTableQuery() {
      let that = this;

      let paraRequest = new GetShopNaviAllRequest();
      paraRequest.setShopid(localStorage.shopId);
      that.client.getShopNaviAll(paraRequest, {"Token": localStorage.token}, (err, GetShopNaviAllReply) => {
        if (err == null) {
          let res = JSON.parse(GetShopNaviAllReply.getColumnrs());
          let naviJson = [];
          let topNaviJson = [];
          res.forEach((parentItem, i) => {

            let parentList = {};
            parentList.clmid = parentItem.Id;
            parentList.clmurl = parentItem.Url;
            parentList.clmcode = parentItem.Code;
            parentList.clmname = parentItem.Name;
            parentList.prname = "";
            parentList.show = parentItem.NavShow;
            parentList.icon = parentItem.Icon;
            if (parentItem.Second.length > 0) {
              parentList.Childs = [];
              parentItem.Second.forEach((secondItem, j) => {
                let childList = [];
                childList.clmid = secondItem.Id
                childList.clmcode = "/" + secondItem.Code
                childList.clmurl = secondItem.Url
                childList.clmname = secondItem.Name

                parentList.Childs.push(childList);
              })

              naviJson.push(parentList);
            } else {
              topNaviJson.push(parentList);
            }
          })
          that.navs = naviJson;
          that.singleNavs = topNaviJson;
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
        }
      });
    },
  }
}
</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%;
  }
}
.el-menu-item:focus,
.el-menu-item:hover {}
.el-menu-item.is-active {}

.NavsShort {
  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: #ff36fc;
  color: #70e322;
  i {
    color: #d9b015;
  }
}
</style>