<template>
	<view class="search-input-container"
		:style="{ 'backgroundColor': themeStore.theme.bgColor, 'border-bottom': `1rpx solid ${themeStore.theme.seplineColor}` }">
		<view class="search-input-view flex-acenter" :style="{ 'background-color': themeStore.theme.input.bgColor }">
			<theme-image class="search-icon" src="@/static/home/icon-search.png" mode="aspectFit"></theme-image>
			<view class="search-input">
				<input v-if="!readOnly" :value="modelValue" :maxlength="20" :border="false"
					style="font-size: 27rpx;" :style="{color: themeStore.theme.light}" :placeholder="$t('search.searchGames')"
					:placeholder-style="`font-size: 30rpx; color: ${themeStore.theme.input.placeholder}`"
					@input="handleInput" @confirm="handleSearchClick" />
				<view v-else style="font-size: 30rpx" :style="{ 'color': themeStore.theme.input.placeholder }"
					@click.stop="handleClick">{{ $t('search.searchGames') }}</view>
			</view>
			<view v-if="modelValue && modelValue.length" @click.stop="handleClearClick" class="flex justify-end">
				<theme-image class="clear-icon" src="@/static/home/dw_close.png"
					mode="aspectFit"></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: ''
	}
})
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 {
	padding: 30rpx 30rpx;

	.search-input-view {
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		height: 90rpx;

		.search-input {
			flex:1;
			margin-left: 15rpx;
		}

		.search-icon {
			width: 34.6rpx;
			height: 34.6rpx;
			flex-shrink: 0;
		}

		.clear-icon {
			width: 34rpx;
			height: 34rpx;
			flex-shrink: 0;
		}
	}
}
</style>
