 /**
 * 过滤中文字符
 * @param {string} value - 输入的值
 * @returns {string} 过滤后的值（不含中文）
 */
export function filterChineseInput(value) {
  if (value == null) return '';
  // 使用正则表达式过滤中文字符
  return value.replace(/[\u4e00-\u9fa5]/g, '');
}

/**
 * 阻止中文输入法输入
 * @param {Event} e - 键盘事件
 */
export function preventChineseInput(e) {
  // 检测是否在输入中文（composition事件）
  if (e.isComposing || e.keyCode === 229) {
    e.preventDefault();
  }
}

/**
 * 中文输入限制的自定义指令
 */
export const ChineseInputDirective = {
  mounted(el, binding, vnode) {
    const input = el.tagName === 'INPUT' ? el : el.querySelector('input');

    if (!input) return;

    // 保存原始值，用于比较
    let lastValue = input.value;

    const handleInput = (e) => {
      const value = e.target.value;
      const filteredValue = filterChineseInput(value);

      // 如果过滤后的值与原值不同，则更新输入框的值
      if (value !== filteredValue) {
        e.target.value = filteredValue;
        // 触发input事件，以便v-model更新
        e.target.dispatchEvent(new Event('input'));
      }
    };

    const handleKeydown = (e) => {
      preventChineseInput(e);
    };

    // 添加事件监听
    input.addEventListener('input', handleInput);
    input.addEventListener('keydown', handleKeydown);

    // 将事件处理函数存储在元素上，以便在unmounted时移除
    el._chineseInputHandlers = {
      input: handleInput,
      keydown: handleKeydown
    };
  },

  unmounted(el) {
    const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
    if (!input || !el._chineseInputHandlers) return;

    // 移除事件监听
    input.removeEventListener('input', el._chineseInputHandlers.input);
    input.removeEventListener('keydown', el._chineseInputHandlers.keydown);
    // 删除存储的处理函数
    delete el._chineseInputHandlers;
  }
};

/**
 * 注册全局指令
 * @param {Vue} Vue - Vue实例
 */
export function installChineseInputDirective(Vue) {
  Vue.directive('chinese-limit', ChineseInputDirective);
}

/**
 * 创建中文输入限制的验证规则
 * @returns {Object} 验证规则对象
 */
export function createChineseValidateRule() {
  return {
    pattern: /^[^\u4e00-\u9fa5]*$/,
    message: "该字段不能包含中文",
    trigger: "change"
  };
}