<template>
  <div class="ezj-menu">
    <template v-for="menu in menus">
      <div
        :class="{'ezj-menu__item': true,'has-shadow': menu.hasShadow, 'is-active': menu.isActive}"
        :key="menu.id"
      >
        <div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div>
        <template v-if="menu.children">
          <template v-if="menu.isGroup">
            <template v-for="submenu in menu.children">
              <div class="ezj-menu-group" :key="submenu.title">
                <div class="ezj-menu-group__title">{{submenu.title}}</div>
                <ezj-submenu :menus="submenu.children" @onClick="handleClick"></ezj-submenu>
              </div>
            </template>
          </template>
          <template v-else>
            <!-- 子菜单 -->
            <ezj-submenu :menus="menu.children" @onClick="handleClick"></ezj-submenu>
          </template>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import EzjSubmenu from './Submenu'
export default {
  name: 'EzjMenu',
  components: { EzjSubmenu },
  props: {
    menus: {
      type: Array,
      default() {
        return []
      }
    },
    router: { type: Boolean, default: false },
    defaultActive: { type: String }
  },
  data() {
    return {
      currentActive: null
    }
  },
  watch: {
    defaultActive: {
      immediate: true,
      handler(value) {
        this.currentActive = value
      }
    }
  },
  methods: {
    handleClick(id) {
      this.currentActive = id
      this.$emit('select', id)
    }
  }
}
</script>

<style lang="scss">
.ezj-menu__item {
  margin-bottom: 10px;

  &.has-shadow {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);

    .ezj-submenu__item {
      margin: 20px;
    }
  }
  &.is-active {
    .ezj-menu__title {
      color: #fff;
      background-color: #c41230;
      border: 0;
    }
  }
}
.ezj-menu__title {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #000;
  text-align: center;
  border: 1px solid #d8dce6;
  box-sizing: border-box;
  cursor: pointer;

  &:hover {
    color: #fff;
    background-color: #c41230;
    border: 0;
  }
}
.ezj-menu-group__title {
  margin: 10px 0;
}
.ezj-submenu {
  overflow: hidden;
}
.ezj-submenu__item {
  margin: 10px 0;
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
}
</style>
