<template>
	<view class="home-games-all-container">
		<view class="home-games-all-left flex-column flex-acenter">
			<view v-for="(item, index) in pageData.categoryList" :key="index" @click.stop="handleCategoryClick(item)">
				<theme-image v-show="pageData.selectCategoryId === item.labelId" :src="item.imageUrlSelected"
					mode="aspectFit" style="width: 120rpx; height: 120rpx;" />
				<theme-image v-show="pageData.selectCategoryId !== item.labelId" :src="item.imageUrlUnselected"
					mode="aspectFit" style="width: 120rpx; height: 120rpx;" />
			</view>
		</view>
		<view class="home-games-all-right">
			<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false" :scroll-into-view="pageData.inViewId"
				:scroll-with-animation="true" @scroll="handleScroll">
				<view class="flex-wrap" v-for="(item, index) in pageData.categoryList" :key="'item' + index"
					:id="'category' + item.labelId">
					<view v-for="(subItem, subIndex) in item.gameList" :key="'subItem' + subIndex" class="mb24">
						<HomeGamesItem v-if="subItem.imageSize === 1"
							style="width: 178rpx; height: 178rpx; padding: 0rpx 10rpx;" :itemData="subItem" />
						<HomeGamesItem v-if="subItem.imageSize === 2"
							style="width: 560rpx; height: 208rpx; padding: 0rpx 10rpx;" :itemData="subItem" />
						<HomeGamesItem v-if="subItem.imageSize === 3"
							style="width: 285rpx; height: 220rpx; padding: 0rpx 10rpx;" :itemData="subItem" />
					</view>
				</view>
				<view class="w-full space" style="height: 50rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, getCurrentInstance } from 'vue'
import { require } from '@/module/utils/require'
import { requestGameCategoryList, requestGetGameAndCategoryByLabel } from '@/api/game.js'
import HomeGamesItem from './HomeGamesItem.vue'
import { useAppStore } from '@/store/useAppStore'
import { onShow } from '@dcloudio/uni-app'

const pageData = reactive({
	selectCategoryId: 0,
	categoryList: [],
	inViewId: ''
})

const appStore = useAppStore()

// onMounted(() => {
// 	loadData()
// })


const preLoadImg = (url) => {
	// #ifdef H5
	const image = new Image();
	image.src = url;
	// #endif
	// #ifdef APP-PLUS
	uni.getImageInfo({
		src: url,
		complete() {

		}
	})
	// #endif
}

/*
	"labelList": [{
		"imageUrlSelected": "",
		"imageUrlUnselected": "",
		"labelId": 0,
		"labelName": ""
	}]
 */
const loadData = async () => {

	const { code, data } = await requestGameCategoryList()
	if (code !== 200) { return }
	if (!data.labelList || !data.labelList.length) { return }

	const categoryList = data.labelList

	const gameList = getGameCategoryList(data.gameAndCategoryList, data.firstLabelGameList, data.categoryList)
	categoryList[0].gameList = gameList

	pageData.selectCategoryId = categoryList[0].labelId
	pageData.categoryList = categoryList

	pageData.categoryList.forEach((el) => {
		preLoadImg(el.imageUrlSelected);
		preLoadImg(el.imageUrlUnselected);
		if (el.gameList) el.gameList.forEach(game => preLoadImg(game.imageUrl));

	})

	if (categoryList.length > 1) {
		categoryList.forEach((el, index) => {
			if (index < 1) { return }
			loadDataByLabelId(el.labelId)
		})
	}
}

const loadDataByLabelId = async (labelId) => {
	if (!labelId) { return }
	const { code, data } = await requestGetGameAndCategoryByLabel({
		labelId: labelId
	})
	if (code !== 200) { return }
	const gameList = getGameCategoryList(data.gameAndCategoryList, data.gameList)

	pageData.categoryList.forEach(el => {
		if (el.labelId === labelId) {
			el.gameList = gameList
			getElementOffsetTop()
		}
	})
}

const getGameCategoryList = (originList, gameList, categoryList) => {
	if (!originList) { return [] }
	originList.forEach(el => {
		if (el.iconType === 1 && gameList && gameList.length) {
			gameList = gameList.filter(el => {
				return !!el.status
			})
			gameList.forEach(subEl => {
				if (subEl.gameId === el.id) {
					el.name = subEl.gameName
				}
			})
		}
		if (el.iconType === 2 && categoryList && categoryList.length) {
			categoryList.forEach(subEl => {
				if (subEl.categoryId === el.id) {
					el.name = subEl.categoryName
				}
			})
		}
	})
	return originList.filter(el => {
		return !!el.imageUrl
	})
}

const getElementOffsetTop = () => {
	nextTick(() => {
		let index1Top = 0
		pageData.categoryList.forEach((el, index) => {
			// const instance = getCurrentInstance()
			uni.createSelectorQuery().select('#category' + el.labelId).boundingClientRect((element) => {
				if (!element) { return }
				if (index === 0) {
					index1Top = element.top + 1
				}
				el.offsetTop = element.top - index1Top
			}).exec()
		})
	})
}

const handleCategoryClick = (item) => {
	pageData.selectCategoryId = item.labelId
	nextTick(() => {
		pageData.inViewId = 'category' + item.labelId
	})
}

const handleScroll = (e) => {
	pageData.categoryList.forEach((el, index) => {
		const scrollTop = e.detail.scrollTop
		const offsetTop1 = el.offsetTop
		let offsetTop2 = 0
		if (index < pageData.categoryList.length - 1) {
			const offsetTop2 = pageData.categoryList[index + 1].offsetTop
		}
		if (scrollTop >= offsetTop1 && scrollTop < offsetTop2 || scrollTop >= offsetTop1 && offsetTop2 === 0) {
			pageData.selectCategoryId = el.labelId
		}

		// const offsetTop1 = document.getElementById('category' + el.labelId).offsetTop
		// let offsetTop2 = 0
		// if (index < pageData.categoryList.length - 1) {
		// 	const labelId2 = pageData.categoryList[index + 1].labelId
		// 	offsetTop2 = document.getElementById('category' + labelId2).offsetTop
		// }
		// const scrollTop = e.detail.scrollTop
		// if (scrollTop >= offsetTop1 && scrollTop < offsetTop2 || scrollTop >= offsetTop1 && offsetTop2 === 0) {
		// 	pageData.selectCategoryId = el.labelId
		// }
	})
}
onMounted(() => {
	loadData()
})

</script>

<style lang="scss" scoped>
.home-games-all-container {
	display: flex;
	// padding-top: 30rpx;
	// padding-left: 20rpx;
	// padding-right: 15rpx;
	padding: 20rpx 28rpx;
	padding-bottom: 0;

	.scroll-view {
		height: 900rpx;
	}

	.home-games-all-left {
		flex-shrink: 0;
	}

	.home-games-all-right {
		flex: 1;
		padding-left: 20rpx;
	}
}
</style>