<template>
  <v-layout>
    <!-- Snackbar -->
    <v-snackbar
      v-model="snackbar"
      :timeout="5000"
      :multi-line="false"
      :vertical="false"
      :top="true"
      :color="clr"
      :value="snackbar"
    >
      {{ msgsnackbar }}
      <v-btn flat @click="updateAlert_success(false)"> Tutup </v-btn>
    </v-snackbar>
    <!-- End Snackbar -->
    <!-- Alert dialog -->
    <v-dialog v-model="dialogdeletealert" max-width="30%">
      <v-card>
        <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
          Peringatan !
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 d-flex>
              <v-layout row>
                <v-flex pb-1 xs12>
                  <v-layout row>
                    <v-flex pt-2 pr-2 xs12>
                      {{ msgalert }}
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialogdeletealert = false">
            Tutup
          </v-btn>
          <v-btn color="primary" flat @click="deletelocation()">
            Yakin lah
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert dialog -->
    <!-- Form Dialog -->
    <v-dialog v-model="dialoglocation" persistent max-width="600px">
      <v-card>
        <v-form ref="formlocation" v-model="valid" lazy-validation>
          <v-card-title>
            <span class="title">Form Data Lokasi</span></v-card-title
          >
          <v-card-text class="pt-0 pb-0">
            <v-layout wrap>
              <v-flex xs12>
                <v-text-field
                  v-model="xname"
                  label="Nama*"
                  :rules="xnameRules"
                  required
                ></v-text-field>
                <v-text-field
                  v-model="xpriority"
                  label="Prioritas*"
                  :rules="xnameRules"
                  v-on:keypress="NumbersOnly"
                  hint="Yang lebih besar yang diprioritaskan"
                  required
                ></v-text-field>

                <v-select
                  v-model="xstationid"
                  :items="vstation"
                  item-text="T_SampleStationName"
                  item-value="T_SampleStationID"
                  :rules="[(v) => !!v || 'Sample Station harus diisi']"
                  label="Station*"
                  required
                ></v-select>
              </v-flex>
              <v-flex>
                <p
                  v-for="(xerror, idx) in xerrors"
                  class="error pl-2 pr-2"
                  style="color: #fff"
                >
                  {{ xerror.msg }}
                </p>
              </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="blue darken-1"
              flat
              @click="updateDialogFormLocation()"
              >Tutup</v-btn
            >
            <v-btn
              v-if="xact === 'new'"
              color="blue darken-1"
              flat
              @click="addLocation()"
              >Simpan</v-btn
            >
            <v-btn
              v-if="xact === 'edit'"
              color="blue darken-1"
              flat
              @click="editLocation()"
              >Simpan Perubahan</v-btn
            >
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>
    <!-- End Form Dialog -->
    <v-flex xs12>
      <v-card>
        <!-- Toolbar -->
        <v-toolbar
          color="blue darken-1"
          dark
          scroll-off-screen
          scroll-target="#scrolling-techniques"
        >
          <v-toolbar-title class="headline font-weight-bold"
            >LOKASI</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <v-btn class="text-xs-right" @click="openFormLocation(0)" icon
            ><v-icon>library_add</v-icon></v-btn
          >
        </v-toolbar>
        <!-- End Toolbar -->
        <!-- Data Tabel -->
        <div
          id="scrolling-techniques"
          class="scroll-y"
          :style="{ height: windowHeight }"
        >
          <v-card elevation="0">
            <v-card-text>
              <v-layout row>
                <v-flex xs3>
                  <v-text-field
                    v-model="xsearch"
                    label="Cari"
                    placeholder="Ketikkan nama lokasi atau nama station"
                    outline
                    hide-details
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
          <v-divider></v-divider>
          <v-data-table
            :headers="headers"
            :items="vlocation"
            :loading="isLoading"
            hide-actions
          >
            <template v-slot:headers="props">
              <tr>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  @click="changeSort(header.value, sorting.descending, header)"
                  :width="header.width"
                >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      sorting.sortBy === header.value &&
                      header.sort &&
                      sorting.descending == 'desc'
                    "
                    small
                    >arrow_upward</v-icon
                  >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      sorting.sortBy === header.value &&
                      header.sort &&
                      sorting.descending == 'asc'
                    "
                    small
                    >arrow_downward</v-icon
                  >
                  <v-icon
                    color="grey lighten-2"
                    v-if="sorting.sortBy !== header.value && header.sort"
                    small
                    >arrow_downward</v-icon
                  >
                  {{ header.text }}
                </th>
              </tr>
            </template>
            <v-progress-linear
              v-slot:progress
              color="blue"
              indeterminate
            ></v-progress-linear>
            <template v-slot:items="props">
              <td
                class="text-xs-left pa-2 pl-3"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.M_LocationName }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.T_SampleStationName }}
              </td>
              <td
                class="text-xs-center pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.M_LocationPriority }}
              </td>
              <td
                class="text-xs-center pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <v-toolbar flat dense>
                  <v-btn
                    @click="openformeditlocation(props.item)"
                    small
                    color="primary"
                    dark
                    >ubah <v-icon small right dark>edit</v-icon></v-btn
                  >
                  <v-divider vertical></v-divider>
                  <v-btn
                    @click="openalertdeletelocation(props.item)"
                    small
                    color="danger"
                    dark
                    >hapus <v-icon small right dark>clear</v-icon></v-btn
                  >
                </v-toolbar>
              </td>
            </template>
          </v-data-table>
        </div>
        <!-- End Data Tabel -->
        <!-- Pagination -->
        <v-divider></v-divider>
        <v-flex xs12 class="text-xs-left pt-3 pb-3">
          <v-pagination
            v-model="curr_page"
            :length="xtotal_page"
          ></v-pagination>
        </v-flex>
        <!-- End Pagination -->
      </v-card>
    </v-flex>
  </v-layout>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
  min-height: 60px;
}

