<template>
  <div class="col-12 row justify-between items-center">
    <n-input
      v-model:value="state.val"
      pair
      separator="-"
      :placeholder="placeholder"
      clearable
      @update:value="handleInputInput"
    />
  </div>
</template>
<script setup>
import {
  reactive,
  onBeforeMount,
  watch,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { debounce } from "lodash-es";
import { processError, processSuccess } from "@/utils/helper/message";
import { getParamsByObj } from "@/utils/helper/form";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;

const emit = defineEmits(["triggerChangeVal"]);
let props = defineProps({
  config: Object,
  clearable: {
    type: Boolean,
    default: () => true,
  },
  disabled: {
    type: Boolean,
    default: () => false,
  },
  placeholder: Array,
  val: {
    type: Array,
    default: () => [null, null],
  },
  clearCount: Number,
});

const state = reactive({
  val: [null, null],
});
watch(
  () => props.val,
  (val) => {
    console.log("watch", props.val);
    state.val = JSON.parse(JSON.stringify(val));
  },
  {
    deep: true,
  }
);
watch(
  () => props.clearCount,
  () => {
    nextTick(() => {
      console.log("clearCount", props.val);
      console.log("clearCount", state.val);
      if (Array.isArray(props.val) && props.val.length > 0) {
        state.val = props.val;
        return;
      }
      state.val[0] = null;
      state.val[1] = null;
    });
  }
);

onBeforeMount(() => {
  state.val = JSON.parse(JSON.stringify(props.val));
});

const handleInputInput = debounce(async (e) => {
  emit("triggerChangeVal", {
    val: [
      state.val[0] === "" ? null : state.val[0],
      state.val[1] === "" ? null : state.val[1],
    ],
  });
}, 500);
</script>

<style lang="scss" scoped>
.ant-input-number {
  border: none !important;
  color: #fff;
}
.ant-input-number-input {
  color: #fff;
}

.ant-input-number:focus,
.ant-input-number-focused {
  box-shadow: none !important;
}
</style>
