<template>
  <a-form :model="modelRef">
    <a-input-group compact>
      <a-form-item v-bind="validateInfos.min">
        <a-input-number
          v-model:value="modelRef.min"
          style="width: 100px; text-align: center"
          placeholder="最小值"
        />
      </a-form-item>
      <a-form-item>
        <a-input-number
          style="width: 30px; pointer-events: none; background-color: #fff"
          placeholder="~"
          disabled
        />
      </a-form-item>

      <a-form-item v-bind="validateInfos.max">
        <a-input-number
          v-model:value="modelRef.max"
          style="width: 100px; text-align: center"
          placeholder="最大值"
        />
      </a-form-item>
    </a-input-group>
  </a-form>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { Form } from 'ant-design-vue';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'NsRange',
    props: {
      min: {
        type: Object,
        default: () => {},
      },
      max: {
        type: Object,
        default: () => {},
      },
    },
    setup(props) {
      const { min, max } = props;
      const modelRef = reactive({
        min: min.defaultValue || min.defaultValue == 0 ? min.defaultValue : '',
        max: max.defaultValue || max.defaultValue == 0 ? max.defaultValue : '',
      });
      const rulesRef = reactive({
        min: [
          ...min['rules'],
          ...[
            {
              validator: async function (rule, value) {
                if (modelRef['max'] <= value) {
                  return Promise.reject('最小值应小于最大值');
                }
              },
            },
          ],
        ],
        max: [
          ...max['rules'],
          ...[
            {
              validator: async function (rule, value) {
                if (modelRef['min'] >= value) {
                  return Promise.reject('最大值应大于最小值');
                }
              },
            },
          ],
        ],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
      return {
        modelRef,
        validateInfos,
      };
    },
  });
</script>

<style lang="less" scoped></style>