<template>
  <v-container>
    <v-snackbar color="primary" v-model="snackbar" top>
      {{$t("Users.DeleteMessage")}}
      <v-btn color="pink" @click="deleteUser">{{$t("Users.YesBtn")}}</v-btn>
      <v-btn color="pink" @click="snackbar = false">{{$t("Users.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("Users.newText"):$t("Users.editText")}} {{$t("Users.UserName")}}</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="Username" v-model="UserForm.username"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field type="password" label="Password" v-model="UserForm.password"></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="createOrEditUser"
          >{{newOrEdit=="new"?$t("Users.createBtn"):$t("Users.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" @click="openNewDialog">
                  <strong>{{$t("HISLink.newBtn")}}</strong>
                </v-btn>
                <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="openEditDialog">
                  <strong>{{$t("HISLink.editBtn")}}</strong>
                </v-btn>
                <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="deleteSnackbar">
                  <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-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="73vh"
          @click:row="clickRow"
        ></v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { Meteor } from "meteor/meteor";
export default {
  data() {
    return {
      sortByTable: undefined,
      sortDescTable: undefined,
      selectedItemInTable: [],
      dialog: false,
      newOrEdit: "",
      UserForm: {
        username: "",
        password: "",
        _id: ""
      },
      snackbar: false,
      alertSnackbar: false,
      alertText: "",
      loading: false
    };
  },
  computed: {
    headerOfTable() {
      let headers = ["username"];
      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.users && this.users.length > 0) {
        return this.users;
      }
      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.UserForm) {
        this.$set(this.UserForm, prop, "");
      }
      this.$set(this.UserForm, "_id", "");
      this.newOrEdit = "new";
      this.dialog = true;
    },
    openEditDialog() {
      if (this.selectedItemInTable.length == 0) {
        this.alertSnackbarMethod(this.$t("Users.userSelectStatement"));
        return;
      }
      for (let prop in this.UserForm) {
        if (this.selectedItemInTable[0][prop] != undefined) {
          this.$set(this.UserForm, prop, this.selectedItemInTable[0][prop]);
        }
      }
      this.$set(this.UserForm, "_id", this.selectedItemInTable[0]["_id"]);
      this.newOrEdit = "edit";
      this.dialog = true;
    },
    createOrEditUser() {
      this.loading = true;
      let me = this;
      if (this.newOrEdit == "new") {
        Meteor.call("createUser1", this.UserForm, function() {
          // me.dialog = false;
        });
      }
      if (this.newOrEdit == "edit") {
        Meteor.call("editUser1", this.UserForm, function() {
          // me.dialog = false;
          me.selectedItemInTable = [];
        });
      }
    },
    deleteUser() {
      debugger;
      let me = this;
      this.snackbar = false;
      if (this.selectedItemInTable.length == 0) {
        me.alertSnackbarMethod(this.$t("Users.userSelectStatement"));
        return;
      }
      let deleteUser = {};
      deleteUser._id = this.selectedItemInTable[0]["_id"];

      Meteor.call("deleteUser1", deleteUser, function() {
        me.alertSnackbarMethod(this.$t("Users.userDeleteStatement"));
      });
    },
    deleteSnackbar() {
      this.snackbar = true;
    },
    alertSnackbarMethod(text) {
      this.alertText = text;
      this.alertSnackbar = true;
    }
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     if (
    //       Meteor.userId() &&
    //       Meteor.users.findOne({ _id: Meteor.userId() }).username !=
    //         "marcoadmin"
    //     ) {
    //       vm.$router.push("/main/worklist");
    //     } else {
    //       vm.$router.push("/signin");
    //     }
    //   });
    // }
  },
  meteor: {
    $subscribe: {
      users: []
    },
    users() {
      return Meteor.users.find({ username: { $ne: "marcoadmin" } }).fetch();
    }
  }
};
</script>
<style>
</style>