import { Directive, DirectiveBinding } from "vue";
/**
 * 只能输入正则匹配的内容-指令
 */
export const clearOnlyRegex: Directive = {
    mounted(el, binding) {
        let isComposing = false;
        let oldValue = "";
        let isManuallyTriggered = false;
        const regex = new RegExp(binding.value) || /^\d+(\.\d{0,3})?$/;

        // 初始化默认值
        el.handlerFocus = (event: Event) => {
            // 初始化默认值
            const target = event.target as HTMLInputElement
            oldValue = target.value
        }
        // 中文键盘输入时不校验值
        el.handleCompositionStart = () => {
            isComposing = true;
        };
        el.handleCompositionEnd = (event: Event) => {
            isComposing = false;
            validateInput(event);
        };
        // 输入事件
        el.handleInput = (event: Event) => {
            if (!isComposing && !isManuallyTriggered) {
                validateInput(event);
            }
        };

        // 正则匹配校验输入的值
        function validateInput(event: any) {
            const value = event.target.value;
            if (value === "" || regex.test(value)) {
                oldValue = value;
            } else {
                event.target.value = oldValue;
                isManuallyTriggered = true;
                event.target.dispatchEvent(new Event("input", { bubbles: true }));
                isManuallyTriggered = false;
            }
        }

        el.addEventListener("compositionstart", el.handleCompositionStart, true);
        el.addEventListener("compositionend", el.handleCompositionEnd, true);
        el.addEventListener("focus", el.handlerFocus, true);
        el.addEventListener("input", el.handleInput, true);
    },
    beforeUnmount(el) {
        el.removeEventListener("compositionstart", el.handleCompositionStart);
        el.removeEventListener("compositionend", el.handleCompositionEnd);
        el.removeEventListener("focus", el.handlerFocus)
        el.removeEventListener("input", el.handleInput);
    },
    // mounted(el, binding: DirectiveBinding) {
    //     const regex = new RegExp(binding.value)
    //     // let oldValue = '';
    //     el.handlerFocus = (event: Event) => {
    //         // 初始化默认值
    //         const target = event.target as HTMLInputElement
    //         el.oldValue = target.value
    //     }
    //     el.handler = (event: Event) => {
    //         const target = event.target as HTMLInputElement
    //         const value = target.value
    //         // 正则匹配
    //         if (regex.test(value)) {
    //             // 如果输入的内容符合规则，则将输入框的值保留之前匹配得内容
    //             el.oldValue = value;
    //         } else {
    //             // 如果输入的内容不符合规则，则清空输入框的值
    //             target.value = el.oldValue || ''
    //         }
    //     }
    //     el.addEventListener("focus", el.handlerFocus, true)
    //     el.addEventListener("input", el.handler, true)
    // },
    // beforeUnmount(el) {
    //     // 销毁输入事件
    //     el.removeEventListener("focus", el.handlerFocus)
    //     el.removeEventListener("input", el.handler)
    //     el.oldValue = null
    // }
};
