<template>
  <div class="demo-menu-fold">
    <ui-radio-group
      v-model="isCollapse"
      :options="radioOptions"
      type="button"
      style="margin-bottom: 20px;">
    </ui-radio-group>
    <ui-menu
      :collapse="isCollapse"
      default-active="1-4-1"
      class="menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <ui-submenu index="1">
        <ui-icon
          slot="icon"
          name="location"></ui-icon>
        <span slot="title">
          导航一
        </span>

        <ui-menu-item-group>
          <span slot="title">
            分组一
          </span>
          <ui-menu-item index="1-1">
            选项1
          </ui-menu-item>
          <ui-menu-item index="1-2">
            选项2
          </ui-menu-item>
        </ui-menu-item-group>
        <ui-menu-item-group title="分组2">
          <ui-menu-item index="1-3">
            选项3
          </ui-menu-item>
        </ui-menu-item-group>
        <ui-submenu index="1-4">
          <span slot="title">
            选项4
          </span>
          <ui-menu-item index="1-4-1">
            选项1
          </ui-menu-item>
        </ui-submenu>
      </ui-submenu>
      <ui-menu-item index="2">
        <ui-icon
          slot="icon"
          name="company"></ui-icon>
        <span slot="title">
          导航二
        </span>
      </ui-menu-item>
      <ui-menu-item index="3">
        <ui-icon
          slot="icon"
          name="setup"></ui-icon>
        <span slot="title">
          导航三
        </span>
      </ui-menu-item>
      <ui-menu-item
        index="4"
        disabled>
        <ui-icon
          slot="icon"
          name="database"></ui-icon>
        <span slot="title">
          导航四
        </span>
      </ui-menu-item>
    </ui-menu>
  </div>
</template>

<script>
import { Menu, MenuItem, MenuItemGroup, Submenu, RadioGroup, Icon } from "amumu-ui"

export default {
  components: {
    "ui-menu": Menu,
    "ui-menu-item": MenuItem,
    "ui-menu-item-group": MenuItemGroup,
    "ui-submenu": Submenu,
    "ui-radio-group": RadioGroup,
    "ui-icon": Icon,
  },
  data() {
    return {
      isCollapse: true,
      radioOptions: [
        {
          label: "收起",
          value: true,
        },
        {
          label: "展开",
          value: false,
        },
      ],
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="scss">
.demo-menu-fold {
  .menu-vertical-demo:not(.mm-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>
