<template>
  <div class="row justify-around items-center">
    <div style="width:150px">
      <a-input v-model:value="state.val[0]"
               :bordered="config?.bordered"
               :max="config?.max||state.val[1]"
               :min="config?.min"
               :keyboard="true"
               :style="config?.inputStyle"
               :placeholder="placeholder?placeholder[0]:''"
               :precision="config?.precision"
               :controls="config?.controls || false"
               @pressEnter="e=>handleValEnter(e, 'start')"
               @change="e=>handleValChange(e, 'start')"
               :allow-clear="clearable"></a-input>
    </div>

    <div style="border:1px solid #909399;width:20px"></div>

    <div style="width:150px">
      <a-input v-model:value="state.val[1]"
               :bordered="config?.bordered"
               :max="config?.max"
               :min="config?.min||state.val[0]"
               :keyboard="true"
               style="width:150px"
               :style="config?.inputStyle"
               :placeholder="placeholder?placeholder[1]:''"
               :precision="config?.precision"
               :controls="config?.controls || false"
               @pressEnter="e=>handleValEnter(e, 'end')"
               @change="e=>handleValChange(e, 'end')"
               :allow-clear="clearable"></a-input>
    </div>

  </div>
  <div v-if="props.config?.bottomLabel"
       class="row justify-between">
    <div class="col-6 fl-pl-sm">
      <span v-if="state.val[0]!==''&&state.val[0]!==undefined&&state.val[0]!==null">{{'大于等于'+state.val[0] + props.config?.bottomLabel}}</span>
    </div>
    <div class="col-6 fl-pl-md">
      <span v-if="state.val[1]!==''&&state.val[1]!==undefined&&state.val[1]!==null">{{'小于等于'+state.val[1] + props.config?.bottomLabel}}</span>
    </div>
  </div>
</template>
<script setup>
import {
  reactive,
  onBeforeMount,
  watch,
  getCurrentInstance,
  computed,
} 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],
  },
});
watch(
  () => props.val,
  (val) => {
    state.val = JSON.parse(JSON.stringify(val));
  },
  {
    deep: true,
  }
);
const state = reactive({
  val: [null, null],
});

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


const handleValEnter = debounce(async (e, type) => {
  state.val[0] = calcEmpt(state.val[0]) ? null : Number(state.val[0])
  state.val[1] = calcEmpt(state.val[1]) ? null : Number(state.val[1])
  if (state.val[1] !== null && state.val[0] > state.val[1]) {
    state.val[0] = state.val[1]
  }
  emit("triggerChangeVal", state.val);
}, 500);

const handleValChange = debounce(async (e, type) => {
  if (calcEmpt(e.target.value)) {
    state.val[type === "start" ? 0 : 1] = null;
    state.val[0] = calcEmpt(state.val[0]) ? null : Number(state.val[0])
    state.val[1] = calcEmpt(state.val[1]) ? null : Number(state.val[1])
    emit("triggerChangeVal", state.val);
  }
}, 500);
const calcEmpt = (val) => {
  return val === null || val === undefined || val === "";
};
</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>
