home.vue

<template>
  <v-card class="relative1" style="height: 200px;" elevation="5">
    <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>
        <a :href="img.link"><img :src="img.src" class="tupian"></a>
        
      </v-carousel-item>
    </v-carousel>
  </v-card>
  <div class="relative1" v-if="my_info.season_play != -2">
    <v-card class="card1" elevation="5">
      <template v-slot:prepend>
        <v-icon size="25px">mdi-tournament</v-icon>
      </template>
      <template v-slot:title>
        <div class="text-h6">{{ my_info.season_name }}赛季</div>
      </template>
      <template v-slot:subtitle>
        <div>已有{{ my_info.players_number }}人加入</div>
      </template>
      <template v-slot:default>
        <v-list v-if="my_info.season_play == 1">
          <v-list-item>
            <div class="d-flex justify-space-between align-center game-item" style="margin-top: -5px;">
              <div>
                <v-avatar size="48px"><img :src="my_info.player_profile_file" class="img2"></v-avatar>
              </div>
              <div class="my-realname-text">{{ my_info.player_real_name }}</div>
              <div class="winrate-text">{{ my_info.winrate }}%</div>
              <div class="games-text">{{ my_info.total_games }}场</div>
              <div class="point-text">{{ my_info.score }}分</div>
              <div class="group-text">{{ my_info.group }}</div>
            </div>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn v-if="my_info.season_play == -1" :loading="season_loading" prepend-icon="mdi-plus-box" color="indigo" variant="text" text="加入赛季"
            @click="season_join"></v-btn>
          <v-btn v-if="my_info.season_play == 0" :disabled="true" prepend-icon="mdi-help-circle" color="green"
            variant="text" text="待审核"></v-btn>
          <v-btn v-if="my_info.season_play == 1" :disabled="true" prepend-icon="mdi-check-circle" color="green"
            variant="text" text="已加入"></v-btn>
        </v-card-actions>
      </template>
    </v-card>
  </div>
  <div class="relative1" v-if="my_info.season_play != -2">
    <v-card class="card1" elevation="5">
      <template v-slot:prepend>
        <v-icon size="25px">mdi-trophy</v-icon>
      </template>
      <template v-slot:title>
        <div class="text-h6">近期比赛</div>
      </template>
      <v-list>
        <v-list-item v-for="(item, index) in items" :key="index" :value="item" @click="getGameInfo(item.id)">
          <template v-slot:default>
            <div class="d-flex justify-space-between align-center game-item">
              <div>
                <v-avatar size="48px"><img :src="item.homeTeam_avatar" class="img2"></v-avatar>
              </div>
              <div class="name-score">
                <div class="score-text">{{ item.homeScore }}</div>
                <div class="name-text">{{ item.homeTeam }}</div>
              </div>
              <div>
                :
              </div>
              <div class="name-score">
                <div class="score-text">{{ item.awayScore }}</div>
                <div class="name-text">{{ item.awayTeam }}</div>
              </div>
              <div>
                <v-avatar size="48px"><img :src="item.awayTeam_avatar" class="img2"></v-avatar>
              </div>
              <div>
                <!-- <div>{{ item.year }}</div> -->
                <div class="game-date-text">{{ item.date }}</div>
              </div>
              <v-icon>mdi-chevron-right</v-icon>
            </div>

          </template>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="indigo" variant="text" href="/my_recentgames.html" text="更多"></v-btn>
      </v-card-actions>

    </v-card>
  </div>
  <div class="relative1" v-if="my_info.season_play != -2">
    <!-- <h class="text-h6">队员榜单</h>
    <v-divider thickness="3px"></v-divider> -->

    <!-- 1组 -->
    <!-- <div style="text-align: center;">A组</div> -->
    <v-card class="card1" elevation="5">
      <template v-slot:prepend>
        <v-icon size="25px">mdi-podium</v-icon>
      </template>
      <template v-slot:title>
        <div class="text-h6">队员榜单</div>
      </template>

      <v-chip-group v-model="group_select" selected-class="text-indigo" mandatory style="margin-left: 10px;">
        <v-chip v-for="group in groups" :key="group" :text="group" :value="group"></v-chip>
      </v-chip-group>
      <v-window v-model="group_select">
        <v-window-item :key="1" :value="'A组'">
          <v-list>
            <v-list-item v-for="(group_1, index) in group1" :key="index" :value="group_1"
              @click="goto_space(group_1.id)">
              <template v-slot:default>
                <div class="d-flex justify-space-between align-center game-item">
                  <div>
                    <v-avatar size="48px"><img :src="group_1.avatar" class="img2"></v-avatar>
                  </div>
                  <div class="realname-text">{{ group_1.realname }}</div>
                  <div class="winrate-text">{{ group_1.winrate }}%</div>
                  <div class="games-text">{{ group_1.games }}场</div>
                  <div class="point-text">{{ group_1.point }}分</div>
                  <v-icon>mdi-chevron-right</v-icon>
                </div>
              </template>
            </v-list-item>
          </v-list>
        </v-window-item>
        <v-window-item :key="2" :value="'B组'">
          <v-list>
            <v-list-item v-for="(group_2, index) in group2" :key="index" :value="group_2"
              @click="goto_space(group_2.id)">
              <template v-slot:default>
                <div class="d-flex justify-space-between align-center game-item">
                  <div>
                    <v-avatar size="48px"><img :src="group_2.avatar" class="img2"></v-avatar>
                  </div>
                  <div class="realname-text">{{ group_2.realname }}</div>
                  <div class="winrate-text">{{ group_2.winrate }}%</div>
                  <div class="games-text">{{ group_2.games }}场</div>
                  <div class="point-text">{{ group_2.point }}分</div>
                  <v-icon>mdi-chevron-right</v-icon>
                </div>
              </template>
            </v-list-item>
          </v-list>
        </v-window-item>
        <v-window-item :key="3" :value="'C组'">
          <v-list>
            <v-list-item v-for="(group_3, index) in group3" :key="index" :value="group_3"
              @click="goto_space(group_3.id)">
              <template v-slot:default>
                <div class="d-flex justify-space-between align-center game-item">
                  <div>
                    <v-avatar size="48px"><img :src="group_3.avatar" class="img2"></v-avatar>
                  </div>
                  <div class="realname-text">{{ group_3.realname }}</div>
                  <div class="winrate-text">{{ group_3.winrate }}%</div>
                  <div class="name-score">{{ group_3.games }}场</div>
                  <div class="date-text">{{ group_3.point }}分</div>
                  <v-icon>mdi-chevron-right</v-icon>
                </div>
              </template>
            </v-list-item>
          </v-list>
        </v-window-item>
      </v-window>
    </v-card>
  </div>
  <v-dialog v-model="dialog1" width="auto">
    <v-card width="300px">
      <v-card-title>
        {{ cardtitle }}
      </v-card-title>
      <v-card-text>
        {{ cardtext }}
      </v-card-text>
      <template v-slot:actions>
        <v-btn class="ms-auto" variant="text" color="indigo" text="确定" @click="dialog1 = false"></v-btn>
      </template>
    </v-card>
  </v-dialog>
  <v-dialog v-model="game_dialog" width="auto">
    <v-card width="300px">
      <template v-slot:prepend>
        <v-icon size="25px">mdi-trophy</v-icon>
      </template>
      <template v-slot:title>
        <div class="text-h6">比赛详情</div>
      </template>
      <template v-slot:subtitle>
        <div>{{ game_detail.game_date }}</div>
      </template>
      <template v-slot:default>
        <div class="d-flex justify-space-between align-center gamedetail-item">
          <div>
            <v-avatar size="48px"><img :src="game_detail.player1_profile_file" class="img2"></v-avatar>
          </div>
          <div class="name-score">
            <div class="score-text">{{ game_detail.score1 }}</div>
            <div class="name-text">{{ game_detail.player1_real_name }}</div>
          </div>
          <div>
            :
          </div>
          <div class="name-score">
            <div class="score-text">{{ game_detail.score2 }}</div>
            <div class="name-text">{{ game_detail.player2_real_name }}</div>
          </div>
          <div>
            <v-avatar size="48px"><img :src="game_detail.player2_profile_file" class="img2"></v-avatar>
          </div>
        </div>
        <div class="d-flex justify-space-between align-center gamedetail-item">
          <div class="name-score">
            <div class="text-h6">发起:</div>
          </div>
          <div>{{ game_detail.laucher_real_name }}</div>
          <div class="name-text">{{ game_detail.lauch_date }}</div>
        </div>
        <div class="d-flex justify-space-between align-center gamedetail-item">
          <div class="name-score">
            <div class="text-h6">审核:</div>
          </div>
          <div>{{ game_detail.confirmer_real_name }}</div>
          <div class="name-text">{{ game_detail.confirm_date }}</div>
        </div>
      </template>
      <template v-slot:actions>
        <v-btn class="ms-auto" variant="text" color="indigo" text="确定" @click="game_dialog = false"></v-btn>
      </template>
    </v-card>
  </v-dialog>
