<template>
	<div class="my-input">
		<span class="decorate"></span>
		<span v-show="icon" class="icon">
			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
		</span>
		<span v-show="before" class="before">{{ before }}</span>
		<input
			v-bind="attrs"
			:value="modelValue"
			@input="onInput"
			@change="onChange"
			@copy.stop
			@keydown.stop
		/>
		<span v-show="after" class="after">{{ after }}</span>
	</div>
</template>

<script setup lang="ts">
	import { ref, useAttrs, watch } from 'vue'
	const props = defineProps({
		modelValue: { type: [String, Number] },
		icon: { default: '', type: String },
		iconSize: { default: '10', type: [Number, String] },
		before: { default: '', type: String },
		after: { default: '', type: String }
	})
	const attrs = useAttrs()
	const emit = defineEmits(['update:modelValue', 'input', 'change'])
	const onInput = (e) => {
		var value = e.target.value
		if (attrs.type === 'number') value = Number(value)
		emit('update:modelValue', value)
		emit('input', value)
	}
	const onChange = (e) => {
		var value = e.target.value
		if (attrs.type === 'number') value = Number(value)
		emit('update:modelValue', value)
		emit('change', 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: 1.7px;
		height: 17px;
		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: 12px;
			color: #000;
			margin-right: 2px;
		}
		> .before {
			font-size: 12px;
			color: #000;
			margin-right: 2px;
		}
		> .after {
			font-size: 12px;
			color: #000;
			margin-left: 1px;
		}
		> input {
			font-size: 12px;
			width: 0;
			flex: 1;
			text-align: right;
			outline: none;
			border: none;
			background-color: transparent;
			padding: 0;
			-moz-appearance: textfield; /* Firefox */
			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}
</style>
