<template>
  <div>
    <div class="md-layout md-alignment-top-center" v-if="player !== null">
      <div :class="`md-layout-item md-size-${f_size} md-small-size-100`">
        <h4 style="margin: 10% 0%">{{player !== null && player['steam_data'] !== null?player['steam_data']['nickname']:'игрок'}}</h4>
        <hr>
        <div v-if="player['ban'] !== null">
          <p class="profile-text" style="display: inline">Статус Бана: </p>
          <p class="profile-text" style="color: brown; display: inline">Забанен</p>
          <p class="profile-text">Причина бана: {{player['ban']['ban_reason']}}</p>
          <p class="profile-text" style="display: inline">Выдал бан: {{player['ban']['banned_by']}}</p>
          <!--<SteamSvg :h="'5%'" :w="'5%'" :url="player['ban']['admin_info']['steam_url']" :inline="true"/>
          <DiscordSvg :h="'5%'" :w="'5%'" :url="'https://tf2.pblr-nyk.pro/unban'" :inline="true"/>-->
          <p class="profile-text" v-if="player['ban']['ban_length'] > 0">Дата окончания бана: {{new Date(player['ban']['ban_utime'] * 1000 + player['ban']['ban_length'] * 60 * 1000).toLocaleString()}}</p>
          <p class="profile-text">Бан навсегда</p>
        </div>
        <div v-if="player['permition'] === null">
          <p class="profile-text" style="display: inline">Статус VIP : </p>
          <p class="profile-text" style="color: crimson;display: inline"> слыш купи</p>
        </div>
        <div v-else>
          <p class="profile-text" style="display: inline">Статус {{player['permition']['status']}} : </p>
          <p class="profile-text" style="color: green;display: inline" v-if="player['permition']['status'] === 'VIP'"> Куплен</p>
          <p class="profile-text" v-else style="color: #fd8846;display: inline">Имеется</p>
          <br>
          <p class="profile-text" style="display: inline">Дата окончания : </p>
          <p class="profile-text" v-if="player['permition']['amount'] === 0" style="display: inline">Навсегда</p>
          <p class="profile-text" v-else style="display: inline">{{new Date((player['permition']['u_timestamp'] + player['permition']['amount']) * 1000).toLocaleDateString()}}</p>
        </div>
        <hr>
        <!--GAMETIME-->
        <md-button v-on:click="loadingUserTime()" v-if="usertime.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{usertime.loading?'Загрузка':'Статистика по картам'}}</md-button>
        <md-menu v-else md-direction="bottom-start" md-size="auto">
          <md-button class="md-raised btn-strange" md-menu-trigger>Статистика по картам</md-button>
          <md-menu-content>
            <md-menu-item v-for="g in usertime.store" :key="g[0]+'g'">{{g[0]}} - {{timeFormat(g[1])}}</md-menu-item>
          </md-menu-content>
        </md-menu>
        <br>
        <md-menu md-direction="bottom-start" md-size="auto">
          <md-button class="md-raised btn-strange" md-menu-trigger>Последние игры</md-button>
          <md-menu-content>
            <md-menu-item v-for="l in getLastPlay()" :key="l[0]+'l'">{{l[0]}} - {{l[1]}}</md-menu-item>
          </md-menu-content>
        </md-menu>
        <br>
        <!--DONATES-->
        <md-button v-on:click="loadingDonates()" v-if="donates.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{donates.loading?'Загрузка':'Покупки VIP'}}</md-button>
        <md-menu v-else md-direction="bottom-start" md-size="auto">
          <md-button class="md-raised btn-strange" md-menu-trigger>Покупки VIP</md-button>
          <md-menu-content>
            <md-menu-item v-for="d in donates.store" :key="d['utime']+'d'">{{new Date(d['utime'] * 1000).toLocaleDateString()}} | {{d['status']}}</md-menu-item>
          </md-menu-content>
        </md-menu>
        <br>
        <!--BAN LIST-->
        <md-button v-on:click="loadingBanList()" v-if="ban_list.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{ban_list.loading?'Загрузка':'История банов'}}</md-button>
        <md-menu v-else md-direction="bottom-start" md-size="auto">
          <md-button class="md-raised btn-strange" md-menu-trigger>История Банов</md-button>
          <md-menu-content>
            <md-menu-item v-for="b in ban_list.store" :key="b['id']+'b'">#{{b['id']}} | {{new Date(b['ban_utime'] * 1000).toLocaleDateString()}} | {{b['ban_length']===0?'Навсегда':`${b['ban_length']} минут`}}</md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
      <div :class="`md-layout-item md-size-${f_size} md-small-size-100`">
        <div style="justify-content: right; display: flex; padding: 10% 0%">
          <img :src="getAvatar()" style="border-radius: 15px;">
        </div>
        <p class="profile-text" style="text-align: right; cursor: pointer;" v-if="this.player['play_on'] !== null && 'ip' in this.player['play_on']" v-on:click="showIP()">IP : {{player_ip}}</p>
        <p class="profile-text" style="text-align: right" v-if="this.player['play_on'] !== null && 'kills' in this.player['play_on']">Убийств : {{this.player['play_on']['kills']}}</p>
        <p class="profile-text" style="text-align: right" v-if="this.player['play_on'] !== null && 'deads' in this.player['play_on']">Смертей : {{this.player['play_on']['deads']}}</p>
        <p class="profile-text" style="text-align: right; cursor: pointer" v-on:click="loadingUserTime()">Наиграно : {{usertime.total}}</p>
        <div style="justify-content: right; display: flex">
          <DiscordSvg :h="'10%'" :w="'40'" style="margin-left: 5%" v-if="this.player['attached_discords'].filter(v => v['active'] === 1).length>0" :url="`https://discord.com/channels/@me/${this.player['attached_discords'].filter(v => v['active'] === 1)[0]['discord_id']}`"/>
          <SteamSvg :h="'10%'" :w="'40'" style="margin-left: 5%;" :url="this.player['steamids']['community_url']"/>
        </div>
      </div>
      <br>
    </div>
  </div>
