<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 class="md-layout md-alignment-bottom-center">
          <div class="md-layout-item md-size-45">
            <md-progress-spinner :md-stroke="10" md-mode="determinate" :md-value="docker.cpu.percent" :style="margin_bt"/>
            <p :style="margin_bt + 'text-align: center;'">Процессор</p>
            <p :style="margin_bt + 'text-align: center;'">{{docker.cpu.percent}} %</p>
          </div>
          <div class="md-layout-item md-size-45">
            <md-progress-spinner :md-stroke="10" md-mode="determinate" :md-value="docker.mem.percent" :style="margin_bt"/>
            <p :style="margin_bt + 'text-align: center;'">Память</p>
            <p :style="margin_bt + 'text-align: center;'">{{docker.mem.percent}} %</p>
          </div>
        </div>-->
        <div style="padding: 1% 5%; min-width: 400px">
          <h5 style="text-align: center">Использование ресурсов сервера</h5>
          <p>Использование ЦПУ: {{docker.cpu.percent}}%</p>
          <p>Использование памяти: {{docker.mem.percent}}% ({{bytesToHigh(docker.mem.usage)}} / {{bytesToHigh(docker.mem.limit)}})</p>
          <p>Всего трафика (rx/tx): {{bytesToHigh(docker.net.input)}} / {{bytesToHigh(docker.net.output)}}</p>
          <p>Записи на диск (rx/tx): {{bytesToHigh(docker.io.input)}} / {{bytesToHigh(docker.io.output)}}</p>
          <p>Обновленно: {{(new Date(docker.utime * 1000)).toLocaleString()}}</p>
        </div>
        <hr width="80%">
        <div style="padding: 1% 5%; min-width: 400px; max-width: 400px">
          <h5 style="text-align: center">Уникальные игроки на этом сервере</h5>
          <p>Статистика с учетом игры более 5 минут, уникальностью являются разные ip адреса</p>
          <p>За текущий день {{uniq.day}} игроков</p>
          <p>За текущий месяц {{uniq.month}} игроков</p>
          <p>За текущий год {{uniq.year}} игроков</p>
          <p>За все существование {{uniq.total}} игроков</p>
        </div>
        <md-button class="btn-boss" v-on:click="show=false">Ясно понятно, пойду посру</md-button>
      </div>
    </div>
  </md-dialog>
</template>

<script>
export default {
  name: "ServerStatsDialog",
  data: () => ({
    show: false,
    uniq: {"total":0, "month":0, "year":0, "day":0},
    docker: {
      "cpu":{"percent":0.0},
      "mem":{"percent":0.0, "usage":0, "limit":0},
      "io":{"input":0, "output":0},
      "net":{"input":0, "output":0}
    },
    margin_bt: 'margin-bottom: 0; margin-top: 0; '
  }),
  methods: {
    showMe(b, srv) {
      this.show = b;
      this.uniq = srv['uniq'];
      this.docker = srv['dockerStats'];
    },
    bytesToHigh(bytes) {
      if (bytes < 1024) return `${(bytes).toFixed(2)} Б`;
      if (bytes < 1024 * 1024) return `${(bytes/1024).toFixed(2)} КБ`
      if (bytes < 1024 * 1024 * 1024) return `${(bytes/1024/1024).toFixed(2)} МБ`
      else return `${(bytes/1024/1024/1024).toFixed(2)} ГБ`
    }
  }
}
</script>