<template>
  <div>
    <h4>顶部导航</h4>
    <sh-menu
      mode="horizontal"
      @select="handleSelect"
      :default-active="activeIndex"
    >
      <sh-menu-item index="1">
        <i class="el-icon-video-camera-solid"></i>
        举例1</sh-menu-item
      >
      <sh-menu-item index="2">举例2</sh-menu-item>
      <sh-menu-item index="9">举例3</sh-menu-item>
      <sh-submenu index="6">
        <template #title> 子菜单示例 </template>
        <div class="menu-group">
          <sh-menu-item-group>
            <template slot="title">分组一</template>
            <sh-menu-item index="1-1">选项1</sh-menu-item>
            <sh-menu-item index="1-2">选项2</sh-menu-item>
          </sh-menu-item-group>
          <sh-menu-item-group>
            <template slot="title">分组一</template>
            <sh-menu-item index="1-1">选项1</sh-menu-item>
            <sh-menu-item index="1-2">选项2</sh-menu-item>
          </sh-menu-item-group>
        </div>
      </sh-submenu>
      <sh-submenu index="7">
        <template #title> 子菜单示例 </template>
        <sh-menu-item index="7-1">举例1</sh-menu-item>
        <sh-menu-item index="7-2">举例2</sh-menu-item>
        <sh-menu-item index="7-3">举例3</sh-menu-item>
      </sh-submenu>
    </sh-menu>
    <h4>侧栏-标准导航</h4>
    <sh-menu @select="handleSelect" :default-active="activeIndex">
      <sh-menu-item index="1">
        <i class="el-icon-video-camera-solid"></i>
        举例1</sh-menu-item
      >
      <sh-menu-item index="2">
        <i class="el-icon-video-camera-solid"></i>举例2</sh-menu-item
      >

      <sh-menu-item index="9">
        <i class="el-icon-video-camera-solid"></i>举例3</sh-menu-item
      >

      <sh-submenu index="7">
        <template #title>
          <i class="el-icon-video-camera-solid"></i>子菜单示例
        </template>
        <sh-menu-item index="7-1">举例1</sh-menu-item>
        <sh-menu-item index="7-2">举例2</sh-menu-item>
        <sh-menu-item index="7-3">举例3</sh-menu-item>
      </sh-submenu>
    </sh-menu>
    <h4>侧栏-分组导航</h4>
    <sh-menu @select="handleSelect" :default-active="activeIndex">
      <sh-menu-group>
        <template #title>分组管理</template>
        <sh-menu-item index="1">
          <i class="el-icon-video-camera-solid"></i>
          举例1</sh-menu-item
        >
        <sh-menu-item index="2">
          <i class="el-icon-video-camera-solid"></i>举例2</sh-menu-item
        >
      </sh-menu-group>
      <sh-menu-group>
        <template #title>会议管理</template>
        <sh-menu-item index="9">
          <i class="el-icon-video-camera-solid"></i>举例3</sh-menu-item
        >

        <sh-submenu index="7">
          <template #title>
            <i class="el-icon-video-camera-solid"></i>子菜单示例
          </template>
          <sh-menu-item index="7-1">举例1</sh-menu-item>
          <sh-menu-item index="7-2">举例2</sh-menu-item>
          <sh-menu-item index="7-3">举例3</sh-menu-item>
        </sh-submenu>
      </sh-menu-group>
    </sh-menu>
  </div>
</template>
<script>
export default {
  name: "navMenu",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      menuList: [
        {
          index: "1",
          title: "title",
          list: [
            {
              index: "1-1",
              text: "处理中心1",
            },
            {
              index: "1-2",
              text: "处理中心2",
            },
            {
              index: "1-3",
              text: "处理中心3",
            },
            {
              index: "1-4",
              text: "处理中心4",
            },
          ],
        },
        {
          index: "2",
          title: "处理中心2",
          list: [
            {
              listGroup: [
                {
                  title: "小分组1",
                  list: [
                    {
                      index: "2-1",
                      text: "处理中心1",
                    },
                    {
                      index: "2-2",
                      text: "处理中心2",
                    },
                  ],
                },
                {
                  title: "小分组2",
                  list: [
                    {
                      index: "2-3",
                      text: "处理中心3",
                    },
                    {
                      index: "2-4",
                      text: "处理中心4",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          index: "3",
          text: "处理中心3",
          route: "llll啦啦啦",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>