<script>
    export default{
        data(){
            return {
                visible: false,
                //样式
                top: '0',
                left: '0',
                width: 500,
                height: 300,
                callback:function(){},
                insideDom:function(){
                },
                control:[],
                //hover相关标志
                overtip:0,
                overcontrol:0,
                event:'hover',
                showX:false,
                mode:''
            }
        },
        render(h){
            let size={
                width:this.width+'px',
                height:this.height+'px',
                left:this.left+'px',
                top:this.top+'px',
                position:'absolute',
                boxShadow:'0 5px 15px rgba(0,0,0,.5)'
            },result={};
            Object.assign(result,size,this.style||{});
            return(
                <transition name="cw-tip-fade">
                <div v-show={this.visible}
            style={result}>
                <span class='v-tip-close' onClick={this.close} v-show={this.showX}>×</span>
            { this.insideDom(h)}
        </div>
            </transition>
        )
        },

        methods: {
            //绑定事件
            bindEvent(){
                var self=this;
                self.$el.addEventListener('mouseover',function(){
                    self.overtip=1;
                });
                self.$el.addEventListener('mouseout',function(){
                    self.overtip=0;
                    let tipTimer=setTimeout(function(){
                        if(self.overtip==0&&self.overcontrol!=1){
                            clearTimeout(tipTimer);
                            self.close();
                        }
                    },50)
                });
                for(let i=0;i< self.control.length;i++){
                    self.control[i].addEventListener('mouseover',function(e){
                        self.overcontrol=1;
                        self.callback(e.target);
                        self.open(e.target);
                    },false);
                    self.control[i].addEventListener('mouseout',function(e){
                        self.overcontrol=0;
                        let timer=setTimeout(function(){
                            if(self.overtip==0&&self.overcontrol==0){
                                clearTimeout(timer);
                                self.close();
                            }
                        },100)
                    },false);
                }
            },
            getPoint(obj) {
                var t = obj.offsetTop,
                    l = obj.offsetLeft,
                    relativeTarget=document.querySelector('.v-table-leftview');
                if(this.mode==='table'){
                    while (obj != relativeTarget) {
                        obj = obj.offsetParent;
                        t += obj.offsetTop;
                        l += obj.offsetLeft;
                    }
                    t-=document.querySelector('.v-table-leftview .v-table-body').scrollTop;
                }
                while (obj = obj.offsetParent) {
                    t += obj.offsetTop;
                    l += obj.offsetLeft;
                }
                return {t, l}
            },
            close() {
                this.visible = false;
            },
            open(target){
                if (target) {
                    let position = this.getPoint(target);
                    let heightMax = document.documentElement.clientHeight;
                    if (position.t > heightMax / 2) {
                        this.top = position.t - this.height;
                    } else {
                        this.top = position.t;
                    }
                    this.left = position.l + target.offsetWidth;
                }
                this.visible = true;
            },
        },
    }
</script>

