<template>
   <Dropdown :placement="placement" transfer trigger="click">
      <!--level==1表示为第一级-->
      <template v-if="level==1">
         <template v-if="menu.menus && menu.menus.length">
            <Icon
               v-if="menu.icon"
               class="icon"
               :type="menu.icon"
               @mouseover.native="handleMousemove($event,menu.menus)"/>
         </template>

         <template v-else>
            <Poptip :content="menu.title" placement="right" transfer trigger="click">
               <Icon
                  class="icon"
                  :type="menu.icon?menu.icon:'ios-browsers'"
                  @click.native="menuChange(menu)"/>
            </Poptip>
         </template>
      </template>

      <DropdownItem v-else>
         {{menu.title}}
         <Icon v-if="menu.menus && menu.menus.length" type="ios-arrow-forward"></Icon>
      </DropdownItem>

      <DropdownMenu slot="list" v-if="menu.menus && menu.menus.length">
         <template  v-for="(child,i) in menu.menus">
            <collapsed-menu v-if="child.menus && child.menus.length" :menu="child" :level="level+1"></collapsed-menu>
            <DropdownItem v-else @click.native="menuChange(child)">{{child.title}}</DropdownItem>
         </template>
      </DropdownMenu>
   </Dropdown>
</template>

<script>
   export default{
      name: 'collapsedMenu',
      props:{
         level:{ //层级
            type: [String,Number],
            default: 1
         },
         menu: {
            type: Object,
            default(){
               return null;
            }
         }
      },
      data(){
         return{
            placement: 'right-start'
         }
      },
      methods:{
         handleMousemove(event, children){
            const { pageY } = event
            const height = children.length * 35
            const isOverflow = pageY + height < window.innerHeight
            this.placement = isOverflow ? 'right-start' : 'right-end'
         },

         menuChange(menu){
            switch(menu.open){
               case 0: //iframe方式
                  this.$router.push({path:'/iframe',query:{mid:menu.id}});
                  break;
               case 1: //打开新窗口
                  window.open(menu.path,'_blank');
                  break;
               case 2: //弹出窗口
                  const top = (window.outerHeight-menu.height)/2;
                  const left = (window.outerWidth-menu.width)/2;
                  window.open(menu.path,'_blank',`width=${menu.width},height=${menu.height},top=${top},left=${left}`);
                  break;
               case 3: //vue组件
                  this.$router.push({path:menu.path,query:{mid:menu.id}});
                  break;
            }
         }
      }
   }
</script>
