<template>
  <v-container>
    <v-snackbar color="primary" v-model="snackbar" top>
      {{$t("Client.DeleteMessage")}}
      <v-btn color="pink" @click="deleteClient">{{$t("Client.YesBtn")}}</v-btn>
      <v-btn color="pink" @click="snackbar = false">{{$t("Client.NoBtn")}}</v-btn>
    </v-snackbar>
    <v-snackbar color="primary" v-model="alertSnackbar" :timeout="2000">{{alertText}}</v-snackbar>
    <v-dialog v-model="dialog" max-width="600px">
      <v-card>
        <v-card-title>
          <span>{{newOrEdit=="new"?$t("Client.newText"):$t("Client.editText")}} {{$t("Client.clientName")}}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <div>
              <v-progress-linear :active="loading" :indeterminate="loading" color="cyan lighten-2"></v-progress-linear>
            </div>
            <v-row dense>
              <v-col cols="12" md="6">
                <v-text-field label="Caption" v-model="ClientForm.Caption"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field label="AETitle" type="text" v-model="ClientForm.AETitle"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field label="Hostname" type="text" v-model="ClientForm.Hostname"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field label="Port" type="text" v-model="ClientForm.Port"></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="createOrEditClient"
          >{{newOrEdit=="new"?$t("Client.createBtn"):$t("Client.editBtn")}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-row justify="center" dense class="flex-wrap mb-6">
      <v-col md="7" lg="6" cols="12">
        <v-card tile>
          <v-card-actions>
            <v-row style="margin:auto">
              <v-col cols="12" class="d-flex justify-center align-center flex-wrap">
                <v-btn color="rgb(94, 181, 177,.85)" class="white--text ma-1" @click="openNewDialog">
                  <strong>{{$t("HISLink.newBtn")}}</strong>
                </v-btn>
                <v-btn color="rgb(94, 181, 177,.85)" class="white--text ma-1" @click="openEditDialog" :disabled="this.selectedItemInTable.length == 0">
                  <strong>{{$t("HISLink.editBtn")}}</strong>
                </v-btn>
                <v-btn color="rgb(94, 181, 177,.85)" class="white--text ma-1" @click="deleteSnackbar" :disabled="this.selectedItemInTable.length == 0">
                  <strong>{{$t("HISLink.deleteBtn")}}</strong>
                </v-btn>
              </v-col>
            </v-row>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    <v-row justify="center" dense class="flex-wrap mt-6">
      <v-col md="9" cols="12">
        <v-card>
          <v-card-title>
            <v-spacer></v-spacer>
            <v-text-field
              v-model="search"
              append-icon="search"
              :label="$t('DataTableSearch')"
              single-line
              hide-details
              style="width:400px"
              class="flex-grow-0"
            ></v-text-field>
          </v-card-title>
          <v-data-table
            v-model="selectedItemInTable"
            :headers="headerOfTable"
            :items="itemsOfTable"
            item-key="_id"
            class="elevation-1"
            style="width:100%"
            fixed-header
            hide-default-footer
            disable-pagination
            show-select
            single-select
            :sort-by.sync="sortByTable"
            :sort-desc.sync="sortDescTable"
            height="62vh"
            @click:row="clickRow"
            :search="search"
          ></v-data-table>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import Client from "../../imports/api/collections/clients.js";
import { Meteor } from "meteor/meteor";
export default {
  data() {
    return {
      sortByTable: undefined,
      sortDescTable: undefined,
      selectedItemInTable: [],
      dialog: false,
      newOrEdit: "",
      ClientForm: {
        Caption: "",
        AETitle: "",
        Hostname: "",
        Port: "",
        _id: ""
      },
      snackbar: false,
      alertSnackbar: false,
      alertText: "",
      loading: false,
      search: ""
    };
  },
  computed: {
    headerOfTable() {
      let headers = ["Caption", "AETitle", "Hostname", "Port"];
      let headerObjs = [];
      for (let header of headers) {
        headerObjs.push({
          text: header,
          value: header,
          class: "text-center",
          width: 180
        });
      }
      return headerObjs;
    },
    itemsOfTable() {
      this.loading = false;
      this.dialog = false;
      if (this.clients && this.clients.length > 0) {
        return this.clients;
      }
      return [];
    }
  },
  methods: {
    clickRow(item) {
      if (
        this.selectedItemInTable.length > 0 &&
        this.selectedItemInTable[0]._id == item._id
      ) {
        this.selectedItemInTable = [];
      } else {
        this.selectedItemInTable = [];
        this.selectedItemInTable = [item];
      }
    },
    openNewDialog() {
      for (let prop in this.ClientForm) {
        this.$set(this.ClientForm, prop, "");
      }
      this.$set(this.ClientForm, "_id", "");
      this.newOrEdit = "new";
      this.dialog = true;
    },
    openEditDialog() {
      if (this.selectedItemInTable.length == 0) {
        this.alertSnackbarMethod(this.$t("Client.clientSelectStatement"));
        return;
      }
      for (let prop in this.ClientForm) {
        if (this.selectedItemInTable[0][prop] != undefined) {
          this.$set(this.ClientForm, prop, this.selectedItemInTable[0][prop]);
        }
      }
      this.$set(this.ClientForm, "_id", this.selectedItemInTable[0]["_id"]);
      this.newOrEdit = "edit";
      this.dialog = true;
    },
    createOrEditClient() {
      this.loading = true;
      let me = this;
      if (this.newOrEdit == "new") {
        Meteor.call("createClient", this.ClientForm, function() {
          // me.dialog = false;
        });
      }
      if (this.newOrEdit == "edit") {
        Meteor.call("editClient", this.ClientForm, function() {
          // me.dialog = false;
          me.selectedItemInTable = [];
        });
      }
    },
    deleteClient() {
      let me = this;
      this.snackbar = false;
      if (this.selectedItemInTable.length == 0) {
        me.alertSnackbarMethod(me.$t("Client.clientSelectStatement"));
        return;
      }
      let deleteHislink = {};
      deleteHislink._id = this.selectedItemInTable[0]["_id"];

      Meteor.call("deleteClient", deleteHislink, function() {
        me.alertSnackbarMethod(this.$t("Client.clientDeleteStatement"));
      });
    },
    deleteSnackbar() {
      this.snackbar = true;
    },
    alertSnackbarMethod(text) {
      this.alertText = text;
      this.alertSnackbar = true;
    }
  },
  meteor: {
    $subscribe: {
      clients: []
    },
    clients() {
      return Client.find({}).fetch();
    }
  }
};
</script>
<style>
</style>