<!--<template>-->
<!--  <ul class="Menu" :class="classes">-->
<!--    <li-->
<!--      v-for="m in children"-->
<!--      :key="m.id"-->
<!--      class="MenuItem"-->
<!--    >-->
<!--      <a-->
<!--        :is="linkType(m)"-->
<!--        :to="{ path: m.url }"-->
<!--        :id="`Menu_${m.id}`"-->
<!--        class="MenuLink"-->
<!--        active-class="Active"-->
<!--      >-->
<!--        <slot name="menu-icon" :menu="m"></slot>-->
<!--        <Icon v-if="m.icon" :type="m.icon" class="MenuIcon" />-->
<!--        <span v-else class="MenuIcon"></span>-->
<!--        {{m.text}}-->
<!--        <Icon v-if="hasMore(m)" type="ios-arrow-down" class="More" />-->
<!--      </a>-->
<!--      <Menu-->
<!--        v-if="hasChildren(m)"-->
<!--        :level="level + 1"-->
<!--        :children="m.children"-->
<!--      />-->
<!--    </li>-->
<!--  </ul>-->
<!--</template>-->

<script>
export default {
  name: 'Menu',

  render (h) {
    const children = this.children
    const { linkType, hasMore, hasChildren } = this
    const { isSmall } = this.$App

    function renderIcon (menu) {
      const menuIcon = this.$App.$scopedSlots['menu-icon']
      if (menuIcon) {
        return menuIcon({ menu })
      }

      return menu.icon ? h('Icon', { class: { MenuIcon: true }, props: { type: menu.icon } }) : h('span', { class: { MenuIcon: true } })
    }

    return h('ul', { class: { Menu: true, ...this.classes } }, children.map(m => {
      return h('li', { key: m.id, class: { MenuItem: true } }, [
        h(linkType(m), {
          class: { MenuLink: true },
          attrs: { id: `Menu_${m.id}`, title: isSmall ? m.text : undefined },
          props: { to: { path: m.url }, 'active-class': 'Active' },
        }, [
          renderIcon.call(this, m),
          m.render ? m.render(h, m) : m.text,
          hasMore(m) ? h('Icon', {
            class: { More: true },
            props: { type: this.show ? 'ios-arrow-down' : 'ios-arrow-up' },
            on: {
              click: () => {
                this.hideChildren(m)
              },
            },
          }) : undefined,
          !isSmall && this.$App.$scopedSlots['menu-extra'] ? this.$App.$scopedSlots['menu-extra']({ menu: m }) : undefined,
        ]),
        hasChildren(m) ? h('Menu', { props: { level: this.level + 1, children: this.show ? m.children : [] } }) : undefined,
      ])
    }))
  },

  props: {
    level: {
      type: Number,
      default: 0,
    },
    children: {
      type: Array,
      require: true,
    },
    show: {
      type: Boolean,
      require: true,
    },
  },

  inject: {
    $App: {
      from: '$App',
      default: this,
    },
  },

  computed: {
    classes () {
      const c = {
        [this.theme]: true,
      }
      return this.level ? {
        [`L${this.level}`]: true,
        ...c,
      } : c
    },
    theme () {
      return this.$App.theme || ''
    },
  },

  methods: {
    hasMore (m) {
      // 只有主菜单才需要收缩按钮
      return this.level === 0 && m.children && m.children.length
    },
    hasChildren (m) {
      return m.children && m.children.length
    },
    linkType (m) {
      return (m.url && m.url !== '...') ? 'router-link' : 'a'
    },
    hideChildren (m) {
      this.show = !this.show
    }
  },
}
</script>

<style scoped lang="less">
.Menu {
  &.blue .MenuLink:before {
    background: #238ce4;
  }
  &.green .MenuLink:before {
    background: #179989;
  }
  &.red .MenuLink:before {
    background: #a72a30;
  }
  &.yellow .MenuLink:before {
    background: #ffc107;
  }

  .MenuItem {
    display: flex;
    flex-direction: column;
  }

  .MenuIcon {
    width: 16px;
    margin: 0 10px 0 8px;
    font-size: 18px;
  }

  .MenuLink {
    display: flex;
    position: relative;
    height: 50px;
    line-height: 50px;
    align-items: center;
    font-size: 14px;
    color: #ABB1B7;

    .More {
      position: absolute;
      right: -42px;
      font-size: 14px;
      width: 150px;
    }

    &:before {
      content: "";
      position: absolute;
      left: 0;
      width: 3px;
      height: 100%;
      background: #9061f9;
      opacity: 0;
    }

    &:hover,
    &.Active {
      color: #fff;
      background: rgba(0, 0, 0, .3);

      &:before {
        opacity: 1;
      }
    }
  }

  .Menu.L1 {
    .MenuIcon {
    }
    .MenuLink {
      height: 42px;
      line-height: 42px;
      padding-left: 20px;
      font-size: 14px;
    }
  }

  .Menu.L2 {
    .MenuLink {
      padding-left: 34px;
    }
  }
}
</style>
