const drpMenus={
    name:'PTabitem',
    props:{
        children:[Array]
    },  
    data(){
        return {
            menuStyle:{
                right:0,
                left:'auto',
                top:0,
                display:'none',
                overflow:'auto',
                maxHeight:'50%',
                // maxWidth:'150px'
            }
        }
    },
    mounted(){
        document.body.appendChild(this.$el);
        // document.addEventListener('click',this.hide)
    },
    beforeDestroy(){ 
        this.$el.remove();
        // document.removeEventListener('click',this.hide)
    },
    methods:{
       show(y){
           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.name,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-inline 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;