<template>
  <v-card style="height: 200px;width: 95%;margin: auto;">
    <v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
      <v-carousel-item v-for="(img, i) in imgs" :key="i" cover>
        <img :src="img.src" class="tupian">
      </v-carousel-item>
    </v-carousel>
  </v-card>
  <div class="relative1">
    <h class="text-h6">近期比赛</h>
    <h class="text-h6 float-right">更多</h>
    <v-divider thickness="3px"></v-divider>
    <v-card class="card1">
      <div class="text-subtitle-1" style="height: 33px;" v-for="(item, index) in items" :key="index">
        <div class="float-left">
          {{ item.date }}
        </div>
        <div class="float-left zhibiao1" style="width: 20%;">
          {{ item.homeTeam }}
        </div>
        <div class="float-left zhibiao2">
          {{ item.homeScore }}
        </div>
        <div class="float-left">
          :
        </div>
        <div class="float-left zhibiao2">
          {{ item.awayScore }}
        </div>
        <div class="float-left zhibiao1" style="width: 20%;">
          {{ item.awayTeam }}
        </div>
        <div class="float-right">
          <v-icon>mdi-chevron-right</v-icon>
        </div>
        <br>
      </div>
    </v-card>
  </div>
  <div class="relative1">
    <h class="text-h6">队员榜单</h>
    <h class="text-h6 float-right">更多</h>
    <v-divider thickness="3px"></v-divider>
    
    <v-card class="card1">
      
      <div class="text-subtitle-1" style="height: 33px;" v-for="(thing, index) in things" :key="index">
        <div class="float-left zhibiao5">
          {{ thing.number }}. {{ thing.realname }}
        </div>
        <div class="float-left zhibiao3">
          {{ thing.level }}组
        </div>
        <div class="float-left zhibiao4">
          {{ thing.point }}分
        </div>
        <div class="float-right" style="line-height: 32px;">
          <v-icon>mdi-chevron-right</v-icon>
        </div>
        <br>
      </div>
    </v-card>
  </div>


</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';

const imgs = reactive([
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
  },
  {
    src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  },
]
);
const items = ref(new Array());
const things = ref(new Array());

axios.get('/api/games',)
  .then(function (response) {
    const data2 = response.data;
    for (var i = 0; i < data2.Games.length; i++) {
      var item = {
        id: data2.Games[i].id,
        date: data2.Games[i].game_date,
        homeTeam: data2.Games[i].player1_real_name,
        awayTeam: data2.Games[i].player2_real_name,
        homeScore: data2.Games[i].score1,
        awayScore: data2.Games[i].score2,
      }
      items.value[i] = item;
    }
  })
  .catch(function (error) {
    console.log(error);
  })

axios.get("/api/players",)
  .then(function(response){
    const data3=response.data;
    for (var i = 0; i < data3.Players.length; i++) {
      var thing = {
        number: i+1,
        realname: data3.Players[i].player_real_name,
        level: data3.Players[i].group,
        point: data3.Players[i].score,
      }
      things.value[i] = thing;
    }
  })


</script>

<style>
.tupian {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.relative1 {
  /* margin-left: 20px; */
  margin: auto;
  width: 95%;
  margin-top: 10px;
  /* margin-right: 20px; */
}

.card1 {
  margin-top: 4px;
}

.zhibiao1 {
  text-align: center;
}

.zhibiao2 {
  width: 10%;
  text-align: center;
}

.zhibiao3 {
  width: 20%;
  text-align: center;
}

.zhibiao4 {
  width: 20%;
  /* text-align: center; */
}

.zhibiao5 {
  width: 75px;
  /* text-align: center; */
}
</style>