<template>
  <Dropdown ref="dropdown" @on-click="handleClick($event,parentItem)" :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 :src="currentItem==parentItem&&activeImg?activeImg:parentItem.meta.micon" :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>
      <template #list>
    <DropdownMenu ref="dropdown">
      <template v-for="child in children">
        <collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child" :key="`drop-${child.name}`"></collapsed-menu>
        <DropdownItem v-else :key="`drop-${child.name}1`" :name="child.name"><common-icon :size="iconSize" :type="child.icon"/><span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
      </template>
    </DropdownMenu>
    </template>
  </Dropdown>
</template>
<script>
import commonIcon from '_c/common-icon'
import mixin from './mixin'
import itemMixin from './item-mixin'
import { findNodeUpperByClasses } from '../../../bc-libs/util'

export default {
  name: 'CollapsedMenu',
  mixins: [ mixin, itemMixin ],
  components:{commonIcon},
  props: {
    hideTitle: {
      type: Boolean,
      default: false
    },
    rootIconSize: {
      type: Number,
      default: 16
    },
    currentItem:null
  },
  data () {
    return {
      placement: 'right-end',
    }
  },
  computed: {
    activeImg(){
      let val = this.currentItem
       if(val&&val.meta.micon&&val.meta.micon.indexOf('.')>1){
        let img = val.meta.micon.split('.')
        return img[0]+'-active.'+img[1]
      } else {
        return null
      }
    }
  },
  methods: {
    handleClick (name,val) {
      this.$emit('on-click', name,val)
    },
    handleMousemove (event, children) {
      const { pageY } = event
      const height = children.length * 38
      const isOverflow = pageY + height < window.innerHeight
      this.placement = isOverflow ? 'right-start' : 'right-end'
    }
  },
  mounted () {
    let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
    if (dropdown) dropdown.style.overflow = 'visible'
  }
}
</script>
