<script lang="ts">
import { ref, onMounted, defineComponent, nextTick } from 'vue';
import { isEmpty } from 'src/common/utils';
export default defineComponent({
  setup(props: any) {
    const cellInputRef = ref<any>(null);
    const inputValue = ref<any>(null);
    const value = ref<any>(null);

    onMounted(() => {
      // 编辑开始后
      // 获取输入框焦点
      nextTick(() => {
        value.value = props.params.value;
        inputValue.value = props.params.value;
        cellInputRef.value.focus();
      });
    });

    // 编辑完成后发送到网格的最终值
    const getValue = () => {
      return value.value;
    };

    // 在编辑开始前被调用一次，
    // 以便在编辑开始前给编辑一个取消编辑的机会。
    const isCancelBeforeStart = () => {
      return false;
    };

    // 编辑完成时调用一次（例如，如果按下 Enter）。
    // 如果返回 true，则编辑的结果将被忽略。
    const isCancelAfterEnd = () => {
      // 我们的编辑器将拒绝任何大于 1000 的值
      return inputValue.value > 1000;
    };

    const modelChange = (val: any) => {
      if (!isEmpty(val)) {
        const endStr = val.charAt(val.length - 1);
        if (endStr === '=') {
          const numStr = val.substring(0, val.length - 1);
          if (!isEmpty(numStr)) {
            value.value = Number(numStr) * 2;
          } else {
            value.value = null;
          }
        } else {
          if (Number.isNaN(Number(val))) {
            value.value = null;
          } else {
            value.value = val;
          }
        }
      } else {
        value.value = null;
      }

      if (Number.isNaN(Number(value.value))) {
        value.value = null;
      }
    };

    return {
      cellInputRef,
      inputValue,
      getValue,
      isCancelBeforeStart,
      isCancelAfterEnd,
      modelChange,
    };
  },
});
</script>
<template>
  <div>
    <div class="input-box">
      <q-input
        dense
        square
        filled
        v-model="inputValue"
        ref="cellInputRef"
        @update:model-value="modelChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.input-box {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}
</style>