<template>
	<view class="search-input-container" :style="{ 'backgroundColor': themeStore.theme.bgColor }">
		<view class="search-input-view flex-acenter" :style="{ 'background-color': themeStore.theme.input.bgColor }">
			<view class="search-input">
				<input
					v-if="!readOnly"
					:value="modelValue"
					:maxlength="20"
					:border="false"
					style="font-size: 26rpx"
					:placeholder="placeholder"
					:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
					@input="handleInput"
				/>
				<view v-else style="font-size: 30rpx" :style="{ 'color': themeStore.theme.input.placeholder }" @click.stop="handleClick">{{ placeholder }}</view>
			</view>
			<view v-if="modelValue && modelValue.length" @click.stop="handleClearClick">
				<theme-image class="clear-icon" src="@/static/search/icon-search-clear.png" mode="aspectFit"></theme-image>
			</view>
			<view>
				<theme-image class="search-icon" src="@/static/icon-search-yellow.png" mode="aspectFit" @click="handleSearchClick"></theme-image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const props = defineProps({
		readOnly: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: String,
			default: ''
		},
    placeholder: {
      type: String,
      default: ''
    }
	})
	const emit = defineEmits(['update:modelValue', 'search', 'searchClick', 'change'])

	const themeStore = useThemeStore()
	
	const handleSearchClick = () => {
		emit('search', props.modelValue)
	}
	
	const handleClick = () => {
		emit('searchClick')
	}
	
	const handleClearClick = () => {
		emit('update:modelValue', '')
		emit('change', '')
	}
	
	const handleInput = (e) => {
		emit('update:modelValue', e.detail.value)
		emit('change', e.detail.value)
	}
</script>

<style lang="scss" scoped>
	.search-input-container {
		position: relative;
		
		.search-input-view {
			border-radius: 20rpx;
			padding: 0rpx 30rpx;
			height: 90rpx;
			
			.search-input {
				flex: 1;
			}
			
			.search-icon {
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
			}
			
			.clear-icon {
				width: 45rpx;
				height: 45rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
			}
		}
	}
</style>
