<template>
  <div class="MainMenu" :class="classes">
    <Menu :children="menu">
    </Menu>
    <slot name="bottom"></slot>
  </div>
</template>

<script>
import Menu from './MenuItem'
import {
  queryMenus,
} from '@centit/api-admin/menu'

export default {
  name: 'MainMenu',

  components: {
    Menu,
  },

  props: {
    small: Boolean,

    query: Function,

    theme: String,
  },

  data () {
    return {
      menu: []
    }
  },

  mounted () {
    this.load()
  },

  computed: {
    classes () {
      return {
        Small: this.small,
      }
    },
  },

  methods: {
    load () {
      const query = this.query || queryMenus
      query()
        .then(menu => {
          this.menu = menu
        })
    },
  },
}
</script>

<style lang="less">
.MainMenu {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100%;
  color: #ABB1B7;

  & > .Menu {
    flex: auto;
  }
}

.MainMenu.Small {
  width: 64px;
  & > .Menu > .MenuItem {

    /* 高度、图标 */
    &  > .MenuLink {
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 0;
      display: flex;
      justify-content: center;

      & > .MenuIcon {
        width: 28px;
        font-size: 28px;
        margin: 0;
      }
      & > .More {
        display: none;
      }
    }

    /* 鼠标悬浮 */
    &:hover {
      &  > .MenuLink {
        color: #fff;
        background: rgba(0, 0, 0, .3);
        &:before {
          opacity: 1;
        }
      }
      .Menu.L1 {
        left: 64px;
        z-index: 999;
      }
    }

    /* 二级菜单 */
    & > .Menu.L1 {
      display: block;
      position: absolute;
      height: 100%;
      width: 200px;
      top: 0;
      left: -200px;
      background: #222;
      border-right: 1px solid #000;

      .MenuLink {
        height: 48px;
        line-height: 48px;
      }
    }
  }
}
</style>
