import { useVModel } from "@vueuse/core";

import { defineComponent, unref } from "vue";
import { IntervalNumProps } from "./types";

const IntervalNum = defineComponent({
  name: "IntervalNum",
  props: IntervalNumProps,
  emits: ["numChange"],
  setup(props, { emit }) {
    const start = useVModel(props, "startValue");
    const end = useVModel(props, "endValue");
    return () => (
      <ul class="IntervalNum">
        <li class="timeItem">
          <el-input-number
            v-model={start.value}
            min="0"
            max={end.value ? end.value : 99999999}
            precision="0"
            controls-position="right"
            placeholder={props.placeholder ?? "" + "下线"}
            onChange={() => emit("numChange", unref(start), unref(end))}
          />
        </li>
        <li class="timeZhi">至</li>
        <li class="timeItem">
          <el-input-number
            v-model={end.value}
            min={start.value ? start.value : "0"}
            max="99999999"
            precision="0"
            controls-position="right"
            placeholder={props.placeholder ?? "" + "上线"}
            onChange={() => emit("numChange", unref(start), unref(end))}
          />
        </li>
      </ul>
    );
  }
});

export default IntervalNum;
