<template>
	<view class="money-input-container">
		<view class="input-tag" :style="{ 'color': themeStore.theme.input.icon  }">{{ appStore.currencySign }} </view>
		<input
			v-if="!readOnly"
			:value="modelValue"
			:maxlength="maxlength"
			:border="false"
			type="digit"
			class="input-view"
			style="font-size: 30rpx; height: 80rpx; flex: 1;"
			:style="{ 'color': themeStore.theme.input.text }"
			:placeholder="placeholder"
			:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
			@input="handleInput"
			@blur="handleBlur"
		/>
		<theme-image
			v-if="modelValue && modelValue.length"
			class="input-clear-btn"
			src="@/static/search/icon-search-clear.png"
			mode="aspectFit"
			@click.stop="handleClearClick"
		/>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	
	const props = defineProps({
		readOnly: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: String,
			default: ''
		},
		maxlength: {
			type: Number,
			default: 20
		},
		placeholder: {
			type: String,
			default: ''
		},
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 10000000000
		}
	})
	const emit = defineEmits(['update:modelValue', 'change'])
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const handleClearClick = () => {
		emit('update:modelValue', '')
		emit('change', '')
	}
	
	const handleInput = (e) => {
		emit('update:modelValue', e.detail.value)
		emit('change', e.detail.value)
	}
	
	const handleBlur = (e) => {
		let value = Number(e.detail.value || 0)
		if (value < props.min) {
			value = props.min
		} else if (value > props.max) {
			value = props.max
		}
		emit('update:modelValue', value + '')
		emit('change', value + '')
	}
</script>

<style lang="scss" scoped>
	.money-input-container {
		background-color: #400105;
		height: 80rpx;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		
		.input-tag {
			font-size: 36rpx;
			color: #ffffff;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
		
		.input-view {
			font-weight: 600;
		}
		
		.input-clear-btn {
			width: 45rpx;
			height: 45rpx;
			flex-shrink: 0;
			margin-left: 30rpx;
		}
	}
</style>