<template>
	<view class="home-games-item-container">
		<view class="item-img-view" @click.stop="handleGameClick">
			<image class="item-img" :src="itemData.imageUrl" mode="aspectFit"></image>
			<theme-image v-if="itemData.cornerMark === 1" class="item-tag-new" src="@/static/icon-new.png"></theme-image>
			<theme-image v-if="itemData.cornerMark === 2" class="item-tag-best" src="@/static/icon-best.png"></theme-image>
			<view v-if="itemData.iconType !== 2" class="item-tag-collect" @click.stop="handleFavoriteClick">
				<theme-image v-if="isFavorite" src="@/static/icon-collection-select.png" style="width: 40rpx; height: 40rpx;"></theme-image>
				<theme-image v-else src="@/static/icon-collection-normal.png" style="width: 40rpx; height: 40rpx;"></theme-image>
			</view>
		</view>
		<view v-if="itemData.imageSize !== 2" class="item-text" :style="{ color: themeStore.theme.text.normal }">
			{{ itemData.name || itemData.gameName }}
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { useGameStore } from '@/store/useGameStore.js'
	import { useUserStore } from '@/store/useUserStore'
	import { requestFavoriteGame, requestGetGameUrlByGame } from '@/api/game.js'
	import { useThemeStore } from '@/store/useThemeStore'
	import { openUrl } from '@/module/utils/openUrl'
	
	const themeStore = useThemeStore()
	const gameStore = useGameStore()
	const userStore = useUserStore()
	
	const props = defineProps({
		itemData: {
			type: Object,
			default: () => {}
		},
		canClick: {  // 是否可以点击
			type: Boolean,
			default: true
		}
	})
	
	const isFavorite = computed(() => {
		for (let i = 0; i < gameStore.favoriteGameList.length; i++) {
			const item = gameStore.favoriteGameList[i]
			if (item.gameId === props.itemData.gameId || item.gameId === props.itemData.id) {
				return true
			}
		}
		return false
	})
	
	const handleFavoriteClick = async () => {
		if (!props.canClick) { return }
		if (!userStore.isLogin) {
			uni.navigateTo({
				url: '/pages/Login/LoginV2'
			})
			return
		}
		uni.showLoading({ title: 'Loading' })
		const { code, data } = await requestFavoriteGame({
			gameId: props.itemData.gameId || props.itemData.id,
			opt: isFavorite.value ? 2 : 1
		})
		uni.hideLoading()
		gameStore.getFavoriteGames()
	}
	
	const handleGameClick = async () => {
		if (!userStore.isLogin) {
			uni.navigateTo({
				url: '/pages/Login/LoginV2'
			})
			return
		}
		if (props.itemData.iconType === 2) {
			uni.navigateTo({
				url: `/pages/search/Search?categoryId=${props.itemData.categoryId}&categoryName=${props.itemData.name || ''}`
			})
		} else {
			uni.showLoading({ title: 'Loading' })
			const gameId = props.itemData.gameId || props.itemData.id
			const name = props.itemData.name || props.itemData.gameName || ''
			uni.navigateTo({
				url: `/pages/webview/GameWeb?gameId=${gameId}&name=${name}`
			})
			
			// const { code, data } = await requestGetGameUrlByGame({
			// 	gameId: gameId
			// })
			// uni.hideLoading()
			// if (code !== 200 && !data) { return }
			// uni.setStorageSync('GAME_URL_KEY', data)
			
			// openUrl(data)
			// uni.navigateTo({
			// 	url: `/pages/webview/GameWebApp?gameId=${gameId}&url=${encodeURIComponent(data)}`
			// })
		}
	}
</script>

<style lang="scss" scoped>
	.home-games-item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		
		.item-img-view {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: block;
		}
		
		.item-img {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
		
		.item-text {
			font-size: 20rpx;
			height: 25rpx;
			margin-top: 10rpx;
			line-height: 1;
			@include text-over(1);
		}
		
		.item-tag-new {
			position: absolute;
			top: 10rpx;
			left: 0rpx;
			width: 70rpx;
			height: 41rpx;
			z-index: 1;
		}
		
		.item-tag-best {
			position: absolute;
			top: 10rpx;
			left: 0rpx;
			width: 65rpx;
			height: 41rpx;
			z-index: 1;
		}
		
		.item-tag-collect {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 1;
		}
	}
</style>
