<template>
	<div class="my-input">
		<span class="decorate"></span>
		<span v-show="icon" :class="['iconfont', icon]"></span>
		<span v-show="before" class="before">{{ before }}</span>
		<input v-bind="$attrs" :value="modelValue" @input="onInput" />
		<span v-show="after" class="after">{{ after }}</span>
	</div>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, watch } from "vue";
	const props = defineProps({
		modelValue: { type: Number, default: 0 },
		icon: { default: "", type: String },
		before: { default: "", type: String },
		after: { default: "", type: String },
	});
	const emit = defineEmits(["update:modelValue", "input"]);
	const onInput = (e) => {
		const value = e.target.value;
		emit("update:modelValue", value);
		emit("input", value);
	};
</script>
<style scoped lang="less">
	.my-input {
		display: flex;
		align-items: center;
		width: 100%;
		border: 1px solid rgba(230, 230, 231, 1);
		border-radius: 3px;
		height: 20px;
		padding: 0 4px 0 2px;
		> .decorate {
			width: 2px;
			background-color: rgba(230, 230, 231, 1);
			border-radius: 3px;
			height: 85%;
			margin-right: 4px;
		}
		> .iconfont {
			font-size: 10px;
			color: #000;
			margin-right: 2px;
		}
		> .before {
			font-size: 12px;
			color: #000;
			margin-right: 2px;
		}
		> .after {
			font-size: 12px;
			color: #000;
		}
		> input {
			font-size: 12px;
			width: 0;
			flex: 1;
			text-align: right;
			outline: none;
			border: none;
			background-color: transparent;
			padding: 0;
		}
	}
</style>
