<!--
 * @Description:一般情况下会有多个 inputNumber 框,默认使用 - 进行分割
-->
<template>
  <InputGroup v-bind="attrs" class="group-flex">
    <template v-for="(item, index) in getOptions" :key="`${item.key}`">
      <FormItem>
        <InputNumber
          :value="item.value"
          :disabled="item.disabled"
          :controls="item.controls"
          :min="item.min"
          :max="item.max"
          :step="item.step"
          :placeholder="item.placeholder"
          @change="val => handleChange(val, item)"
          :class="['number', 'number-' + index]"
        />
      </FormItem>
      <div v-if="index != getOptions.length - 1" class="sparate">
        <a-input
          v-model:value="props.separator"
          class="sparate-input"
          :placeholder="props.separator"
          disabled
        />
      </div>
    </template>
  </InputGroup>
</template>
<script lang="ts">
  import { defineComponent, computed, reactive, watch } from 'vue';
  import { Input, InputNumber, FormItem } from 'ant-design-vue';

  type OptionsItem = {
    min: number;
    max: number;
    value?: number | undefined;
    controls?: boolean;
    disabled?: boolean;
    step?: number | string;
    size?: string;
    placeholder?: string;
    field?: string;
    key?: number;
  };
  type InputNumberItem = OptionsItem;

  export default defineComponent({
    name: 'InputGroupCom',
    components: {
      // eslint-disable-next-line vue/no-unused-components
      InputGroup: Input.Group,
      FormItem,
      // eslint-disable-next-line vue/no-reserved-component-names
      InputNumber,
    },
    props: {
      value: {
        type: [Array, String, Number],
      },
      options: {
        type: Array as PropType<InputNumberItem[]>,
        default: () => [],
      },
      separator: {
        type: String,
        default: '~',
      },
    },
    emits: ['change'],
    setup(props, { attrs, emit }) {
      const collect = reactive({
        min: 0,
        max: 0,
      });

      // Processing options value
      const getOptions = computed((): OptionsItem[] => {
        const { options } = props;
        if (!options || options?.length === 0) return [];
        const ret = options.map(item => {
          item.key = Math.round(Math.random() * 1000);
          if (props.value == undefined || props.value == null) {
            item.value = undefined;
          }
          return item;
        }) as OptionsItem[];
        return ret;
      });

      function handleChange(val, data) {
        if (data.field == 'min') {
          collect.min = val;
        }
        if (data.field == 'max') {
          collect.max = val;
        }
        const arr = [collect.min, collect.max].sort((a, b) => a - b);
        emit('change', arr);
      }

      // 监听赋值
      watch(
        () => attrs.formValues,
        (v: any) => {
          const field = v.field;
          const defaultValue = v?.model?.[field];
          if (defaultValue?.length) {
            props.options.map((ele, idx) => {
              ele['value'] = defaultValue[idx];
              return ele;
            });
          }
        },
      );

      return { getOptions, attrs, handleChange, props };
    },
  });
</script>
<style lang="less" scoped>
  .group-flex {
    display: flex;
    height: 32px;
  }

  .sparate {
    width: 4%;

    &-input {
      width: 30px;
      border-left: 0;
      border-right: 0;
      pointer-events: none;
      background-color: #fff;
    }
  }

  .number {
    width: 100%;

    &-0 {
      border-right: 0;
    }

    &-1 {
      border-left: 0;
    }
  }

  ::v-deep(.ant-form-item) {
    width: 48%;
  }
</style>
