<script>
    export default{
        data(){
            return {
                visible: false,
                //样式
                callback:function(){},
                insideDom:function(){},
                showX:true,
                showMask:true,
                showHeader:false,
                title:"",
                tipHeaderClass:""
            }
        },
        render(h){
            let size={
                position:'absolute',
                boxShadow:'0 5px 15px rgba(0,0,0,.5)'
            },result={};
            Object.assign(result,size,this.style||{});
            if(this.showMask){
                return(
                        <transition name="cw-tip-fade">
                            <div class='v-tip-mask' v-show={this.visible}>
                                <div style={result} class='v-tip'>
                                     <div class={'v-tip__header'+' '+this.tipHeaderClass} v-show={this.showHeader}> {this.titleShow(h)}</div>
                                     <span class='v-tip__close' onClick={this.close} v-show={this.showX}>x</span>
                                     <div> {this.insideDom(h)}</div>
                                  </div>
                              </div>
                        </transition>
                      )
            }else{
                return(
                        <transition name="cw-tip-fade">
                            <div style={result} class='v-tip' v-show={this.visible}>
                                <div class="v-tip__header" v-show={this.showHeader}> {this.titleShow(h)}</div>
                                <span class='v-tip__close' onClick={this.close} v-show={this.showX}>x</span>
                                <div> {this.insideDom(h)}</div>
                             </div>
                        </transition>
                       )
            }
        },
        methods: {
            close() {
                this.visible = false;
            },
            open(){
                this.callback();
                this.visible = true;
            },
            titleShow(h){
                return this.title?h('span',this.title):h('div',{style:{visibility:'hidden'}},'no title');
            }
        },
    }
</script>