</template>



<script setup>
import { ref, watch } 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 imgs = ref(new Array());
const items = ref(new Array());
const group1 = ref(new Array());
const group2 = ref(new Array());
const group3 = ref(new Array());
const players = ref(new Array());
const groups = ref(['A组', 'B组', 'C组']);
const group_select = ref('A组');
const my_info = ref({
  season_id: 0,
  season_name: '',
  players_number: 0,
  score: 0,
  group: 0,
  player_real_name: '',
  player_profile_file: '',
  winrate: 0,
  total_games: 0,
  season_play: -1,
});
const game_detail = ref({
  game_date: "",
  player1_real_name: "",
  player1_profile_file: "",
  score1: 0,
  player2_real_name: "",
  player2_profile_file: "",
  score2: 0,
  laucher_real_name: "",
  laucher_profile_file: "",
  lauch_date: "",
  confirmer_real_name: "",
  confirmer_profile_file: "",
  confirm_date: "",
  game_type: 0,
});
const game_dialog = ref(false);
const season_loading = ref(false);

function formatDate(date) {
  var d = new Date(date),
    month = '0' + (d.getMonth() + 1),
    day = '' + d.getDate();
  // year = d.getFullYear();

  return [month + '/' + day].join(''); // 返回形如 MM/DD 的字符串
}

