import Vue from 'vue';
import MyPopover from '../components/Popover.vue';
const Popover = Vue.extend(MyPopover);
const _popover = {
   async bind(el, binding, vnode) {
        const popper = new Popover({
            el: document.createElement('div'),
            data(){
                return {}
            }
        })
        document.body.style.position='relative';
        document.body.appendChild(popper.$el); 
        el.instance = popper;
        el.instance.type = binding.value.type || '';
        el.instance.width = binding.value.width || '420';
        const $popover =el.instance.$refs['myPopover'];
        if(binding.value.trigger == 'click'){
            // console.log($popover,document.body,el)
            if(!$popover.showPopper){
                document.body.onmousedown=(e)=>{
                    if($popover.showPopper && !el.instance.click){
                        $popover.doClose()
                        document.body.style.position='static';
                    }
                    el.instance.click = false
                }
                el.onmousedown=()=>{
                    if($popover.showPopper){
                        $popover.doClose()
                        document.body.style.position='static';
                        return false
                    }
                    el.instance.click = true
                    Vue.nextTick(()=>{
                        const _top1 = el.getBoundingClientRect().top // 获取元素距离 顶部位置
                        const _top2 = document.body.scrollTop||document.documentElement.scrollTop //获取滚动高度
                        const _left = document.body.scrollLeft||document.documentElement.scrollLeft //获取滚动高度
                        const _offsetTop =_top1+_top2+4; // 距离顶部高度4px间距
                        const _offsetLeft =el.getBoundingClientRect().left; // 距离右边距离
                        const _offsetHeight =el.getBBox().height; //绑定元素高度
                        const popper = $popover.$refs.popper;
                        popper.style.position='absolute';
                        popper.style.top=`${_offsetTop+_offsetHeight}px`;
                        popper.style.left=`${_offsetLeft+_left}px`;
                        $popover.doShow()
                    })
                }
            }
            
        }else{
            el.onmouseenter=()=>{
                Vue.nextTick(()=>{
                    const _top1 = el.getBoundingClientRect().top // 获取元素距离 顶部位置
                    const _top2 = document.body.scrollTop||document.documentElement.scrollTop //获取滚动高度
                    const _left = document.body.scrollLeft||document.documentElement.scrollLeft //获取滚动高度
                    const _offsetTop =_top1+_top2+4; // 距离顶部高度4px间距
                    const _offsetLeft =el.getBoundingClientRect().left; // 距离右边距离
                    const _offsetHeight =el.getBBox().height; //绑定元素高度
                    // const $popover =el.instance.$refs['myPopover'];
                    const popper = $popover.$refs.popper;
                    popper.style.position='absolute';
                    popper.style.top=`${_offsetTop+_offsetHeight}px`;
                    popper.style.left=`${_offsetLeft+_left}px`;
                    $popover.doShow()
                })
            }
            el.onmouseleave=()=>{
                // const $popover =el.instance.$refs['myPopover'];
                $popover.doClose()
                document.body.style.position='static'; // 将body static
            }
        }
       
        
    },
    update() { },
    unbind(el, binding) {// 解除事件监听
        el.instance && el.instance.$destroy();
    }
};

export default _popover;
