export default (app) => {
    let div = null

    app.directive('tip', (el, binding, vnode, prevVnode) => {
        el.onmouseover = (event) => {
            // console.log(el, binding, vnode, prevVnode)
            // console.log(el.clientHeight, el.clientWidth, el.offsetHeight, el.offsetWidth);
            console.log(el.getBoundingClientRect())
            let rect = el.getBoundingClientRect()

            div = document.createElement("div")
            div.style.position = 'fixed'
            div.style.width = 'max-content'
            div.style.top = rect.y + el.clientHeight + (el.clientHeight / 2) + 'px'
            div.style.left = rect.x + el.clientWidth + 'px'
            div.style.backgroundColor = 'rgb(0,0,0)'
            div.innerHTML = binding.value
            div.style.fontSize = '12px'
            div.style.color = '#fff'
            div.style.padding = '10px'
            div.style.zIndex = '999'
            div.style.borderRadius = '3px'
            div.style.boxShadow = '0px 0px 12px rgba(0, 0, 0, 0.12)'
            document.body.appendChild(div)
            edgeMonitoringJudgment(div)
        }

        el.onmouseout = () => {
            document.body.removeChild(div)
        }

    })

    app.beforeUnmount = () => {
        document.body.removeChild(div)
    }


}

function edgeMonitoringJudgment(el) {
    let w, h;
    w = window.innerWidth;
    h = window.innerHeight;
    // 监测右边超出
    if (el.offsetLeft + el.offsetWidth >= w) {
        console.log('超出', w - el.offsetLeft)
        el.style.left = el.offsetLeft - (el.offsetWidth - (w - el.offsetLeft)) + 'px'
        console.log(el)
    }

}


