<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">SATUAN</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormSatuan()" icon>
            <v-icon class="black--text">library_add</v-icon>
          </v-btn>
        </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>
            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
            </v-list-tile-content>
          </v-list-tile>
        </v-layout>
        <v-divider></v-divider>
        <div>
          <v-layout>
            <v-flex xs12>
              <v-card class="mb-2" color="white">
                <v-layout row wrap>
                  <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
                    <div class="rTable">
                      <div class="rTableHeading">
                        <div style="width:25%" class="rTableHead">KODE</div>
                        <div style="width:50%" class="rTableHead">SATUAN</div>
                        <div class="rTableHead">AKSI</div>
                      </div>
                    </div>
                    <div v-for="(vo,idx) in vunits" :key="vo.Nat_UnitID">
                      <div class="rTable">
                        <div class="rTableGroup">
                          <div class="rTableRow">
                            <div style="width:25%" class="rTableCell rfirstCell">{{vo.code}}</div>
                            <div style="width:50%" class="rTableCell rfirstCell">{{vo.description}}</div>
                            <div class="rTableCell">
                              <v-icon style="color:#757575" @click="editSatuan(vo)">edit</v-icon>
                              <v-icon style="color:#757575" @click="deleteSatuan(vo)">clear</v-icon>
                              <v-icon v-if="vo.show_detail === 'N'" style="color:#757575" class="text-sm-right" @click="showDetail(idx)">more_vert</v-icon>
                              <v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" class="text-sm-right" @click="hideDetail(idx)">more_vert</v-icon>
                              <v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" @click="simpanBahasaSatuan(idx)">save</v-icon>
                            </div>
                          </div>
                        </div>
                        <transition name="fade">
                          <div v-if="vo.show_detail === 'Y'" style="width:100%;border:1px solid black" class="caption">
                            <v-layout row>
                              <table>
                                <tr>
                                  <th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">BAHASA</th>
                                  <th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">SATUAN</th>
                                  <th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">NAMA SI</th>
                                  <th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">KONVERSI</th>
                                </tr>
                                <tr v-for="(vt,tidx) in vo.unitlangs" :key="vt.Nat_LangID">
                                  <td class="text-md-left">{{vt.langname}}</td>
                                  <td class="text-xs-center pa-2">
                                    <v-text-field style="margin-top:0;padidng-top:0" v-model="vt.name" hide-details></v-text-field>
                                  </td>
                                  <td class="text-xs-center pa-2">
                                    <v-text-field style="margin-center:0;padidng-center:0" v-model="vt.siname" hide-details></v-text-field>
                                  </td>
                                  <td class="text-xs-center pa-2">
                                    <v-text-field style="margin-center:0;padidng-center:0" v-model="vt.konversi" hide-details></v-text-field>
                                  </td>
                                </tr>
                              </table>
                            </v-layout>
                          </div>
                        </transition>
                      </div>
                    </div>
                  </v-flex>
                </v-layout>
              </v-card>
            </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="dialogunit" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form 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="unitcode" label="Kode Satuan" :rules="codeRules" required></v-text-field>
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field v-model="unitname" label="Nama Satuan" :rules="nameRules" required
                           :error="error_dup" :error-messages="error_dup_message"
                           ></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="updateDialogFormSatuan()">Tutup</v-btn>
                  <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormSatuan()">Simpan</v-btn>
                  <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormSatuan()">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>
  .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 */

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    25% {
      transform: scale(.50);
    }
    50% {
      transform: scale(.75);
    }
    75% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  .rTable {
    display: table;
    width: 100%;
    border-spacing: 0 .2em;
  }

  .rTableGroup {
    display: table-row-group;
  }

  .rTableRow {
    display: table-row;
    font-size: 14px;
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
    flex-wrap: wrap;

  }

  .rTableHeading {
    display: table-header-group;
    background-color: #fffff;
  }

  .rTableCell {
    display: table-cell;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 2;
    border: 1px solid #757575;
    background-color: #fffff;
    border-spacing: 5px;
  }

  .rTableHead {
    display: table-cell;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
    background-color: #fffff;
  }

  .rTableHeading {
    display: table-header-group;
    text-transform: uppercase;
    font-weight: 500;
  }

  .rTableFoot {
    display: table-footer-group;
    font-weight: bold;
    background-color: #ddd;
  }

  .rTableBody {
    display: table-row-group;
  }

  .rfirstCell {
    border-left: 10px solid #757575;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .caption {
    border: 1px solid blue;
    caption-side: bottom;
    display: table-caption;
    text-align: center;
    padding: 5px
  }

  .mini-input .v-input {
    margin-top: 0px;
  }

  .mini-input .v-input,
  .mini-input .v-input--selection-controls,
  .mini-input .v-input__slot {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
  }

  .mini-input .v-messages {
    min-height: 0px;
  }

  .text-fajrihm {
    padding: 3px 20px 3px 0;
    text-align: left;
    font-size: 13px;
    font-family: open sans, tahoma, sans-serif;
  }

  .label-delivery {
    font-size: 11px;
    padding: 3px 10px 3px 0;
    font-family: open sans, tahoma, sans-serif;
  }

  .text-delivery {
    font-size: 12px;
    padding: 3px 10px 3px 0;
    font-family: open sans, tahoma, sans-serif;
  }

  .nota {
    font-size: 2em;
    font-weight: bold;
    text-align: left;
  }

  .total {
    min-height: 76px;
  }

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background: white;
    border: 0px;
  }

  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  table>tr>td {
    padding: 8px;
  }

  table>tr>td:first {
    padding-left: 15px !important;
  }

  .mini-input .v-input {
    margin-top: 0px;
  }

  .mini-input .v-input,
  .mini-input .v-input--selection-controls,
  .mini-input .v-input__slot {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
  }

  .mini-input .v-messages {
    min-height: 0px;
  }

  .border-bottom-dashed {
    border-bottom: 1px dashed rgba(0, 0, 0, .12);
  }

  .v-breadcrumbs__item {
    color: #fff !important;
  }
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      valid: false,
      unitname: '',
      nameRules: [
        v => !!v || 'Nama Satuan harus diisi'
      ],
      unitcode: '',
      codeRules: [
        v => !!v || 'Kode Satuan harus diisi'
      ],
      dialogdeletealert: false,
      msgalert: "",
      xid: 0
    }),
    mounted() {
      this.$store.dispatch("unit/lookup", {
        search: this.xsearch,
        current_page: this.curr_page
      })
    },
    computed: {
      error_dup() {
         return this.$store.state.unit.save_error_message != ""
      },
      error_dup_message() {
         return this.$store.state.unit.save_error_message
      },
      xact() {
        return this.$store.state.unit.act
      },
      xerrors() {
        return this.$store.state.unit.errors
      },
      xshowall() {
        return this.$store.state.unit.show_all
      },
      vunits() {
        return this.$store.state.unit.units
      },
      vshowunits() {
        return this.$store.state.unit.showunits
      },
      xunitlangs() {
        return this.$store.state.unit.unitlangs
      },
      xtotalunits() {
        return this.$store.state.unit.total_units
      },
      xtotalfilterunits() {
        return this.$store.state.unit.total_filter_units
      },
      dialogunit() {
        return this.$store.state.unit.dialog_form_unit
      },
      snackbar: {
        get() {
          return this.$store.state.unit.alert_success
        },
        set(val) {
          this.$store.commit("unit/update_alert_success", val)
        }
      },
      msgsnackbar() {
        return this.$store.state.unit.msg_success
      },
      lookupstatus() {
        return this.$store.state.unit.lookup_unit
      },
      isLoading() {
        return this.$store.state.unit.search_status == 1
      },
      xsearch: {
        get() {
          return this.$store.state.unit.x_search
        },
        set(val) {
          this.$store.commit("unit/update_x_search", val)
        }
      },
      curr_page: {
        get() {
          return this.$store.state.unit.current_page
        },
        set(val) {
          this.$store.commit("unit/update_current_page", val)
          this.$store.dispatch("unit/lookup", {
            search: this.xsearch,
            current_page: val
          })
        }
      },
      xtotal_page: {
        get() {
          return this.$store.state.unit.total_units
        },
        set(val) {
          this.$store.commit("unit/update_total_units", val)
        }
      }
    },
    methods: {
      updateShowAll(val) {
        this.$store.commit("unit/update_show_all", val)
        this.$store.dispatch("unit/lookup", {
          search: this.xsearch,
          current_page: 1
        })
      },
      isSelected(p) {
        return p.id == this.$store.state.unit.selected_unit.id
      },
      subname(name) {
        var xname = name
        if (xname.length > 18) {
          xname = xname.substring(0, 18) + '...'
        }
        return xname
      },
      selectMe(sc) {
        this.$store.commit("unit/update_selected_unit", sc)
        this.$store.dispatch("unitlang/lookup", {
          id: this.$store.state.unit.selected_unit.id
        })
      },
      updateDialogFormSatuan() {
        this.$store.commit("unit/update_dialog_form_unit", false)
      },
      openFormSatuan() {
        this.$refs.formunit.reset()
        this.$refs.formunit.resetValidation()
        this.$store.commit("unit/update_act", 'new')
        this.$store.commit("unit/update_dialog_form_unit", true)
        this.$store.commit("unit/update_save_error_message","")
      },
      saveFormSatuan() {
        if (this.$refs.formunit.validate()) {
          this.$store.dispatch("unit/save", {
            code: this.unitcode,
            name: this.unitname,
            search: this.xsearch
          })
        }
      },
      updateFormSatuan() {
        if (this.$refs.formunit.validate()) {
          this.$store.dispatch("unit/update", {
            id: this.xid,
            code: this.unitcode,
            name: this.unitname,
            search: this.xsearch
          })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("unit/update_alert_success", val)
      },
      editSatuan(data) {
        this.xid = data.id
        this.unitcode = data.code
        this.unitname = data.name
        this.$store.commit("unit/update_act", 'edit')
        this.$store.commit("unit/update_dialog_form_unit", true)
        this.$store.commit("unit/update_save_error_message","")
      },
      deleteSatuan(data) {
        this.xid = data.id
        var xdata = {
          id: data.id,
          name: data.name,
          search: this.xsearch
        }
        this.$store.commit("unit/update_selected_unit", xdata)
        this.msgalert = "Yakin, mau hapus unit " + data.name + "  ?"
        this.dialogdeletealert = true
      },
      showDetail(idx) {
        var arrOrders = this.$store.state.unit.units
        this.$store.dispatch("unitlang/lookupunitlang", {
          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("unit/update_units", arrOrders)
        this.$store.commit("unit/update_unitlangs", arrOrders)
      },
      hideDetail(idx) {
        var arrOrders = this.$store.state.unit.units
        this.$store.dispatch("unitlang/lookupunitlanghide", {
          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("unit/update_units", arrOrders)
      },
      simpanBahasaSatuan(idx) {
        var arrOrders = this.$store.state.unit.units
        var prm = {}
        prm.unitid = arrOrders[idx].id
        prm.unitcode = arrOrders[idx].code
        prm.unitname = arrOrders[idx].name
        prm.unitlangs = arrOrders[idx].unitlangs
        prm.search = this.xsearch
        this.$store.dispatch("unit/saveunitlang", prm)
      },
      closeDeleteAlert() {
        this.$store.dispatch("unit/delete", {
          unitid: this.$store.state.unit.selected_unit.id,
          unitcode: this.$store.state.unit.selected_unit.code,
          unitname: this.$store.state.unit.selected_unit.name
        })
        this.dialogdeletealert = false
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("unit/lookup", {
          search: this.xsearch,
          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>
