<template>
  <Dropdown   ref="dropdown" @on-click="handleClick" :class="hideTitle ? '' : 'collased-menu-dropdown'" :transfer="hideTitle" :placement="placement">
    <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/></a>
    <DropdownMenu ref="dropdown" slot="list" :class="styleClass">
      <template v-for="child in children">
        <third-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child" :key="`drop-${child.name}`"></third-menu>
        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name" :class="$route.name==child.name?'active':''"><common-icon :size="iconSize" :type="child.icon"/><span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
      </template>
    </DropdownMenu>
  </Dropdown>
</template>

<script lang="ts">
import { Component, Prop, Vue,Emit } from "vue-property-decorator";
import mixin from './mixin'
import itemMixin from './item-mixin'
import { findNodeUpperByClasses } from '../../libs/util'



@Component({ mixins: [ mixin, itemMixin ]})
export default class ThirdMenu extends Vue {
  placement:string ='right-end'
  @Prop({type:Boolean,default:false}) private hideTitle! : boolean;

  @Prop({ type: Number, default: 16 }) private rootIconSize! : number;

  @Prop() private styleClass : any;


   mounted () {
    let dropdown = findNodeUpperByClasses((this.$refs.dropdown as any).$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
    if (dropdown) dropdown.style.overflow = 'visible'
  }

  @Emit('on-click') emitName(name:string){}
   handleClick (name) {
      this.emitName(name)
    }

    handleMousemove (event, children) {
      const { pageY }:any = event
      const height : number = children.length * 38
      const isOverflow : boolean = pageY + height < window.innerHeight
      this.placement = isOverflow ? 'right-start' : 'right-end'
    }
}
</script>