<template>
  <view class="index">
    <!-- <view class="title">游戏大厅</view> -->
    <view class="card_list">
      <view
        class="card_item"
        v-for="item in list"
        :key="item.ID"
        :style="{ backgroundImage: `url(${item.cover})` }"
        @click="toPage(item)"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { getPersonalInfo } from '@/api/user';

const list = ref<any[]>([]);

Taro.useDidShow(() => {
  const token = Taro.getStorageSync('token');
  // url.value = 'https://huakk.jdt168.com/#/pages/index/index';
  if (token) {
    // url.value = `${process.env.TARO_APP_GAME}${Taro.getStorageSync('token')}`;
    getUserInfo();
    getList();
  } else {
    Taro.showToast({
      title: '请先登录,再尝试进入游戏大厅。',
      icon: 'none',
    });
    setTimeout(() => {
      Taro.switchTab({
        url: '/pages/index/index',
      });
    }, 1000);
  }
});

const getUserInfo = async () => {
  const res = await getPersonalInfo();
  const userInfo = {
    ...res.data,
    data: {
      ...res.data.data,
      permission: res.data.data.permission
        ? JSON.parse(res.data.data.permission)
        : {},
    },
  };
  Taro.setStorageSync('userInfo', userInfo);
};

const getList = async () => {
  // console.log(process.env.TARO_APP_HALL_API)
  Taro.request({
    url: `${process.env.TARO_APP_HOME}`,
    method: 'POST',
    success: ({ data: res }) => {
      list.value =
        res.data.data.sort((a: any, b: any) => b.sort - a.sort) || [];
    },
  });
};

const toPage = item => {
  Taro.setStorageSync('gameItem', item);
  Taro.navigateTo({
    url: `/pages/game/gamedetail/index`,
  });
};
</script>

<style lang="scss">
.index {
  padding-top: 10px;
  width: 100%;
  height: 100vh;

  .title {
    margin: 60px;
    font-size: 50px;
  }

  .card_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .card_item {
      width: 700px;
      height: 300px;
      background-color: #fff;
      margin-bottom: 20px;
      border-radius: 20px;
      text-align: center;
      line-height: 300px;
      //   background-image: url('../../static/qietu.png');
      background-size: 100% 100%;
      position: relative;

      // .btn {
      //   position: absolute;
      //   width: 150px;
      //   height: 100px;
      //   background-image: url('../../static/an.png');
      //   background-size: 100% 100%;
      //   right: 30px;
      //   bottom: 10px;

      //   &:active {
      //     transform: scale(1.1);
      //   }
      // }
    }
  }
}
</style>