function formatYear(date) {
  var d = new Date(date),
    // month = '0' + (d.getMonth() + 1);
    // day = '' + d.getDate();
    year = d.getFullYear();

  return [year].join(''); // 返回形如 MM/DD 的字符串
}

function refresh() {
  axios.get('/api/getCarousel')
    .then(function(response){
      const data7 = response.data;
      imgs.value.length = 0;
      for(var i = 0; i < data7.Carousels_info.length; i++){
        var carousel_img = {
          src: data7.Carousels_info[i].src,
          link: data7.Carousels_info[i].link,
        }
        imgs.value[i] = carousel_img;
      }
    })
    .catch(function(error){
      console.log(error);
    })
  axios.get('/api/mySeasonInfo',)
    .then(function (response) {
      const data4 = response.data;
      my_info.value.season_play = data4.Season_Play;
      my_info.value.season_name = data4.Current_season.season_name;
      my_info.value.players_number = data4.Current_season.players_number;
      my_info.value.score = data4.SeasonInfo.score;
      my_info.value.group = data4.SeasonInfo.group;
      my_info.value.player_real_name = data4.SeasonInfo.player_real_name;
      my_info.value.player_profile_file = data4.SeasonInfo.player_profile_file;
      my_info.value.winrate = data4.SeasonInfo.winrate;
      my_info.value.total_games = data4.SeasonInfo.total_games;
      if (my_info.value.group == 1) {
        my_info.value.group = 'A组'
      }
      if (my_info.value.group == 2) {
        my_info.value.group = 'B组'
      }
      if (my_info.value.group == 3) {
        my_info.value.group = 'C组'
      }
    })
    .catch(function (error) {
      console.log(error);
    })

  axios.get('/api/games',)
    .then(function (response) {
      const data2 = response.data;
      var length1 = 4;
      if (length1 > data2.Games.length) {
        length1 = data2.Games.length
      }
      items.value.length = 0;
      for (var i = 0; i < length1; i++) {
        var item = {
          id: data2.Games[i].id,
          year: formatYear(data2.Games[i].game_date),
          date: formatDate(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,
          homeTeam_avatar: data2.Games[i].player1_profile_file,
          awayTeam_avatar: data2.Games[i].player2_profile_file,
        }
        items.value[i] = item;
      }
    })
    .catch(function (error) {
      console.log(error);
    })

  axios.get("/api/player_ranking",)
    .then(function (response) {
      const data3 = response.data;
      var length2 = 5;
      var length3 = 5;
      var length4 = 5;
      if (length2 > data3.Group_1.length) {
        length2 = data3.Group_1.length
      }
      if (length3 > data3.Group_2.length) {
        length3 = data3.Group_2.length
      }
      if (length4 > data3.Group_3.length) {
        length4 = data3.Group_3.length
      }
      for (var i = 0; i < length2; i++) {
        var group_1 = {
          number: i + 1,
          id: data3.Group_1[i].player_id,
          realname: data3.Group_1[i].player_real_name,
          games: data3.Group_1[i].total_games,
          point: data3.Group_1[i].score,
          winrate: data3.Group_1[i].winrate,
          avatar: data3.Group_1[i].player_profile_file
        }
        group1.value[i] = group_1;
      }
      for (var j = 0; j < length3; j++) {
        var group_2 = {
          number: j + 1,
          id: data3.Group_2[j].player_id,
          realname: data3.Group_2[j].player_real_name,
          games: data3.Group_2[j].total_games,
          point: data3.Group_2[j].score,
          winrate: data3.Group_2[j].winrate,
          avatar: data3.Group_2[j].player_profile_file
        }
        group2.value[j] = group_2;
      }
      for (var k = 0; k < length4; k++) {
        var group_3 = {
          number: k + 1,
          id: data3.Group_3[k].player_id,
          realname: data3.Group_3[k].player_real_name,
          games: data3.Group_3[k].total_games,
          point: data3.Group_3[k].score,
          winrate: data3.Group_3[k].winrate,
          avatar: data3.Group_3[k].player_profile_file
        }
        group3.value[k] = group_3;
      }
    })
    .catch(function (error) {
      console.log(error);
    })

  axios.get("/api/players",)
    .then(function (response) {
      const data1 = response.data;
      var length5 = 5;
      if (length5 > data1.Players.length) {
        length5 = data1.Players.length
      }
      for (var i = 0; i < length5; i++) {
        var player = {
          number: i + 1,
          realname: data1.Players[i].player_real_name,
          games: data1.Players[i].total_games,
          point: data1.Players[i].score,
          winrate: data1.Players[i].winrate,
          player_id: data1.Players[i].player_id,
        }
        players.value[i] = player;
      }
    })
    .catch(function (error) {
      console.log(error);
    })
}

refresh();

const clickHome_model = defineModel();
watch(clickHome_model, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    refresh();
  }
});

