<template>
	<view class="normal-input-container" :style="{ 'background-color': themeStore.theme.input.bgColor  }">
		<input
			v-if="!readOnly"
			:value="modelValue"
			:maxlength="maxlength"
			:border="false"
			:type="type"
			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"
		/>
		<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 { nextTick } from 'vue';
	
	const props = defineProps({
		readOnly: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: String,
			default: ''
		},
		maxlength: {
			type: Number,
			default: 20
		},
		placeholder: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text'
		},
		reg: {
			default: null
		}
	})
	const emit = defineEmits(['update:modelValue', 'change'])
	const themeStore = useThemeStore()
	
	const handleClearClick = () => {
		emit('update:modelValue', '')
		emit('change', '')
	}
	
	const handleInput = (e) => {
		let value = e.detail.value + ''
		// console.log(111, value)
		// if (props.reg) {
		// 	value = value.replace(props.reg, '')
		// 	console.log(222, value)
		// }
		nextTick(() => {
			emit('update:modelValue', value)
			emit('change', value)
		})
	}
</script>

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