import { defineComponent, computed } from 'vue';
import UInput from '../input/index';
import Minus from './util/Minus.vue';
import Plus from './util/Plus.vue';
const inputNumber = defineComponent({
    name: 'inputNumber',
    props: {
        size: {
            type: String,
            default: 'medium'
        },
        value: {
            type: Number,
            default: 0
        },
        max: {
            type: Number
        },
        min: {
            type: Number,
            default: 0
        },
        step: {
            type: Number,
            default: 1
        }
    },
    emits: ['update:value', 'change', 'input', 'increase', 'decrease'],
    setup(props, { slots, emit }) {
        const inputNumberSize = computed(() => {
            return 'u-input-number-size-' + props.size;
        });
        const filterValue = (value) => {
            if (props.min != undefined && value < props.min) {
                value = props.min;
            }
            if (props.max && value > props.max) {
                value = props.max;
            }
            return value;
        };
        const onValueChange = (value) => {
            let numberValue = Number.parseInt(value) || 0;
            numberValue = filterValue(numberValue);
            emit('change', numberValue);
            emit('update:value', numberValue);
        };
        const decreaseValue = () => {
            let numberValue = Number.parseInt(props.value) - props.step;
            numberValue = filterValue(numberValue);
            emit('decrease', numberValue);
            emit('update:value', numberValue);
        };
        const increaseValue = () => {
            let numberValue = Number.parseInt(props.value) + props.step;
            numberValue = filterValue(numberValue);
            emit('increase', numberValue);
            emit('update:value', numberValue);
        };
        return () => (<div class={["u-input-number", inputNumberSize.value]}>
                <span onClick={decreaseValue} class="u-input-number-box u-input-number-decrease">
                    <Minus />
                </span>
                <UInput size={props.size} value={props.value} onUpdate:value={onValueChange}/>
                <span onClick={increaseValue} class="u-input-number-box u-input-number-increase">
                    <Plus />
                </span>
            </div>);
    }
});
export default inputNumber;