<template>
  <div class="demo-menu-bg">
    <hive-menu
      :active.sync="active"
      mode="horizontal"
      @select="handleSelect"
    >
      <template v-slot:header>
        <div class="demo-menu-horizontalheader">
          horizontal header
        </div>
      </template>
      <hive-menu-item index="1">
        <template>Item 1</template>
      </hive-menu-item>
      <hive-menu-item index="2">
        <template>Item 2</template>
      </hive-menu-item>
      <hive-submenu index="3">
        <template slot="title">
          SubMenu 1
        </template>
        <template slot="child">
          <hive-menu-item index="3-1">
            <template>Option 1</template>
          </hive-menu-item>
          <hive-menu-item index="3-2">
            <template>Option 2</template>
          </hive-menu-item>
        </template>
      </hive-submenu>
      <hive-submenu index="4">
        <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: ''
    };
  },
  methods: {
    handleSelect(tab) {
      console.log(tab);
    }
  }
};
</script>