const cardtitle = ref(null);
const cardtext = ref(null);
const dialog1 = ref(false);
function info(title, text) {
  cardtitle.value = title;
  cardtext.value = text;
  dialog1.value = true;
}

function season_join() {
  season_loading.value = true;
  axios.post('/api/mySeasonJoin')
    .then(function (response) {
      const data5 = response.data;
      if (data5.status === "FAILED") {
        info("加入失败！", "");
      }
      refresh();
    })
    .catch(function (error) {
      console.log(error);
    })
  season_loading.value = false;
}

function getGameInfo(game_id) {
  axios.get('/api/gameDetail', {
    params: {
      game_id: game_id,
    }
  })
    .then(function (response) {
      const data6 = response.data;
      if (data6.status === "SUCCESS") {
        game_detail.value.game_date = data6.game_date;
        game_detail.value.confirmer_profile_file = data6.confirmer_profile_file;
        game_detail.value.confirmer_real_name = data6.confirmer_real_name;
        game_detail.value.laucher_profile_file = data6.laucher_profile_file;
        game_detail.value.laucher_real_name = data6.laucher_real_name;
        game_detail.value.player1_profile_file = data6.player1_profile_file;
        game_detail.value.player1_real_name = data6.player1_real_name;
        game_detail.value.player2_profile_file = data6.player2_profile_file;
        game_detail.value.player2_real_name = data6.player2_real_name;
        game_detail.value.score1 = data6.score1;
        game_detail.value.score2 = data6.score2;
        game_detail.value.game_type = data6.game_type;
        game_detail.value.confirm_date = data6.confirm_date;
        game_detail.value.lauch_date = data6.lauch_date;
      }
    })
    .then(game_dialog.value = true)
    .catch(function (error) {
      console.log(error);
    })
}

function goto_space(my_id) {
  window.location.href = '/space.html?myid=' + my_id;
  // axios.get('/api/myRecentGames?myid=' + myid)
  // .then(function () {
  //   window.location.href = "/space.html";
  //   console.log(myid);
  // }
  // )
  // .catch(function (error) {
  //   console.log(error);
  // })

}

</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;
  /* line-height: 33px; */
}

.game-item {
  height: 70px;
  width: 100%;
  /* padding: 20px; */
}

.gamedetail-item {
  height: 70px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.name-score {
  width: 20%;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  /* line-height: 33px; */
}

.score-text {
  font-size: large;
  font-weight: bold;
}

.name-text {
  font-size: small;
  color: grey;
  text-align: center;
}

.realname-text {
  font-size: large;
  font-weight: bold;
  width: 72px;
  text-align: center;
}

.winrate-text {
  font-family: 'Times New Roman';
  width: 40px;
  text-align: center;
}

.games-text {
  font-family: 'Times New Roman';
  text-align: center;
}

.point-text {
  font-family: 'Times New Roman';
  text-align: center;
}

.group-text {
  font-family: 'Times New Roman';
  text-align: center;
}

.my-realname-text {
  font-size: large;
  font-weight: bold;
  text-align: center;
}

.game-date-text {
  width: 60px;
  font-size: small;
  color: grey;
  text-align: center;
  padding-left: 7px;
  padding-right: 7px;
}

.zhibiao3 {
  width: 20%;
  text-align: center;
  /* line-height: 33px; */
}

.zhibiao4 {
  width: 15%;
  /* line-height: 33px; */
  /* text-align: center; */
}

.zhibiao5 {
  width: 75px;
  /* line-height: 33px; */
  /* text-align: center; */
}

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