<template>
  <el-menu
    class="el-menu-vertical"
    :default-active="menuList[0].menuName"
    :style="{ height: screenHeight - 60 + 'px' }"
    :collapse="collapse"
  >
    <el-menu-item
      v-for="menu in menuList"
      :key="menu.menuName"
      v-if="!menu.groupList"
      :index="menu.menuName"
    >
      <i v-if="menu.icon" :class="menu.icon" />
      <i v-if="menu.iconBase64">
        <img :src="menu.iconBase64" />&nbsp;&nbsp;
      </i>
      <span slot="title" v-if="menu.routerName">
        <router-link :to="{ name: menu.routerName }">
          {{
          menu.menuName
          }}
        </router-link>
      </span>
      <span v-if="menu.url" slot="title">{{ menu.menuName }}</span>
    </el-menu-item>

    <el-submenu v-else :index="menu.menuName">
      <template slot="title">
        <i v-if="menu.icon" :class="menu.icon" />
        <i v-if="menu.iconBase64">
          <img :src="menu.iconBase64" />&nbsp;&nbsp;
        </i>

        <span slot="title">{{ menu.menuName }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="group in menu.groupList" :key="group.menuName" :index="group.menuName">
          <i :class="group.icon" />
          <i v-if="group.iconBase64">
            <img :src="group.iconBase64" />&nbsp;&nbsp;
          </i>

          <span slot="title" v-if="group.routerName">
            <router-link :to="{ name: group.routerName }">
              {{
              group.menuName
              }}
            </router-link>
          </span>
          <span v-if="group.url" slot="title">{{ group.menuName }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "LayoutAsideMenu",
  components: {},
  props: {
    collapse: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      screenHeight: document.documentElement.clientHeight, // 获取可视屏幕高度

      /**
       * 左侧菜单对象
       * routerName 与 url 不能并存
       * routerName：内部链接，通过vue-router跳转
       * url：外部链接，打开浏览器新的tab页
       *
       * icon 与 iconBase64 不能并存
       * icon：element-ui自带的icon
       * iconBase64：外部图片base64的编码（统一在[iconfont]查找icon, 颜色[#909399], 大小[16], 转换为base64编码）
       *
       * https://www.iconfont.cn
       * http://imgbase64.duoshitong.com
       * todo 后面增加属性支持页面嵌套打开
       */
      menuList: [
        {
          icon: "el-icon-data-analysis",
          menuName: "数据大盘",
          routerName: "DataMarketIndex"
        },

        {
          icon: "el-icon-s-cooperation",
          menuName: "题库管理",
          groupList: [
           {
              icon: "el-icon-collection",
              menuName: "题库·题干",
              routerName: "AccountIndex"
              },{
                            icon: "el-icon-collection",
                            menuName: "题库·新增试卷",
                            routerName: "paper"

              }

          ]

        }
      ]
    };
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.timer = true;
        const that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.documentElement.clientHeight;
        that.screenHeight = window.screenHeight;
      })();
    };

    // todo 在非[数据大盘]页面路由刷新后，默认选中的菜单没有调整
  },
  methods: {}
};
</script>

<style>
/* 左侧菜单[选中]高亮的颜色 */
.el-menu-item.is-active {
  color: #409eff !important;
}

/* 左侧菜单[选中]高亮的颜色 */
.el-menu-item.is-active span a {
  color: #409eff !important;
}

/* 左侧菜单[菜单组]背景色 */
.el-menu-item-group {
  background-color: #f0f0f0;
}
</style>
