const TabItem={
    name:'PTabitem',
    props:{
        close:[String,Number,Boolean],
        title:{
            type:String,
            default:""
        },
        index:[String,Number],
        active:{
            type:Boolean,
            default:false
        },
        eventKey:{
            type:String
        }
    }, 
    inject:['addItem'],
    data(){
        return {
        }
    },
    mounted(){
        this.addItem(this)
    },
    beforeDestroy(){ 
        this.$el.remove();
    },
    methods:{
        handleTabClose(e){
            e.stopPropagation();
            if(this.$listeners.handleBeforeClose&&this.$listeners.handleBeforeClose()){
                return;
            }
            this.$emit('onTabClose',{
                key:this.eventKey
            },e);
        },
        handleTabChange(e){
            this.$listeners.handleSelected&&this.$listeners.handleSelected()
            this.$emit('onTabChange',{
                key:this.eventKey,
                el:this.$el
            },e)
        },
        handleContextMenu(e){
            e.preventDefault()
            e.stopPropagation();
            this.$emit('onContextMenu',{
                key:this.eventKey,
                el:this.$el
            },e)
        },
        getKey(){
            return this.eventKey;
        }
    },    
    render(h){
        const {title,close,eventKey,active} =this.$props;        
        const closeTpl = (
            <i class="pl-tabs-itemClose iconfont icon-close" onClick={this.handleTabClose}></i>
        )  
        const nodeProps = {
            class:{                
                ['pl-tabs-item']:1,
                ['pl-tabs-itemSeld']:active
            },
            on:{
                click:this.handleTabChange,
                contextmenu:this.handleContextMenu
            }
        };
        //sys-tab-item-text 
        return (
            <li>
                <div {...nodeProps}v>
                    <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span>
                    {(close===""||close===true)&&closeTpl}
                </div>
            </li>
        )
    }
}

export default TabItem;