<template>
  <FlexCol gap="gap.md">
    <FlexRow wrap justify="space-around">
      <Touchable 
        v-for="game in gamesLoader.content.value" :key="game.id" 
        position="relative"
        :touchable="game.unlock"
        :innerStyle="{
          width: 'calc(50% - 50rpx)',
          height: '480rpx',
          backgroundImage: `url(${game.image})`,
          backgroundSize: 'contain',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
        }"
        @click="openGame(game)"
      >
        <FlexCol v-if="!game.unlock" position="absolute" center :inset="0" :zIndex="2" backgroundColor="rgba(225, 245, 250, 0.5)">
          <BackgroundBox center :width="100" :height="50" backgroundImage="https://xy.wenlvti.net/app_static/images/home/games/UnlockButton.png">
            <Text text="待解锁" fontConfig="contentText" color="white" />
          </BackgroundBox>
        </FlexCol>
        <FlexCol position="absolute" center :left="60" :right="60" :bottom="30" :zIndex="1">
          <BackgroundBox center :width="300" :height="80" backgroundImage="https://xy.wenlvti.net/app_static/images/home/games/NameBadge.png">
            <Text :text="game.name" fontConfig="contentText" color="white" />
            <Height :height="20" />
          </BackgroundBox>
        </FlexCol>
      </Touchable>
    </FlexRow>
  </FlexCol>
</template>

<script setup lang="ts">
import Text from '@/components/basic/Text.vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import { navTo } from '@/components/utils/PageAction';

const gamesLoader = useSimpleDataLoader(async () => {
  const games = [
    {
      id: 1,
      name: '知识竞赛',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
      link: 'https://mn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard',
      unlock: true,
    },
    {
      id: 2,
      name: '乡源寻美景',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games2.png',
      unlock: false,
    },
    {
      id: 3,
      name: '农耕小拼图',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games3.png',
      unlock: false,
    },
    {
      id: 4,
      name: '乡情口令接龙',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games4.png',
      unlock: false,
    },
    {
      id: 5,
      name: '农耕小拼图',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games5.png',
      unlock: false,
    },
    {
      id: 6,
      name: '乡情口令接龙',
      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games6.png',
      unlock: false,
    },
  ];
  return games;
});

const openGame = (game: { link?: string }) => {
  if (game.link) {
    navTo('/pages/article/web/ewebview', {
      url: 'https://mn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard'
    });
  }
};
</script>
