<template>
	<view class="number-editor-wrapper">
		<view class="opt-box center minus" :class="{ disable: min >= modelValue }" @click="minus">
			<text>-</text>
		</view>
		<text v-show="modelValue" class="num center">{{ modelValue }}</text>
		<view class="opt-box center plus" :class="{ disable: max <= modelValue }" @click="plus">
			<text>+</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { toRefs } from "vue";

const props = defineProps({
	modelValue: {
		type: Number,
		default: 0
	},
	max: {
		type: Number,
		default: 99
	},
	min: {
		type: Number,
		default: 1
	}
});

const emits = defineEmits(["update:modelValue"]);

const { modelValue } = toRefs(props);

function plus() {
	if (modelValue.value + 1 <= props.max) {
		emits("update:modelValue", modelValue.value + 1);
	}
}

function minus() {
	if (modelValue.value - 1 >= props.min) {
		emits("update:modelValue", modelValue.value - 1);
	}
}
</script>

<script lang="ts">
export default {
	name: "NumberEditor"
};
</script>

<style lang="scss" scoped>
.center {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.number-editor-wrapper {
	display: inline-block;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	.opt-box {
		flex-shrink: 0;
		width: 1.6em;
		height: 1.6em;
		background: var(--number-box-background, #f5f5f5);
		border-radius: var(--number-box-border-radius, 4rpx);
		& > text {
			font-size: 1.3em;
			font-weight: 700;
			color: var(--number-box-opt-color, #333333);
		}
	}
	.num {
		min-width: 1.2em;
		height: 1.6em;
		padding: 0 0.6em;
		margin: 0 0.15em;
		background: var(--number-box-background, #f5f5f5);
		border-radius: var(--number-box-border-radius, 4rpx);
	}
	.disable {
		color: var(--number-box-opt-color-disable, #b8b6bb);
	}
}
</style>
