<script setup lang="ts">
import { IActionParam, IParam } from '@core';

interface AppNumberRangeProps {
  refFormItem: any;
  name: string;
  value: IParam;
  activeData: IParam;
  editorType: string;
  disabled: boolean;
  precision?: number;
}
const props = withDefaults(defineProps<AppNumberRangeProps>(), {
  precision: 0,
});

//  抛出事件集合
interface EmitEvents {
  (name: 'editorEvent', value: IActionParam): void;
}

//  抛出事件
const emit = defineEmits<EmitEvents>();

/**
 * 值改变
 *
 * @param {string} name
 * @param {*} value
 * @memberof AppNumberRange
 */
const onValueChange = ($event: any, index: number) => {
  let value;
  value = $event;
  if (props.refFormItem?.length == 2) {
    emit('editorEvent', { tag: props.refFormItem[index], action: 'valueChange', data: value });
  }
};

/**
 * 最小值
 *
 * @memberof AppNumberRange
 */
let minValue: any = null;

/**
 * 最大值
 *
 * @memberof AppNumberRange
 */
let maxValue: any = null;

/**
 * Vue生命周期onMounted
 */
onMounted(() => {
  if (props.refFormItem?.length == 2) {
    if (props.activeData[props.refFormItem[0]]) {
      minValue = parseFloat(props.activeData[props.refFormItem[0]]);
    }
    if (props.activeData[props.refFormItem[1]]) {
      maxValue = parseFloat(props.activeData[props.refFormItem[1]]);
    }
  }
});
</script>

<template>
  <div class="app-number-range">
    <a-input-number
      :max="!maxValue && maxValue != 0 ? Infinity : maxValue - 1"
      v-model="minValue"
      :disabled="disabled"
      :precision="precision"
      @change="(value) => {onValueChange(value, 0)}"
    >
    </a-input-number>
    <div class="range-separator"> ~ </div>
    <a-input-number
      :min="minValue + 1"
      v-model="maxValue"
      :disabled="disabled"
      :precision="precision"
      @change="(value) => {onValueChange(value, 1)}"
    >
    </a-input-number>
  </div>
</template>

<style lang="scss">
.app-number-range {
  width: 100%;
  display: flex;
  .range-separator {
    width: 30px;
    font-size: 33px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>