<template>
  <div class="demo-menu-bg">
    <hive-menu
      :active.sync="active"
      mode="vertical"
      @select="handleSelect"
      :default-open-keys="'4'"
    >
      <hive-menu-item
        index="1"
        icon="cart"
      >
        <template>carts</template>
      </hive-menu-item>
      <hive-menu-item
        index="2"
        icon="chat"
      >
        <template>chat</template>
      </hive-menu-item>
      <hive-submenu
        index="3"
        icon="app"
      >
        <template slot="title">
          app
        </template>
        <template slot="child">
          <hive-menu-item index="3-1">
            <template>android</template>
          </hive-menu-item>
          <hive-menu-item index="3-2">
            <template>apple</template>
          </hive-menu-item>
        </template>
      </hive-submenu>
      <hive-submenu
        index="4"
        icon="attach"
      >
        <template slot="title">
          attach
        </template>
        <template slot="child">
          <hive-submenu index="4-1">
            <template slot="title">
              attach_son
            </template>
            <template slot="child">
              <hive-menu-item index="4-1-1">
                <template>attach_son_0</template>
              </hive-menu-item>
            </template>
          </hive-submenu>
          <hive-menu-item index="4-2">
            <template>Option 1</template>
          </hive-menu-item>
        </template>
      </hive-submenu>
    </hive-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: '1'
    };
  },
  methods: {
    handleSelect(tab) {
      console.log(tab);
    }
  }
};
</script>