.searchbox .v-btn {
  min-height: 60px;
}

table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

table.v-table thead tr {
  height: 40px;
}

.textinput {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #607d8b;
}

.textinput:focus {
  width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
  color: transparent;
}

.textinput:focus::-moz-placeholder {
  color: transparent;
}

.textinput:-moz-placeholder {
  color: transparent;
}

.boxoutline {
  color: red;
  border: 1px solid red;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px;
}

.boxoutline:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  font-size: 15px;
  font-weight: 700;
}

.boxsolid {
  color: #ffffff;
  border: 1px solid #ffffff;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #f44336;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px;
}

.boxsolid:hover {
  background: #f44336de;
  font-size: 15px;
  font-weight: 700;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
  width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
  background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
<script>
module.exports = {
  data() {
    return {
      windowHeight: window.innerHeight - 300 + "px",
      search: "",
      dialogdeletealert: false,
      msgalert: "",
      valid: false,
      xid: 0,
      search: "",
      xname: "",
      xid: "",
      xstationid: "",
      xpriority: "",
      xcode: "",
      page: 1,
      msgalert: "",
      clr: "success",
      xnameRules: [(v) => !!v || "Harus diisi"],
      selected: [],
      headers: [
        {
          text: "NAMA LOKASI",
          align: "center",
          sortable: false,
          sort: true,
          value: "M_LocationName",
          width: "36%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "NAMA STATION",
          align: "center",
          sortable: false,
          sort: true,
          value: "T_SampleStationName",
          width: "36%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "PRIORITAS",
          align: "center",
          sortable: false,
          sort: true,
          value: "M_LocationPriority",
          width: "20%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          sort: false,
          value: "rm",
          width: "8%",
          class: "pa-2 blue darken-3 white--text",
        },
      ],
    };
  },
  mounted() {
    this.$store.dispatch("location/lookup");
    this.$store.dispatch("location/getStaton");
  },
  computed: {
    //isloading
    isLoading() {
      return this.$store.state.location.search_status;
    },
    //get state value location
    vlocation() {
      return this.$store.state.location.location;
    },
    vstation() {
      return this.$store.state.location.station;
    },
    sorting: {
      get() {
        return this.$store.state.location.sorting;
      },
      set(val) {
        this.$store.commit("location/update_sorting", val);
      },
    },
    xact() {
      return this.$store.state.location.act;
    },
    xerrors() {
      return this.$store.state.location.errors;
    },
    // pagination
    curr_page: {
      get() {
        return this.$store.state.location.current_page;
      },
      set(val) {
        this.$store.commit("location/update_current_page", val);
        this.$store.dispatch("location/lookup");
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.location.total_location;
      },
      set(val) {
        this.$store.commit("location/update_total_location", val);
      },
    },
    dialoglocation() {
      return this.$store.state.location.dialog_form_location;
    },
    xsearch: {
      get() {
        return this.$store.state.location.x_search;
      },
      set(val) {
        this.$store.commit("location/update_x_search", val);
      },
    },
    snackbar: {
      get() {
        return this.$store.state.location.alert_success;
      },
      set(val) {
        this.$store.commit("location/update_alert_success", val);
      },
    },
    msgsnackbar() {
      return this.$store.state.location.msg_success;
    },
  },
  methods: {
    changeSort(value, sort, header) {
      if (header.sort) {
        var newVal = value;
        var newSort = sort == "asc" ? "desc" : "asc";
        if (newVal !== this.sorting.sortBy) newSort = "asc";
        this.sorting = { descending: newSort, sortBy: newVal };
        this.$store.dispatch("location/lookup");
      }
    },
    updateDialogFormLocation() {
      this.$store.commit("location/update_dialog_form_location", false);
    },
    openFormLocation() {
      this.xname = "";
      this.xstationid = "";
      this.xpriority = "";
      this.isdefault = "N";
      this.$refs.formlocation.reset();
      this.$refs.formlocation.resetValidation();
      this.$store.commit("location/update_act", "new");
      this.$store.commit("location/update_dialog_form_location", true);
    },
    selectMe(sc) {
      this.$store.commit("location/update_selected_item", sc);
    },
    isSelected(p) {
      return (
        p.M_LocationID == this.$store.state.location.selected_item.M_LocationID
      );
    },
    addLocation() {
      if (this.$refs.formlocation.validate()) {
        this.$store.dispatch("location/add", {
          name: this.xname,
          stationid: this.xstationid,
          priority: this.xpriority,
        });
      }
    },
    NumbersOnly(evt) {
      evt = evt ? evt : window.event;
      var charCode = evt.which ? evt.which : evt.keyCode;
      if (
        charCode > 31 &&
        (charCode < 48 || charCode > 57) &&
        charCode !== 46
      ) {
        evt.preventDefault();
      } else {
        return true;
      }
    },
    openformeditlocation(data) {
      this.selectMe(data);
      this.xname = data.M_LocationName;
      this.xid = data.M_LocationID;
      this.xstationid = data.T_SampleStationID;
      this.xpriority = data.M_LocationPriority;
      this.$store.commit("location/update_act", "edit");
      this.$store.commit("location/update_dialog_form_location", true);
    },
    editLocation() {
      if (this.$refs.formlocation.validate()) {
        this.$store.dispatch("location/update", {
          name: this.xname,
          id: this.xid,
          stationid: this.xstationid,
          priority: this.xpriority,
        });
      }
    },
    openalertdeletelocation(data) {
      this.xid = data.M_LocationID;
      this.xname = data.M_LocationName;
      this.selectMe(data);
      this.msgalert = "Yakin, mau hapus location " + data.M_LocationName + " ?";
      this.dialogdeletealert = true;
    },
    deletelocation() {
      this.$store.dispatch("location/delete", {
        id: this.xid,
        name: this.xname,
      });
      this.dialogdeletealert = false;
    },
    updateAlert_success(val) {
      this.$store.commit("location/update_alert_success", val);
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("location/lookup");
    }, 1000),
  },
  watch: {
    xsearch(val, old) {
      this.xsearch = val;
      this.thr_search();
    },
  },
};
</script>
