<template>
  <a-input-group>
    <a-input :value="beginValue" style="width: calc(50% - 15px)" placeholder="最小值" @change="handleChangeBegin" />
    <a-input style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff" placeholder="~" disabled />
    <a-input :value="endValue" style="width: calc(50% - 15px); border-left: 0" placeholder="最大值" @change="handleChangeEnd" />
  </a-input-group>
</template>

<script>
  /**
   * 查询条件用-数值范围查询
   */
  import { ref, watch } from 'vue';
  import { Form } from 'ant-design-vue';
  import { propTypes } from '@/utils/propTypes';

  export default {
    name: 'RangeNumber',
    props: {
      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    },
    emits: ['change', 'update:value'],
    setup(props, { emit }) {
      const beginValue = ref('');
      const endValue = ref('');
      const formItemContext = Form.useInjectFormItemContext();

      function handleChangeBegin(e) {
        beginValue.value = e.target.value;
        emitArray();
      }

      function handleChangeEnd(e) {
        endValue.value = e.target.value;
        emitArray();
      }

      function emitArray() {
        let arr = [];
        let begin = beginValue.value || '';
        let end = endValue.value || '';
        arr.push(begin);
        arr.push(end);
        emit('change', arr);
        emit('update:value', arr);
        formItemContext.onFieldChange();
      }

      watch(
        () => props.value,
        (val) => {
          if (val && val.length == 2) {
            beginValue.value = val[0];
            endValue.value = val[1];
          } else {
            beginValue.value = '';
            endValue.value = '';
          }
        },
        { immediate: true }
      );

      return {
        beginValue,
        endValue,
        handleChangeBegin,
        handleChangeEnd,
      };
    },
  };
</script>

<style scoped></style>
