<template>
  <md-dialog :md-active.sync="show" @close="show=false" :mdClickOutsideToClose="true">
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
        <div style="padding: 0% 5%; min-width: 450px; max-width: 450px">
          <h5 style="text-align: center">Статистика за все серверы</h5>
          <p>Статистика с учетом игры более 5 минут, уникальностью являются разные ip адреса, данные со всех серверов начиная с 2018 года</p>
        </div>
        <div style="padding: 0% 5%; min-width: 450px; max-width: 450px">
          <h5 style="text-align: center">Игроки по странам</h5>
          <div class="md-layout md-alignment-bottom-center">
            <div class="md-layout-item md-size-20" style="text-align: center">
              <img style="height: 32px" :src="require('/src/assets/flags/Flag_of_Russia.svg')" alt="Русские">
              <p>{{this.countries.Russia}}</p>
            </div>
            <div class="md-layout-item md-size-20" style="text-align: center">
              <img style="height: 32px" :src="require('/src/assets/flags/Flag_of_Belarus.svg')" alt="Белоруссы">
              <p>{{this.countries.Belarus}}</p>
            </div>
            <div class="md-layout-item md-size-20" style="text-align: center">
              <img style="height: 32px" :src="require('/src/assets/flags/Flag_of_Kazakhstan.svg')" alt="Казахи">
              <p>{{this.countries.Kazakhstan}}</p>
            </div>
            <div class="md-layout-item md-size-20" style="text-align: center">
              <img style="height: 32px" :src="require('/src/assets/flags/Flag_of_Shit.svg')" alt="Хохлы">
              <p>{{this.countries.Ukraine}}</p>
            </div>
            <div class="md-layout-item md-size-20" style="text-align: center">
              <img style="height: 32px" :src="require('/src/assets/flags/Flag_of_SoyGoys.svg')" alt="Скот">
              <p>{{this.countries.OtherGoys}}</p>
            </div>
          </div>
        </div>

        <div style="padding: 1% 5%; min-width: 450px; max-width: 450px">
          <h5 style="text-align: center; margin: 0 0">Уникальные игроки</h5>
          <p>За текущий день {{uniq.day}} игроков</p>
          <p>За текущий месяц {{uniq.month}} игроков</p>
          <p>За текущий год {{uniq.year}} игроков</p>
          <p>За все существование {{uniq.total}} игроков</p>
        </div>
        <div style="text-align: center">
          <md-button class="btn-boss" v-on:click="show=false">А вот у куплинова больше</md-button>
        </div>

      </div>
    </div>
  </md-dialog>
</template>

<script>
import axios from "axios";
import Random from "@/api/Random";

export default {
  name: "SummaryStatsDialog",
  data: () => ({
    show: false,
    countries: {"Russia":0, "Ukraine": 0, "Belarus":0, "Kazakhstan":0, "OtherGoys":0},
    uniq: {"total":0,"month":0,"year":0,"day":0}
  }),
  methods: {
    showMe(b) {
      if (b === true) this.preShow();
      //this.show = b;
    },
    preShow(){
      let countries_load = false;
      let uniq_load = false;

      axios.get(`/api/stats?filter=countries` + Random.getRndWebAppend())
          .then(response => response.data)
          .then(response => {
            countries_load = true;
            this.countries = response['countries'];
            this.countries["OtherGoys"] = 0;
            for (const country in response["countries"]) {
              if (["Russia", "Ukraine", "Belarus", "Kazakhstan", "OtherGoys"].indexOf(country) !== -1) continue;
              this.countries["OtherGoys"] += response["countries"][country];
            }
          })
          .catch(err => {
            console.log(`[API] cannot request country stats, err: ${err}`);
          }).finally(() => {
            this.show = countries_load && uniq_load;
      });

      axios.get(`/api/stats?filter=uniq` + Random.getRndWebAppend())
          .then(response => response.data)
          .then(response => {
            uniq_load = true;
            this.uniq = response['uniq'];
          })
          .catch(err => {
            console.log(`[API] cannot request uniq stats, err: ${err}`);
          }).finally(() => {
            this.show = countries_load && uniq_load;
      });

    }
  }
}
</script>