<template>
    <md-dialog :md-active.sync="showPlayerDialog">
      <div class="md-layout md-alignment-bottom-center"  style="z-index: 1">
        <div class="md-layout-item md-size-5 md-small-hide"/>
        <div class="md-layout-item rounded-and-colored md-size-60 md-small-size-90">
          <h3 style="text-align: center; margin: 2% 0%; max-height: 30em" class="h3-player">{{player['name']}}</h3>
        </div>
        <div class="md-layout-item rounded-and-colored-circle md-size-5" v-on:click="closePEI()" style="min-width: 3em">
          <h3 style="text-align: center; margin: 25% 0%">X</h3>
        </div>
      </div>
      <div class="md-layout md-alignment-bottom-center" style="margin-top: -3.5%;">
        <div class="md-layout-item md-size-65 server-info-rounded" style="min-width: 40em">
          <div style="margin-top: 5%; text-align: center">
            <a :href="player['steam']['community_url']" target="_blank" class="a-player">Открыть профиль Steam</a>
          </div>
          <div style="justify-content: center; display: flex; margin-top: 0%">
            <div style="max-width: 45%; float: left; margin-right: 5%">
              <p class="p-player">Очки: {{player['score']}}</p>
              <p class="p-player">Время игры: {{player['duration']}}</p>
              <p class="p-player">Пинг: {{player['ping']}} мс</p>
              <p class="p-player">Потери пакетов: {{player['loss']}}</p>
            </div>
            <div style="max-width: 45%; float: left;">
              <p class="p-player">ID на сервере: {{player['id']}}</p>
              <p class="p-player">Steam64: {{player['steam']['steam64']}}</p>
              <p class="p-player">Steam3: {{player['steam']['steam3']}}</p>
              <p class="p-player">Steam2: {{player['steam']['steam2']}}</p>
            </div>
          </div>
          <div style="justify-content: center; display: flex; margin-top: 0%">
            <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846">РЕПОРТ</md-button>
            <md-button v-if="showPlayerDialog && this.$API.admin.permition.kick" class="md-raised" style="color: #131213; font-family: tf2build; background: darkcyan">кикнуть</md-button>
            <md-button v-if="showPlayerDialog && this.$API.admin.permition.ban" class="md-raised" style="color: #131213; font-family: tf2build; background: brown">забанить</md-button>
            <md-button v-if="showPlayerDialog && this.$API.admin.permition.mute" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>
            <md-button v-if="showPlayerDialog && this.$API.player.success_auth" style="color: #131213; font-family: tf2build; background: #fdecc1" v-on:click="showProfile()">информация</md-button>
          </div>
        </div>
      </div>
      <ProfileViewer ref="pv" :steam64="player['steam']['steam64']"/>
    </md-dialog>
</template>

<script>
import ProfileViewer from "@/components/Others/Loader/ProfileViewer.vue";

export default {
  name: 'PlayerExtendedInfo',
  components: {ProfileViewer},
  props: {
    player: Object
  },
  data: () => ({
    showPlayerDialog: false,
    allowMute: false,
    allowKick: false
  }),
  methods: {
    closePEI() {
      this.showPlayerDialog = false;
    },
    showProfile() {
      this.$refs.pv.getPlayer();
    }
  }
}
</script>

<style>
.a-player {
  text-align: center; font-size: 2em; color: #131213;
}

.h3-player {
  line-height: 1em;
}

.p-player {
  color: #131213;
  font-size: 1.2em;
}
</style>