<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"
      >
        <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',

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

  computed: {
    classes () {
      return this.level ? [`L${this.level}`] : []
    },
  },

  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'
    },
  },
}
</script>

<style scoped lang="less">
.Menu {
  .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: 8px;
      font-size: 14px;
    }

    &:before {
      content: "";
      position: absolute;
      left: 0;
      width: 3px;
      height: 100%;
      background: #34A0CE;
      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>
