/**
 * 自定义REF 更新组件内部属性
 * @param { reactive } props 组件的属性
 * @param { object } context 组件的上下文
 * @param { number } delay 延迟刷新的时间，单位：毫秒，默认：0
 * @param { string } name 要对应的属性名称，默认：modelValue
 * @returns 自定义的ref
 */
import { customRef } from "vue";

export const debounceRef = (
  props: any,
  context: any,
  delay = 0,
  name = "modelValue"
) => {
  let value = props[name];
  // 计时器
  let timeout: any;
  // 是否输入状态。输入时取 value；输入完毕取 modelValue 属性
  let isInput = false;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        if (isInput) {
          return value;
        } else {
          return props[name];
        }
      },
      set(newValue) {
        isInput = true;
        value = newValue; // 绑定值
        trigger(); // 组件内部刷新模板
        clearTimeout(timeout); // 清掉上一次的计时
        timeout = window.setTimeout(() => {
          // 修改 modelValue 属性
          context.emit(`update:${name}`, newValue); // 提交给父组件
          // 用于区分是哪个组件触发的事件。
          context.emit("my-change", newValue, props.controlId, props.colName);
          isInput = false;
        }, delay);
      },
    };
  });
};