<template>
  <div class="hae-menu">
    <div class="hae-menu-header">
      <p @click="toggleMenu" class="hae-menu-toggle">
        <icon name="menu"></icon>
        <span class="hae-menu-toggle-title">菜单</span>
      </p>
      <p class="hae-mene-title">{{title}}</p>
      <p class="hae-menu-block"></p>
    </div>
    <div class="hae-menu-body" v-show="showMenu">
      <ul class="hae-menu-body-content">
        <li class="hae-body-item" :class="{active:index == index0}" @click="chooseLevel1(index)" v-for="(item,index) in dataList" :key="index">
          {{item[showKey]}}
        </li>
      </ul>
      <ul class="hae-menu-body-content level-2" v-if="showMenu1">
        <li class="hae-body-item" :class="{active:index == index1}" @click="chooseLevel2(index)" v-for="(item,index) in dataList[index0].children" :key="index">
          {{item[showKey]}}
        </li>
      </ul>
      <ul class="hae-menu-body-content level-3" v-if="showMenu2">
        <li class="hae-body-item" :class="{active:index == index2}" @click="chooseLevel3(index)" v-for="(item,index) in dataList[index0].children[index1].children" :key="index">
          {{item[showKey]}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Icon from '../../components/icon'
export default {
  components: {
    Icon
  },
  name: 'x-menu',
  data () {
    return {
      showMenu: false,
      showMenu1: false,
      showMenu2: false,
      index0: -1,
      index1: -1,
      index2: -1
    }
  },
  methods: {
    showMenuIndex (i) {
      return i <= this.level && this.showMenu;
    },
    toggleMenu () {
      this.showMenu = !this.showMenu;
    },
    chooseLevel1 (i) {
      this.index0 = i;
      this.showMenu1 = this.showMenu2 = false;
      this.index1 = this.index2 = -1;
      if (this.level > 1 && this.dataList[this.index0].children) {
        this.showMenu1 = true;
      } else {
        this.showMenu = false;
        this.getChooseValue();
      }
    },
    chooseLevel2 (i) {
      this.index1 = i;
      this.showMenu2 = false;
      this.index2 = -1;
      if (this.level > 2 && this.dataList[this.index0].children[this.index1].children) {
        this.showMenu2 = true;
      } else {
        this.showMenu = this.showMenu1 = false;
        this.getChooseValue();
      }
    },
    chooseLevel3 (i) {
      this.index2 = i;
      this.showMenu = this.showMenu1 = this.showMenu2 = false;
      this.getChooseValue();
    },
    getChooseValue () {
      let result = [];
      switch (this.level) {
        case 1:
          result = [this.index0];
          break;
        case 2:
          result = [this.index0, this.index1].filter(item => {
            return item !== -1;
          });
          break;
        case 3:
          result = [this.index0, this.index1, this.index2].filter(item => {
            return item !== -1;
          });
          break;
      }
      this.$emit('get-result', result);
      this.index0 = this.index1 = this.index2 = -1;
    }
  },
  props: {
    showKey: {
      type: String,
      default: 'name'
    },
    title: {
      type: String,
      default: '菜单'
    },
    level: {
      type: Number,
      default: 1
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>
  ul {
    list-style:none;
  }
  .hae-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #108ee9;
    padding: 10px;
    color: #FFFFFF;
  }
  .hae-menu-header p {
    flex: 1;
  }
  .hae-mene-title {
    text-align: center;
  }
  .hae-menu-body {
    background-color: #f5f5f9;
    display: flex;
    justify-content: space-between;
  }
  .hae-menu-body-content {
    flex: 1;
  }
  .hae-body-item {
    padding: 10px;
  }
  .hae-body-item.active {
    background-color: #FFFFFF;
  }
  .hae-menu {
    position: relative;
    z-index: 1;
  }
  .hae-menu-body {
    position: absolute;
    top: 45px;
    width: 100%;
    left: 0;
  }
</style>