<template>
	<mobile-sub-layout :title="pageData.categoryName || $t('search.title')" :bgColor="themeStore.theme.bgColor">
		<view class="search-container" :style="{ 'background-color': themeStore.theme.bgColor }">
			<SearchInput
				readOnly
				@searchClick="handleSearchClick"
			/>
			<!-- <view class="item-sepline-h"></view> -->
			<view class="plr30 ptb30">
				<SearchSegment
					@change="handleSegmentChange"
				/>
			</view>
			<view v-show="pageData.segmentIndex === 0" class="search-all-container">
				<view class="search-all-left flex-column flex-acenter">
					<view v-for="(item, index) in pageData.categoryList" :key="index" @click.stop="handleCategoryClick(item)" class="category-item">
						<theme-image v-if="pageData.selectCategoryId === item.categoryId" :src="item.imageUrlSelected" mode="aspectFit" style="width: 120rpx; height: 120rpx;"/>
						<theme-image v-else :src="item.imageUrlUnselected" mode="aspectFit" style="width: 120rpx; height: 120rpx;"/>
					</view>
				</view>
				<view class="search-all-right">
					<scroll-view
						class="scroll-view-style"
						:scroll-y="true"
						:scroll-with-animation="true"
					>
						<view class="flex-wrap">
							<view v-for="(item, index) in gameList" :key="index" class="mb24">
								<SearchGamesItem
									style="width: 190rpx; height: 195rpx; padding: 0rpx 15rpx;"
									:itemData="item"
								/>
							</view>
						</view>
					</scroll-view>
					<view class="flex-scenter ptb16">
						<Pageable
							:total="pageData.total"
							:current="pageData.current"
							@change="handlePageChange"
						/>
					</view>
				</view>
			</view>
			<view v-show="pageData.segmentIndex === 1">
				<view v-if="gameStore.hotGameList.length" style="padding: 24rpx 15rpx; padding-top: 0rpx">
					<view class="flex-wrap">
						<view
							v-for="(item, index) in gameStore.hotGameList"
							:key="index"
							style="margin-bottom: 20rpx;"
						>
							<SearchGamesItem
								:itemData="item"
								style="width: 180rpx; height: 185rpx; padding: 0rpx 15rpx;"
							/>
						</view>
					</view>
				</view>
				<view v-else>
					<NoDataSearch
						:title="$t('search.message.norecord')"
					/>
				</view>
			</view>
			<view v-show="pageData.segmentIndex === 2">
				<view v-if="gameStore.recentGameList.length" style="padding: 24rpx 15rpx; padding-top: 0rpx">
					<view class="flex-wrap">
						<view
							v-for="(item, index) in gameStore.recentGameList"
							:key="index"
							style="margin-bottom: 20rpx;"
						>
							<SearchGamesItem
								:itemData="item"
								style="width: 180rpx; height: 185rpx; padding: 0rpx 15rpx;"
							/>
						</view>
					</view>
				</view>
				<view v-else>
					<NoDataSearch
						:title="`You haven't played the game yet`"
					/>
				</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, computed } from 'vue'
	import SearchInput from './components/SearchInput'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useGameStore } from '@/store/useGameStore'
	import { requestGameCategoryList, requestGetGameByCategoryAndPage } from '@/api/game.js'
	import SearchGamesItem from '@/pages/home/components/SearchGamesItem'
	import SearchSegment from './components/SearchSegment.vue'
	import NoDataSearch from '@/components/nodata/NoDataSearch'
	import Pageable from '@/components/pageable/Pageable.vue'
	
	const themeStore = useThemeStore()
	const gameStore = useGameStore()
	
	const pageData = reactive({
		segmentIndex: 0,
		categoryName: '',
		selectCategoryId: 0,
		categoryList: [],
		current: 1,
		total: 1
	})
	
	const gameList = computed(() => {
		for (let i = 0; i < pageData.categoryList.length; i++) {
			const item = pageData.categoryList[i]
			if (item.categoryId === pageData.selectCategoryId) {
				return item.gameList || []
			}
		}
		return []
	})
	
	onLoad((option) => {
		pageData.selectCategoryId = Number(option.categoryId)
		pageData.categoryName = option.categoryName || ''
		
		loadSearchPageData()
		loadData()
	})
	
	const loadSearchPageData = async () => {
		await gameStore.getGameSearchData()
	}
	
	const loadData = async () => {
		uni.showLoading({ title: 'Loading' })
		const { code, data } = await requestGameCategoryList()
		uni.hideLoading()
		if (code !== 200) { return }
		pageData.categoryList = data && data.categoryList || []
		loadGameByCategoryId(pageData.selectCategoryId)
	}
	
	const loadGameByCategoryId = async (categoryId) => {
		uni.showLoading({ title: 'Loading' })
		const { code, data } = await requestGetGameByCategoryAndPage({
			categoryId: categoryId,
			page: pageData.current
		})
		uni.hideLoading()
		if (code !== 200) { return }
		pageData.total = data.totalPage
		pageData.categoryList.forEach(el => {
			if (el.categoryId === categoryId) {
				el.gameList = data.gameList || []
			}
		})
	}
	
	const handleCategoryClick = (item) => {
		pageData.selectCategoryId = item.categoryId
		pageData.current = 1
		pageData.total = 1
		loadGameByCategoryId(item.categoryId)
	}
	
	const handleSearchClick = () => {
		uni.navigateTo({
			url: '/pages/search/SearchResult'
		})
	}
	
	const handleSegmentChange = (index) => {
		pageData.segmentIndex = index
	}
	
	const handlePageChange = (index) => {
		pageData.current = index
		loadGameByCategoryId(pageData.selectCategoryId)
	}
</script>

<style lang="scss" scoped>
	.search-container {
		width: 100%;
		// height: calc(100vh - 44rpx);
		overflow: hidden;
		
		.scroll-view-style {
			height: calc(100vh - 524rpx);
			width: 100%;
			overflow: hidden;
		}
		
		.search-all-container {
			display: flex;
			padding-bottom: 30rpx;
			padding-left: 20rpx;
			padding-right: 15rpx;
			
			.search-all-left {
				flex-shrink: 0;
				.category-item{
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 10rpx;
				}
			}
			
			.search-all-right {
				flex: 1;
				padding-left: 15rpx;
			}
		}
	}
</style>