import Vue from "vue"
import lang from "../lang/lang"

Vue.directive('tip', {
    bind: (el, binding, vnode)=> {
        let tipEle=document.createElement("h3");
        tipEle.innerHTML="?"
        tipEle.className="form_item_tip";
        el.appendChild(tipEle)
        let tipContent=binding.expression;
        if(binding.arg=="code"){
            tipContent = lang[binding.expression];
        }
        tipEle.addEventListener("mouseover",function (ev) {
            let tip=document.getElementById("tip") as any;
            tip.innerHTML=tipContent;
            tip.style.display="block";
            let w=document.documentElement.clientWidth;
            let h=document.documentElement.clientHeight;
            if(ev.clientX+210<=w){
                tip.style.left=ev.clientX+10+"px";
            }
            if(ev.clientY+tip.offsetHeight<=h){
                tip.style.top=ev.clientY+"px";
                tip.style.bottom='auto'
            }else{
                tip.style.top="auto";
                tip.style.bottom=ev.clientY+tip.offsetHeight-h +'px';
            }
        })
        tipEle.addEventListener("mouseout",function (ev) {
            let tip=document.getElementById("tip") as any;
            tip.style.display="none";
        })

    }
})