const drpMenus={
    name:'PTabitem',
    props:{
        children:[Array]
    },  
    data(){
        return {
            menuStyle:{
                right:0,
                left:'auto',
                top:0,
                display:'none',
                overflow:'auto',
                maxHeight:'50%',
                opacity:1,
                // maxWidth:'150px'
            }
        }
    },
    mounted(){
        document.body.appendChild(this.$el);
        // document.addEventListener('click',this.hide)
    },
    beforeDestroy(){ 
        this.$el.remove();
        // document.removeEventListener('click',this.hide)
    },
    methods:{
       show(x,y){
            // let w=document.documentElement.offsetWidth;
            // let el_w = 150;
            // if(x+el_w>w){
            //     this.menuStyle.left=(w-el_w)+'px';
            // }else{
            //     this.menuStyle.left=(x||0)+'px';
            // }
            if(y){
                this.menuStyle.top=(y||0)+'px';
            }   
            this.menuStyle.display='block'   
       },
       hide(){
            this.menuStyle.display='none'
       },
       onClose(panel,evt){
           evt.stopPropagation();
           this.$emit('onTabClose',panel.name,evt);
        //    this.hide();
       },
       onActive(panel,evt){
            evt.stopPropagation();
            this.$emit('onTabChange',panel,evt)
       }
    },    
    render(h){
        const {onClose,onActive,children}=this;
        const Props={
            style:this.menuStyle,
            on:{
                mouseout:()=>{this.hide()},
                mouseover:()=>{this.show()}
            }
        } 
        return (
            <ul class="pl-menus pl-menus-sub pl-menus-pop" {...Props}>
                {
                    children.map((panel,index)=>{
                        return (
                            <li class="pl-menus-item"  on-click={(ev) => { onActive(panel, ev); } }>
                                <a class="title" >
                                    <span class="txt">{panel.title}</span>
                                    {panel.close&&(
                                        <i class="trigger iconfont  icon-close" on-click={(ev) => { onClose(panel, ev); }}></i>
                                    )}
                                </a>
                            </li> 
                        )
                    })
                }
            </ul>
        )
    }
}

export default drpMenus;