</template>

<script>
import DiscordSvg from "@/components/Others/CustomSvg/DiscordSvg.vue";
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import axios from "axios";

export default {
  name: "ProfileContainer",
  components: {SteamSvg, DiscordSvg},
  props: {
    player: Object,
    f_size: {
      type: Number,
      default: 45
    },
  },
  data: () => ({
    player_ip: "Показать",
    donates: {
      loading: false,
      loaded: false,
      store: []
    },
    ban_list: {
      loading: false,
      loaded: false,
      store: []
    },
    usertime: {
      loading: false,
      loaded: false,
      store: [],
      total: "Показать"
    }
  }),
  methods: {
    getAvatar() {
      try {
        return this.player.steam_data['avatar'];
      } catch (err) {
        return require('@/assets/profile-user.svg');
      }
    },
    timeFormat(seconds) {
      return this.$API.UNIX2FACTI_TIME(seconds);
    },
    getLastPlay() {
      return this.$API.player.getLastplayList(this.player);
    },
    showIP() {
      if (this.player_ip.indexOf(":") !== -1) {
        this.player_ip = "Показать";
        return;
      }
      axios.options("api/crypto").then((response) => {
        this.player_ip = "ждем...";
        if (response.status === 200) {
          axios.post("api/crypto/decrypt", {"ip":this.player['play_on']['ip']}).then(response => {
            this.player_ip = response.data['ip'];
          })
        }
      }).catch(() => {
        this.player_ip = "хаха нет";
      })
    },
    loadingDonates(){
      if (this.donates.loading) return;
      this.donates.loading = true;
      axios.get(`api/profile/web?steam64=${this.player['steamids']['steam64']}&requests=donates`)
          .then(response => {
            this.donates.store = response.data['donates'];
            this.donates.loaded = true;
            if (this.donates.store.length === 0) {
              this.donates.store.push({"utime":Date.now()/1000, "status":"Пока тут пусто"})
            }
          })
          .catch(() => this.donates.loaded = false)
          .finally(() => this.donates.loading = false)

    },
    loadingBanList(){
      if (this.ban_list.loading || this.ban_list.loaded) return;
      this.ban_list.loading = true;
      axios.get(`api/profile/web?steam64=${this.player['steamids']['steam64']}&requests=ban_list`)
          .then(response => {
            this.ban_list.store = response.data['ban_list'];
            this.ban_list.loaded = true;
            if (this.ban_list.store.length === 0) {
              this.ban_list.store.push({"ban_utime":Date.now()/1000, "id":"Пока тут пусто, надеюсь", "ban_length":0})
            }
          })
          .catch(() => this.ban_list.loaded = false)
          .finally(() => this.ban_list.loading = false)
    },
    loadingUserTime(){
      if (this.usertime.loading || this.usertime.loaded) return;
      this.usertime.loading = true;
      this.usertime.total = "считаем сколько";
      axios.get(`api/profile/web?steam64=${this.player['steamids']['steam64']}&requests=usertime`)
          .then(response => {
            this.usertime.store = this.$API.player.getGametime(this.$API, response.data['gametime']);
            this.usertime.total = this.timeFormat(this.$API.player.getGametimeTotal(response.data['gametime']));
            this.usertime.loaded = true;
            if (this.usertime.store.length === 0) {
              this.usertime.store.push(["Не играл ни где", 0]);
              this.usertime.total = "отсутствует";
            }
          })
          .catch(() => this.usertime.loaded = false)
          .finally(() => this.usertime.loading = false)
    }
  }
}
</script>

<style>
.profile-text {
  text-align: left;
  font-size: 1.5em;
}

.md-menu-content {
  z-index: 111;
  max-width: unset;
}
</style>