import { nextTick } from "vue";



//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//自定义指令
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//dialog
export const dialogdrag = (el) => {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');

    dialogHeaderEl.style.cursor = 'move';
    const dragDomCurrentStyle = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

    dialogHeaderEl.onmousedown = (e) => {
        //鼠标坐标
        const mouseXAxis = e.clientX;
        const mouseYAxis = e.clientY;

        //鼠标坐标
        const dialogHeaderElXAxis = dialogHeaderEl.offsetLeft;
        const dialogHeaderElYAxis = dialogHeaderEl.offsetTop;

        const originalDialogHeaderElXAxis = mouseXAxis - dialogHeaderElXAxis;
        const originalDialogHeaderElYAxis = mouseYAxis - dialogHeaderElYAxis;

        //获取浏览器宽度
        const screenWidth = document.body.clientWidth;
        const screenHeight = document.documentElement.clientHeight;

        //获取窗体大小
        const dragDomWidth = dragDom.offsetWidth;
        const dragDomHeight = dragDom.offsetHeight;

        //获取窗体偏移量
        const originalDragDomXAxis = dragDom.offsetLeft;
        const originalDragDomYAxis = dragDom.offsetTop;

        //获取窗体最大偏移量
        const maxDragDomLeft = screenWidth - originalDragDomXAxis - dragDomWidth;
        const maxDragDomTop = screenHeight - originalDragDomYAxis - dragDomHeight;

        //处理窗体样式
        let dragDomCurrentStyleL, dragDomCurrentStyleT;
        if (dragDomCurrentStyle.left.includes('%')) {
            dragDomCurrentStyleL = +document.body.clientWidth * (+dragDomCurrentStyle.left.replace(/\%/g, '') / 100);
            dragDomCurrentStyleT = +document.body.clientHeight * (+dragDomCurrentStyle.top.replace(/\%/g, '') / 100);
        } else {
            dragDomCurrentStyleL = +dragDomCurrentStyle.left.replace(/px/g, '');
            dragDomCurrentStyleT = +dragDomCurrentStyle.top.replace(/px/g, '');
        }

        document.onmousemove = function (e) {
            let targetMoveXAxis = e.clientX - originalDialogHeaderElXAxis;
            let targetMoveYAxis = e.clientY - originalDialogHeaderElYAxis;

            dragDom.style.left = `${targetMoveXAxis + dragDomCurrentStyleL}px`;
            dragDom.style.top = `${targetMoveYAxis + dragDomCurrentStyleT}px`;
        }

        document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}


export const prefixDirective = {
    mounted: function(el, binding) {
      const prefix = binding.value;
      const input = el.querySelector('input');

      if (input) {
        // 使用span元素包裹前缀
        const span = document.createElement('span');
        span.style.userSelect = 'none';
        span.textContent = prefix;
        // 插入到input前面
        el.insertBefore(span, input);
      }
    }
  };


  export const thousandsDirective = {
    mounted: function (el, binding) {
        // 获取数字输入框
        const numberInput = el.getElementsByTagName('input')[0];
        // 创建一个新的 el-input 元素用来展示格式化后的值
        const textInput = document.createElement('input');
        textInput.type = 'text';
        textInput.autocomplete = 'off';
        textInput.classList.add('el-input__inner');
        // 把创建的元素插入到数字框后
        numberInput.insertAdjacentElement('afterend', textInput);
        // 默认效果
        textInput.style.display = 'block';
        numberInput.style.display = 'none';
        // 文本框聚焦时显示原来数字类型框
        textInput.onfocus = (e) => {
            textInput.style.display = 'none';
            numberInput.style.display = 'block';
            // 等待数字框加载成功时聚焦数字框
            nextTick(() => {
                numberInput.focus();
            });
        };
        // 数字框失焦时显示格式化后的值
        numberInput.onblur = (e) => {
            numberInput.style.display = 'none';
            textInput.style.display = 'block';
        };
    },
    updated: function (el, binding) {
        // debugger
        // 数据改变时格式化赋值到隐藏的文本框
        if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
            const numberInput = el.getElementsByTagName('input')[0];
            const textInput = el.getElementsByTagName('input')[1];
            // 同步禁用状态
            const parentClass = el.classList.value;
            if (parentClass.includes('is-disabled')) {
                textInput.setAttribute('disabled', true);
            } else {
                textInput.removeAttribute('disabled');
            }
            // 千分位格式化
            const valueWithoutComma = numberInput.value.replace(/,/g, ''); // 去除千分号的','
            if (valueWithoutComma) {
                // 转换为浮点数
                const floatValue = parseFloat(valueWithoutComma);
                // 格式化为千分位
                textInput.value = floatValue.toLocaleString('zh', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                });
            } else {
                textInput.value = '';
            }
        }
    }
  };