<template>
  <div>
    <md-dialog :md-active.sync="show" @close="show=false">
      <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">
          <md-table v-model="messages.mdData" md-card class="api-table">
            <md-table-row slot="md-table-row" slot-scope="{ item }" v-on:click="steam64 !== null?'':$refs.md_fp.showFPD(item.account_name)" :class="steam64 !== null?'':'clickable'">
              <md-table-cell md-label="Никнейм" v-if="steam64 === null">{{ item.account_name }}</md-table-cell>
              <md-table-cell md-label="Время">{{ new Date(item.utime*1000).toLocaleString() }}</md-table-cell>
              <md-table-cell md-label="Сервер">{{ $API.getHumanServerName(item.server_id) }}</md-table-cell>
              <md-table-cell md-label="Сообщение">{{ item.message }}</md-table-cell>
            </md-table-row>

            <md-table-pagination ref="md_p"
                :md-page-size="rowsPerPage"
                :md-page-options="[5, 10, 15]"
                :md-update="update"
                :md-data.sync="messages"
                :md-label="''"
                :md-separator="'из'"
                style="font-family: tf2build"/>
          </md-table>
          <div style="padding-right: 2.5%; padding-left: 2.5%">
            <md-field style="margin: 0% 0%;" v-if="srv_setted===false">
              <label style="font-family: tf2secondary">Выбрать сервер</label>
              <md-select v-model="srv" :mdClass="'ssm'">
                <md-option :value="''">Выбрать все</md-option>
                <md-option v-for="srv in $API.getServers4Selector()" :key="srv['srv']" :value="srv['srv']">{{srv['name']}}</md-option>
              </md-select>
            </md-field>
            <md-field style="margin: 0% 0%">
              <label style="font-family: tf2secondary">Фильтр сообщений</label>
              <md-input v-model="filter"></md-input>
            </md-field>
          </div>
          <md-button style="float: left" class="btn-hand" v-on:click="update(1, rowsPerPage)">Искать</md-button>
          <md-button style="float: right" class="btn-colored" v-on:click="showMe(false)">Закрыть</md-button>
        </div>
      </div>
    </md-dialog>
    <md-dialog :md-active.sync="loading">
      <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">
          <h3 class="tf2rainbow" style="text-align: center; padding: 2% 5%">Загрузка</h3>
        </div>
      </div>
    </md-dialog>
    <FindPlayer_MD ref="md_fp"/>
  </div>
</template>

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

export default {
  name: "MessagesDialog",
  components: {FindPlayer_MD: () => import("@/components/ActionDialogs/FindPlayer.vue")},
  data: () => ({
    show: false,
    loading: false,
    rowsPerPage: 5,
    filter: "",
    steam64: null,
    srv: null,
    srv_setted: false,
    messages: {
      mdCount: 1,
      mdPage: 1,
      mdData: []
    },
  }),
  methods: {
    showMe(b, steam64, srv) {
      if (steam64 !== undefined) this.steam64 = steam64;
      if (srv !== undefined) {
        this.srv_setted = true;
        this.srv = srv;
      }
      if (b===true) this.update(1, this.rowsPerPage)
      else this.show = b;
    },
    update(page, limit) {
      if (this.loading === true) return;
      console.log(page, limit, this.rowsPerPage);
      const offset = Math.abs((page - 1) * limit);
      this.loading = true;
      axios.post(`api/profile/messages${this.steam64 !== null ? '/account' : ''}?${this.steam64 === null?'':`steam64=${this.steam64}&`}${this.srv===null?'':`srv=${this.srv}&`}limit=${Math.abs(limit)}&offset=${offset}` + Random.getRndWebAppend(), {"message":this.filter}).then(
          (response) => {
            if (response.status === 200) {
              this.messages.mdData = response.data['result'];
              this.messages.mdCount = response.data['count'];
              this.messages.mdPage = page;
            } else {
              console.log("cannot get messages list");
            }
            this.show = true;
            if (this.$refs.md_p !== undefined)
              this.$refs.md_p.updatePage();
          }
      ).catch((e) => {console.log(e)}).finally(() => this.loading = false)
    }
  }
}
</script>