<template>
  <li class="qf-nav-group"
      :class="[selected ? 'is-selected' : '', fixed ? 'is-fixed': '', home ? 'is-home' : '']"
      @click="handleClick" @mouseover="handleHover($event)" @mouseleave="handleLeave">
    <template v-if="!selected && !fixed && !hideTip">
      <qf-popper ref="popper"
                 :popperClass="'menu-popper'"
                 placement="right"
                 trigger="manual"
                 v-if="!rootMenu.open"
                 :preventOverflow=true
                 :visibleArrow=false
                 :z-index="100000">
        <div style="width: 120px;height: auto">
          <div class="ul-title">{{title}}</div>
          <div v-for="item in menus" v-if="item.name === title">
            <ul class="ul-item" v-for="child in item.children">
              <li @click="onToRoute(child.url, $event)" class="hover-item">{{child.name}}</li>
            </ul>
          </div>
        </div>
      </qf-popper>
      <div class="nav-btn" v-popper:popper>
        <div class="nav-icon" v-show="$slots.icon">
          <slot name="icon"></slot>
          <div class="bottom-name">{{title}}</div>
        </div>
        <span class="nav-title">{{title}}</span>
      </div>
    </template>
    <template v-else>
      <qf-popper ref="popper"
                 :popperClass="'menu-popper'"
                 placement="right"
                 trigger="manual"
                 v-if="!rootMenu.open"
                 :preventOverflow=true
                 :visibleArrow=false
                 :z-index="100000">
        <div style="width: 120px;height: auto">
          <div class="ul-title">{{title}}</div>
          <div v-for="item in menus" v-if="item.name === title">
            <ul class="ul-item" v-for="child in item.children">
              <li @click="onToRoute(child.url, $event)" class="hover-item">{{child.name}}</li>
            </ul>
          </div>
        </div>
      </qf-popper>
      <div class="nav-btn" v-popper:popper>
        <div class="nav-icon" v-show="$slots.icon">
          <slot name="icon"></slot>
          <div class="bottom-name">{{title}}</div>
        </div>
        <span class="nav-title">{{title}}</span>
      </div>
    </template>
    <transition :name="transition">
      <ul class="nav-items" v-show="showItems">
        <div class="nav-header-line">
          <span class="group-title">{{title}}</span>
        </div>
        <slot></slot>
      </ul>
    </transition>
  </li>
</template>

<script>
import QfTooltip from 'packages/tooltip';
import QfPopper from 'packages/popper';

export default {
  name: 'QfNavGroup',
  inject: ['rootMenu'],
  provide() {
    return {
      groupMenu: this
    };
  },
  data() {
    return {
      items: [],
      selected: false,
      fixed: false
    };
  },
  components: {
    QfTooltip,
    QfPopper
  },
  props: {
    title: String,
    menus: Array,
    routerLink: String,
    home: {
      type: Boolean,
      default: false
    },
    hideTip: {
      type: Boolean,
      default: false
    },
    beforeRoute: Function
  },
  created() {
    this.rootMenu.addGroup(this);
  },
  mounted() {
    this.rootMenu.handleTrigger();
  },
  beforeDestroy() {
    this.rootMenu.removeGroup(this);
  },
  computed: {
    showItems() {
      return this.rootMenu.open & this.selected && this.items.length > 0;
    },
    transition() {
      if (this.selected) {
        return 'qf-nav-right-in';
      } else if (!this.selected && !this.fixed) {
        return 'qf-nav-select-out';
      } else if (!this.selected && this.fixed) {
        return 'qf-nav-fixed-out';
      }
      return '';
    }
  },
  methods: {
    addItem(item) {
      this.items.push(item);
    },
    removeItem(item) {
      this.items.splice(this.items.indexOf(item), 1);
    },
    handleClick(event) {
      if (event.target.className === 'nav-items') {
        return;
      }
      if (this.items.length <= 0 && this.routerLink) {
        if (this.beforeRoute) {
          if (this.beforeRoute(this.routerLink)) {
            this.$router.push(this.routerLink, () => {
              this.rootMenu.$emit('groupClick', this);
            });
            return;
          }
        } else {
          this.$router.push(this.routerLink, () => {
            this.rootMenu.$emit('groupClick', this);
            this.rootMenu.open = false;
            this.rootMenu.doOpen(false);
          });
          return;
        }
      }
      if (this.rootMenu.openable) {
        this.rootMenu.$emit('groupClick', this);
      }
    },
    handleHover(event) {
      // 下面注释的这段代码为移入自身是否展示popper
      // let select = false
      // event.path.forEach((item) => {
      //   if (item.classList) {
      //     Array.from(item.classList).forEach(item => {
      //       if (item === 'is-selected') {
      //         select = true
      //       }
      //     })
      //   }
      // })
      // if (!select && this.routerLink !== '/home') {
      //   this.$refs.popper && this.$refs.popper.doShow()
      // }
      if (this.routerLink !== '/home') {
        this.$refs.popper && this.$refs.popper.doShow();
      }
    },
    handleLeave() {
      this.$refs.popper && this.$refs.popper.doClose();
    },
    onToRoute(url, event) {
      event.stopPropagation();
      this.$refs.popper && this.$refs.popper.doClose();
      this.$router.push(url, () => {
        this.rootMenu.open = false;
        this.rootMenu.doOpen(false);
      });
    }
  }
};
</script>
