//加載需要的樣式
require("../assets/styles/dialogDrag.scss");
import Vue from 'vue';
// 全屏
Vue.directive('full', {
    bind (el,binding) {
        setTimeout(() => {
            console.log(document.getElementsByClassName("el-dialog"));
            let dialogList = document.getElementsByClassName("el-dialog")
            let dialog = null
            if(dialogList && dialogList.length > 0) {
                // 頁(yè)面有多個(gè)dialog 找有寬高的 確定為當(dāng)前打開(kāi)的彈窗
                dialogList = Array.from(dialogList)
                dialogList.forEach(item => {
                    if(item.offsetHeight>0 && item.offsetWidth > 0 && item.offsetHeight) {
                        console.log(item,'itemitem');
                        dialog = item
                    }
                })
            } else {
                dialog = document.getElementsByClassName("el-dialog")[0];
            }
            console.log(dialog,'dialogdialog');
            //初始化不最大化
            el.fullscreen = false;
    
            //獲取彈窗的初始寬高遭居，這里不設(shè)置默認(rèn)高度瘫拣，設(shè)置默認(rèn)高度會(huì)影響頁(yè)面的樣式
            let defaultWidth = dialog.style.width;
            // let defaultHeight = (dialog.style.height = binding.value || "100vh");
    
            //獲取彈窗頭，加上放大，縮小圖標(biāo)
            // let dialogHeader = document.getElementsByClassName("el-dialog__header")[0];
            let dialogHeader = dialog.childNodes[0]; // 默認(rèn)獲取當(dāng)前彈窗的第一個(gè)子節(jié)點(diǎn) 理論上就是表頭
            //修改彈窗表頭樣式
            dialogHeader.classList.add("dialog_header");
            //防止標(biāo)題被選中
            dialogHeader.onselectstart = () => false;
    
            //通過(guò)輸出表頭氧骤，可以看出關(guān)閉按鈕是一個(gè)button
            let maxOrMinList = document.getElementsByClassName("max_or_min");
    
            //防止重復(fù)添加
            let maxOrMin = document.createElement("button");
            //放大、縮小按
            maxOrMin.className += "el-dialog__headerbtn max_or_min";
            maxOrMin.innerHTML = `<i class="el-icon-full-screen"/></i>`;
    
            //給按鈕添加事件，實(shí)現(xiàn)放大和縮小
            maxOrMin.onclick = () => {
                if (el.fullscreen) {
                    //縮小
                    dialog.style.marginTop = "50vh";
                    dialog.style.width = defaultWidth;
                    dialog.style.height = "auto";
                    maxOrMin.innerHTML = `<i class="el-icon-full-screen"/></i>`;
                } else {
                    //放大
                    dialog.style.marginTop = "50vh";
                    dialog.style.width = "100%";
                    dialog.style.height = "100%";
                    dialog.style.top = "0px";
                    maxOrMin.innerHTML = `<i class="el-icon-copy-document"/></i>`;
                    console.log(dialog,'dialog2');
                }
                dialog.className += " is-fullscreen"
                el.fullscreen = !el.fullscreen;
            };
    
            if (maxOrMinList.length == 0) {
                //將按鈕插入彈窗頭部
                dialogHeader.appendChild(maxOrMin);
            }
        },500)
        
    }
})
// v-dialogDrag: 位置拖拽
Vue.directive('dialogDrag', {
    bind (el, binding, vnode, oldVnode) {
      const dialogHeaderEl = el.querySelector('.el-dialog__header')
      const dragDom = el.querySelector('.el-dialog__wrapper')
      dialogHeaderEl.style.cursor = 'move'
      // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
  
      dialogHeaderEl.onmousedown = (e) => {
        // 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop
  
        // 獲取到的值帶px 正則匹配替換
        let styL, styT
  
        // 注意在ie中 第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為px
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/px/g, '')
          styT = +sty.top.replace(/px/g, '')
        }
  
        document.onmousemove = function (e) {
          // 通過(guò)事件委托，計(jì)算移動(dòng)的距離
          const l = e.clientX - disX
          const t = e.clientY - disY
  
          // 移動(dòng)當(dāng)前元素
          dragDom.style.left = `${l + styL}px`
          // 判斷彈窗位置滓侍，防止彈窗頭部移出可視區(qū)
          dragDom.style.top = `${(t + styT) < 0 ? 0 : t + styT}px`
        }
  
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
})
  
// v-dialogDragWidth: 彈窗寬度拖大 拖小 位置在右下角 添加dom<div class="pointRB" v-dialogDragWidth></div>
Vue.directive('dialogDragWidth', {
    bind (el) {
        // Vue.nextTick(() => {
            let dragDom = document.getElementsByClassName("el-dialog")[0];
            el.style.cursor = 'se-resize'
            el.onmousedown = (e) => {
                // 鼠標(biāo)按下蒋川，在原來(lái)頁(yè)面上增加透明遮罩，防止部分元素例如iframe監(jiān)聽(tīng)不到鼠標(biāo)事件
                const mask = document.createElement('div')
                mask.setAttribute('style', 'position:fixed;top:0px;bottom:0px;left:0px;right:0px;background:rgba(0,0,0,0)')
                document.body.appendChild(mask)
                // 計(jì)算當(dāng)前元素距離可視區(qū)的距離
                const disX = e.clientX - el.offsetLeft
                const disY = e.clientY - el.offsetTop
                document.body.onmousemove = function (e) {
                    e.preventDefault() // 移動(dòng)時(shí)禁用默認(rèn)事件
            
                    // 通過(guò)事件委托撩笆，計(jì)算移動(dòng)的距離
                    const l = e.clientX - disX
                    const h = e.clientY - disY
                    dragDom.style.width = `${l}px`
                    // 判斷彈窗高度捺球，防止用于拖動(dòng)的點(diǎn)移出可視區(qū)
                    dragDom.style.height = `${h > document.body.offsetHeight ? document.body.offsetHeight : h}px`
                }
                    document.body.onmouseup = function (e) {
                    document.body.removeChild(mask) // 移除mask遮罩
                    document.body.onmousemove = null
                    document.body.onmouseup = null
                }
            }
        // })
    }
})

//css
// 放大縮小按鈕樣式
.max_or_min {
  color: #909399;
  margin-right: 30px;
  font-size: 15px;
}

// 彈窗表頭樣式
.dialog_header {
  background-color: #e9e9e9;
}
.el-dialog .el-dialog__body{
  position: relative;
  .pointRB{
    width: 10px !important;
    height: 10px !important;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
}