<template>
  <v-layout>
    <template>

      <v-dialog v-model="dialogdeletealert" max-width="30%">
        <v-card>
          <v-card-title class="headline blue lighten-3 white--text 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 flat @click="dialogdeletealert = false">
              Tutup
            </v-btn>
            <v-btn flat @click="closeDeleteAlert()">
              Yakin lah
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    </template>


    <v-flex xs12>
      <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
        <v-toolbar color="blue lighten-3 white--text" dark height="50px">
          <v-toolbar-title class="black--text">PEMERIKSAAN</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-icon style="color:#757575" @click="simpanBahasaKata()">save</v-icon>
        </v-toolbar>
        <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
          {{ msgsnackbar }}
          <v-btn flat @click="updateAlert_success(false)">
            Tutup
          </v-btn>
        </v-snackbar>
        <v-layout row style="background:#EEEEEE;padding-top:5px;" justify-left>
          <v-list-tile>
            <v-select item-text="Nat_LangName" return-object :items="langs" style="font-size:14px" disabled
              class="textinput mini-select ma-1" v-model="selected_filter_lang" hide-details></v-select>
            <input type="text" v-model="xsearch" class="textinput" placeholder="Pemeriksaan..." />
            </v-list-tile-content>
          </v-list-tile>
        </v-layout>
        <v-divider></v-divider>
        <div>
          <v-layout row class="scroll-container" style="max-height:600px;overflow: auto;">
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
              <v-data-table :headers="headers" :items="vnattests" :loading="isLoading" hide-actions class="elevation-1">
                <template slot="items" slot-scope="props">
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.T_TestSasCode }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.T_TestName }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.Nat_TestTypeName }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.Nat_GroupName }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.Nat_SubGroupName }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">{{ props.item.T_TestIsNonLabs }}</td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">
                    <v-text-field style="margin-top:0;padding-top:0" v-model="props.item.Nat_TestLangName"
                      hide-details></v-text-field>
                  </td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">
                    <v-text-field style="margin-top:0;padding-top:0" v-model="props.item.Nat_TestLangUnitName"
                      hide-details></v-text-field>
                  </td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">
                    <v-text-field style="margin-top:0;padding-top:0" v-model="props.item.Nat_TestLangConversion"
                      hide-details></v-text-field>
                  </td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">
                    <v-text-field style="margin-top:0;padding-top:0" v-model="props.item.Nat_TestLangFlagLow"
                      hide-details></v-text-field>
                  </td>
                  <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)">
                    <v-text-field style="margin-top:0;padding-top:0" v-model="props.item.Nat_TestLangFlagHigh"
                      hide-details></v-text-field>
                  </td>
                </template>
              </v-data-table>
            </v-flex>
          </v-layout>
        </div>
        <v-layout row>
          <v-flex class="text-xs-center" pt-3 xs12>
            <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page"
              :length="xtotal_page"></v-pagination>
          </v-flex>
        </v-layout>

        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialognattest" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Kata</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formnattest" v-model="valid" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-text-field v-model="nattestname" label="Nama Kata" :rules="nameRules"
                          required></v-text-field>
                      </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormKata()">Tutup</v-btn>
                  <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormKata()">Simpan</v-btn>
                  <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormKata()">Simpan
                    Perubahan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>
        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogunit" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Ubah Satuan</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formunit" v-model="valid" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-text-field v-model="unitname" readonly label="Satuan"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field v-model="unitnamesi" label="Satuan SI"></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field v-model="unitkonversi" label="Konversi SI"></v-text-field>
                      </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogUnit()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="updateUnit()">Simpan Perubahan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>
      </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: () => ({
    color: "success",
    valid: false,
    nattestname: '',
    unitid: 0,
    unitlangid: 0,
    unitname: '',
    unitnamesi: '',
    unitkonversi: '',
    headers: [{
      text: "KODE",
      align: "left",
      sortable: false,
      value: "lab",
      width: "8%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "NAMA",
      align: "left",
      sortable: false,
      value: "name",
      width: "15%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "TIPE",
      align: "left",
      sortable: false,
      value: "name",
      width: "10%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "GRUP",
      align: "left",
      sortable: false,
      value: "name",
      width: "10%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "SUB GRUP",
      align: "left",
      sortable: false,
      value: "name",
      width: "10%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "TIPE HASIL",
      align: "left",
      sortable: false,
      value: "name",
      width: "8%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "NAMA SI",
      align: "left",
      sortable: false,
      value: "name",
      width: "15%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "SATUAN",
      align: "left",
      sortable: false,
      value: "name",
      width: "5%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "KONVERSI",
      align: "left",
      sortable: false,
      value: "name",
      width: "5%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "LOW",
      align: "left",
      sortable: false,
      value: "name",
      width: "5%",
      class: "blue lighten-3 white--text"
    },
    {
      text: "HIGH",
      align: "left",
      sortable: false,
      value: "name",
      width: "5%",
      class: "blue lighten-3 white--text"
    },
    ],
    nameRules: [
      v => !!v || 'Nama Kata harus diisi'
    ],
    nattestcode: '',
    codeRules: [
      v => !!v || 'Kode Kata harus diisi'
    ],
    dialogdeletealert: false,
    msgalert: "",
    xid: 0
  }),
  mounted() {
    this.$store.dispatch("nattest/getlang", {
      search: this.xsearch,
      langid: this.selected_filter_lang.Nat_LangID,
      current_page: 1
    })
  },
  computed: {
    xact() {
      return this.$store.state.nattest.act
    },
    xerrors() {
      return this.$store.state.nattest.errors
    },
    xshowall() {
      return this.$store.state.nattest.show_all
    },
    vnattests() {
      return this.$store.state.nattest.nattests
    },
    vshownattests() {
      return this.$store.state.nattest.shownattests
    },
    xnattestlangs() {
      return this.$store.state.nattest.nattestlangs
    },
    xtotalnattests() {
      return this.$store.state.nattest.total_nattests
    },
    xtotalfilternattests() {
      return this.$store.state.nattest.total_filter_nattests
    },
    selected_filter_lang: {
      get() {
        return this.$store.state.nattest.selected_filter_lang
      },
      set(val) {
        this.$store.commit("nattest/update_selected_filter_lang", val)
        this.searchTest()
      }
    },
    langs: {
      get() {
        return this.$store.state.nattest.langs
      },
      set(val) {
        this.$store.commit("nattest/update_langs", val)
      }
    },
    dialognattest() {
      return this.$store.state.nattest.dialog_form_nattest
    },
    dialogunit() {
      return this.$store.state.nattest.dialog_form_unit
    },
    snackbar: {
      get() {
        return this.$store.state.nattest.alert_success
      },
      set(val) {
        this.$store.commit("nattest/update_alert_success", val)
      }
    },
    msgsnackbar() {
      return this.$store.state.nattest.msg_success
    },
    lookupstatus() {
      return this.$store.state.nattest.lookup_nattest
    },
    isLoading() {
      return this.$store.state.nattest.search_status == 1
    },
    xsearch: {
      get() {
        return this.$store.state.nattest.x_search
      },
      set(val) {
        this.$store.commit("nattest/update_x_search", val)
      }
    },
    curr_page: {
      get() {
        return this.$store.state.nattest.current_page
      },
      set(val) {
        this.$store.commit("nattest/update_current_page", val)
        this.$store.dispatch("nattest/lookup", {
          search: this.xsearch,
          langid: this.selected_filter_lang.Nat_LangID,
          current_page: val
        })
      }
    },
    xtotal_page: {
      get() {
        return this.$store.state.nattest.total_nattests
      },
      set(val) {
        this.$store.commit("nattest/update_total_nattests", val)
      }
    }
  },
  methods: {
    updateShowAll(val) {
      this.$store.commit("nattest/update_show_all", val)
      this.$store.dispatch("nattest/lookup", {
        search: this.xsearch,
        langid: this.selected_filter_lang.Nat_LangID,
        current_page: 1
      })
    },
    isSelected(p) {
      return p.id == this.$store.state.nattest.selected_nattest.id
    },
    subname(name) {
      var xname = name
      if (xname.length > 18) {
        xname = xname.substring(0, 18) + '...'
      }
      return xname
    },
    selectMe(sc) {
    },
    updateDialogFormKata() {
      this.$store.commit("nattest/update_dialog_form_nattest", false)
    },
    updateDialogUnit() {
      this.$store.commit("nattest/update_dialog_form_unit", false)
    },
    searchTest() {
      this.$store.dispatch("nattest/lookup", {
        search: this.xsearch,
        langid: this.selected_filter_lang.Nat_LangID,
        current_page: this.curr_page
      })
    },
    openFormKata() {
      this.$refs.formnattest.reset()
      this.$refs.formnattest.resetValidation()
      this.$store.commit("nattest/update_act", 'new')
      this.$store.commit("nattest/update_dialog_form_nattest", true)
    },
    saveFormKata() {
      if (this.$refs.formnattest.validate()) {
        this.$store.dispatch("nattest/save", {
          name: this.nattestname,
          search: this.xsearch,
          current_page: 1
        })
      }
    },
    updateFormKata() {
      if (this.$refs.formnattest.validate()) {
        this.$store.dispatch("nattest/update", {
          id: this.xid,
          name: this.nattestname,
          search: this.xsearch,
          current_page: this.curr_page
        })
      }
    },
    updateUnit() {
      this.$store.dispatch("nattest/updateunit", {
        unitid: this.unitid,
        unitlangid: this.unitlangid,
        unitname: this.unitname,
        unitnamesi: this.unitnamesi,
        unitkonversi: this.unitkonversi,
        langid: this.selected_filter_lang.Nat_LangID,
        search: this.xsearch,
        current_page: this.curr_page
      })
    },
    updateAlert_success(val) {
      this.$store.commit("nattest/update_alert_success", val)
    },
    editKata(data) {
      this.xid = data.id
      this.nattestname = data.name
      this.$store.commit("nattest/update_act", 'edit')
      this.$store.commit("nattest/update_dialog_form_nattest", true)
    },
    deleteKata(data) {
      this.xid = data.id
      var xdata = {
        id: data.id,
        name: data.name,
        search: this.xsearch,
        current_page: this.curr_page
      }
      this.$store.commit("nattest/update_selected_nattest", xdata)
      this.msgalert = "Yakin, mau hapus nattest " + data.name + "  ?"
      this.dialogdeletealert = true
    },
    editUnit(data) {
      this.unitid = data.Nat_UnitLangNat_UnitID
      this.unitlangid = data.Nat_UnitLangID
      this.unitname = data.Nat_UnitName
      this.unitnamesi = data.Nat_UnitLangSiName
      this.unitkonversi = data.Nat_UnitLangConversion
      this.$store.commit("nattest/update_dialog_form_unit", true)
    },
    showDetail(idx) {
      var arrOrders = this.$store.state.nattest.nattests
      this.$store.dispatch("nattestlang/lookupnattestlang", {
        id: arrOrders[idx].id,
        search: this.xsearch,
        current_page: this.curr_page
      })
      arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
      this.$store.commit("nattest/update_nattests", arrOrders)
      this.$store.commit("nattest/update_nattestlangs", arrOrders)
    },
    hideDetail(idx) {
      var arrOrders = this.$store.state.nattest.nattests
      this.$store.dispatch("nattestlang/lookupnattestlanghide", {
        id: arrOrders[idx].id,
        search: this.xsearch,
        current_page: this.curr_page
      })
      arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
      this.$store.commit("nattest/update_nattests", arrOrders)
    },
    simpanBahasaKataold(idx) {
      var arrOrders = this.$store.state.nattest.nattests
      var prm = {}
      prm.nattestid = arrOrders[idx].id
      prm.nattestname = arrOrders[idx].name
      prm.nattestlangs = arrOrders[idx].nattestlangs
      prm.search = this.xsearch
      prm.curr_page = this.curr_page
      this.$store.dispatch("nattest/savenattestlang", prm)
    },
    simpanBahasaKata() {
      var prm = {}
      prm.nattestlangs = this.$store.state.nattest.nattests
      prm.search = this.xsearch
      prm.langid = this.selected_filter_lang.Nat_LangID
      prm.curr_page = this.curr_page
      this.$store.dispatch("nattest/savenattestlang", prm)
    },
    closeDeleteAlert() {
      this.$store.dispatch("nattest/delete", {
        nattestid: this.$store.state.nattest.selected_nattest.id,
        nattestname: this.$store.state.nattest.selected_nattest.name
      })
      this.dialogdeletealert = false
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("nattest/lookup", {
        search: this.xsearch,
        langid: this.selected_filter_lang.Nat_LangID,
        current_page: this.curr_page
      })
    }, 1000)
  },
  watch: {
    xsearch(val, old) {
      if (val !== old && this.lookupstatus !== 1) {
        console.log(val)
        this.xsearch = val
        this.thr_search()
      }
    }
  }
}
</script>