<template>
	<mobile-sub-layout :title="$t('search.searchResult')">
		<view class="search-container" :style="{ 'background-color': themeStore.theme.bgColor }">
			<SearchInput v-model="pageData.searchText" @search="handleSearch" @change="handleChange" />

			<view v-if="pageData.isShowResult">
				<view v-if="pageData.searchResultList.length" style="padding: 24rpx 15rpx;"
					:style="{ 'border-top': `1rpx solid ${themeStore.theme.seplineColor}` }">
					<view class="flex-wrap">
						<view v-for="(item, index) in pageData.searchResultList" :key="index"
							style="margin-bottom: 20rpx;">
							<HomeGamesItem :itemData="item"
								style="width: 180rpx; height: 185rpx; padding: 0rpx 15rpx;" />
						</view>
					</view>
				</view>
				<view v-else>
					<NoDataSearch :title="`${$t('search.message.nodata')} '${pageData.searchText}'`" />
				</view>
			</view>

			<view v-else>
				<view v-if="gameStore.recentSearches.length" class="plr30">
					<view class="ptb24" style="font-size: 30rpx;" :style="{ 'color': themeStore.theme.text.normal }">
						{{ $t('search.recentlySearches') }}
					</view>
					<view class="flex-wrap">
						<view v-for="(item, index) in gameStore.recentSearches" :key="index"
							class="flex-acenter flex-scenter plr24 ft13 mr24 mb24" :style="{
								'background-color': themeStore.theme.selectItem.bgColor,
								'color': themeStore.theme.selectItem.text,
								'border-radius': '33rpx',
								'height': '66rpx'
							}" @click.stop="handleTagClick(item)">
							<view>{{ item }}</view>
						</view>
					</view>
				</view>
				<view v-if="gameStore.popularSearches.length" class="plr30 pb24">
					<view class="ptb24" style="font-size: 30rpx;" :style="{ 'color': themeStore.theme.text.normal }">
						{{ $t('search.popularSearches') }}
					</view>
					<view class="flex-wrap">
						<view v-for="(item, index) in gameStore.popularSearches" :key="index"
							class="flex-acenter flex-scenter plr24 ft13 mr24 mb24" :style="{
								'background-color': themeStore.theme.selectItem.bgColor,
								'color': themeStore.theme.selectItem.text,
								'border-radius': '33rpx',
								'height': '66rpx'
							}" @click.stop="handleTagClick(item)">
							<view>{{ item }}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="gameStore.recommendGameList.length" style="padding: 24rpx 15rpx;"
				:style="{ 'border-top': `1rpx solid ${themeStore.theme.seplineColor}` }">
				<view class="pb24 plr16" style="font-size: 30rpx;" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('search.recommentGames') }}
				</view>
				<view class="flex-wrap">
					<view v-for="(item, index) in gameStore.recommendGameList" :key="index"
						style="margin-bottom: 20rpx;">
						<HomeGamesItem :itemData="item" style="width: 180rpx; height: 180rpx; padding: 0rpx 15rpx;" />
					</view>
				</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import SearchInput from './components/SearchInput'
import { useThemeStore } from '@/store/useThemeStore'
import { useGameStore } from '@/store/useGameStore'
import { requestSearchResults } from '@/api/game.js'
import HomeGamesItem from '@/pages/home/components/HomeGamesItem.vue'
import NoDataSearch from '@/components/nodata/NoDataSearch'

const themeStore = useThemeStore()
const gameStore = useGameStore()

const pageData = reactive({
	searchText: '',
	searchResultList: [],
	isShowResult: false
})

onLoad((option) => {
	loadSearchPageData()
})

const loadSearchPageData = async () => {
	await gameStore.getGameSearchData()
}

const handleChange = () => {
	pageData.isShowResult = false
	pageData.searchResultList = []
}

const handleSearch = async () => {
	if (!pageData.searchText) { return }

	const { code, data } = await requestSearchResults({
		words: pageData.searchText
	})
	pageData.searchResultList = data || []
	pageData.isShowResult = true
	loadSearchPageData()
}

const handleTagClick = (item) => {
	pageData.searchText = item
	handleSearch()
}
</script>

<style lang="scss" scoped>
.search-container {
	min-height: 100vh;
}
</style>