<template>
  <div class="scoreboard">
    <table v-for="(score, team_id) in store.state.matchDetails.score" :key="team_id + 1"
           :class="'team-' + (team_id + 1)">
      <caption v-if="store.state.matchDetails.max_rounds === 16"
               :class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
        {{ score }}
      </caption>
      <caption v-if="store.state.matchDetails.max_rounds === 30"
               :class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
        {{ score }}
      </caption>
      <thead v-if="team_id === 0">
      <tr>
        <th class="player__avatar"></th>
        <th class="player__name"></th>
        <th class="player__rank"></th>
        <th class="player__kills">K</th>
        <th class="player__assist">A</th>
        <th class="player__deaths">D</th>
        <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
        <th class="player__kd">K/D</th>
        <th v-if="store.state.matchDetails.parsed" class="player__adr cursor__help" title="Average damage per round">
          ADR
        </th>
        <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
        <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
        <th class="player__mvp cursor__help" title="Most valuable player">MVP</th>
        <th class="player__score">Score</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="player in store.state.matchDetails.stats" v-show="player.team_id === team_id + 1" :key="player.player.steamid64"
          class="player">
        <ScoreTeamPlayer v-if="player.team_id === team_id + 1"
                         :assists="player.assists"
                         :avatar="player.player.avatar"
                         :color="player.color"
                         :deaths="player.deaths"
                         :dmg="player.dmg?.enemy"
                         :hs="player.headshot"
                         :kdiff="player.kills - player.deaths"
                         :kills="player.kills"
                         :mk_duo="player.multi_kills?.duo"
                         :mk_pent="player.multi_kills?.pent"
                         :mk_quad="player.multi_kills?.quad"
                         :mk_triple="player.multi_kills?.triple"
                         :mvp="player.mvp"
                         :name="player.player.name"
                         :parsed="store.state.matchDetails.parsed"
                         :player_score="player.score"
                         :rank="player.rank?.old"
                         :rounds_played="store.state.matchDetails.score.reduce((a, b) => a + b)"
                         :steamid64="player.player.steamid64"
                         :tracked="player.player.tracked"
        />
      </tr>
      <tr v-if="team_id === 0" class="hr"></tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import ScoreTeamPlayer from '@/components/ScoreTeamPlayer.vue'
import {useStore} from "vuex";

export default {
  name: 'ScoreTeam',
  components: {ScoreTeamPlayer},
  setup() {
    const store = useStore()
    return {store}
  }
}
</script>

<style lang="scss" scoped>
.scoreboard {
  margin-bottom: 20px;
}

hr {
  width: 900px;
}

table {
  width: 900px;
  text-align: center;
  margin-top: 120px;
  margin-bottom: -100px;

  caption {
    color: white;
    font-size: 3rem;
    caption-side: top;
    padding: 0;
    margin-left: -70px;
    margin-bottom: -178px;
  }

  tr {
    height: 40px;
  }

  td {
    padding: 5px 10px;
  }

  .cursor__help {
    cursor: help;
  }

  .hr {
    height: 20px;;
    border-bottom: 1px solid white;
  }
}
</style>
