<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
             <v-flex xs3>
                 <v-text-field class="ma-1"
                    label=""
                    placeholder="Pencarian"
                    single-line
                    outline
                    v-model="query"
                    hide-details
                    :height="height"
                    @keyup.native="searchUp"
                    ></v-text-field>
             </v-flex>
               


            <v-btn class="xs3 ma-1 one-btn-icon" color="success"  @click="search">
               <span class="icon-search"></span>
            </v-btn>
         </v-layout>
      </v-card>
      <v-card >
         <v-layout row>
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
               <v-data-table 
                  :headers="headers" 
                  :items="pxs"
                  :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.Nat_TestCode }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.Nat_TestName }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestRefIsInternal == "Y" ? "CABANG" : (props.item.T_TestRefIsInternal == "N" ? "Lab Eksternal" : "") }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestRefIsInternal == "Y" ? props.item.M_BranchName : props.item.M_CompanyName }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_SampleTypeName }}</td>
                     <td class="text-xs-left pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                        <v-btn v-show="props.item.T_TestRefID != null" color="red" dark class="one-btn-icon ma-0" small @click="del_ref(props.item)"><span class="icon-del"></span></v-btn>
                        <v-btn v-show="props.item.T_TestRefID != null" color="blue" dark class="one-btn-icon ma-0" small @click="edit_ref(props.item)"><span class="icon-edit"></span></v-btn>
                        <v-btn v-show="props.item.T_TestRefID == null" color="green" dark class="one-btn-icon ma-0" small @click="new_ref(props.item)"><span class="icon-add"></span></v-btn>
                     </td>
                     <!-- <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.status}}</td> -->
                  </template>
                        

                        
                    
               </v-data-table>
               <v-pagination
                            v-model="curr_px_page"
                            :length="total_px_page"
                            :total-visible="5"
                            @input="change_page"
                        ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>
      <one-dialog-confirm
        @confirm="del_ref_confirm"
        :data="selected_px.T_TestRefID"
        v-if="dialog_confirm"></one-dialog-confirm>
   </v-layout>
</template>

<style scoped>
/* .searchbox .v-input.v-text-field .v-input__slot{
   min-height:50px;
} */
/* .v-autocomplete.v-text-field--enclosed:not(.v-text-field--solo):not(.v-text-field--single-line) .v-select__slot>input {
    margin-top: 14px;
} */
.searchbox .v-btn {
   min-height:50px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

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

.searchbox .one-btn-icon {
   font-size: 1.5em
}

/* Overwrite */
.v-text-field--box>.v-input__control>.v-input__slot,
.v-text-field--full-width>.v-input__control>.v-input__slot,
.v-text-field--outline>.v-input__control>.v-input__slot {
    align-items: stretch;
    min-height: 50px
}

.v-text-field--box .v-label, .v-text-field--full-width .v-label, .v-text-field--outline .v-label {
    top: 12px;
}

.v-text-field.v-text-field--enclosed .v-input__append-inner {
   margin-top: 10px;
}

.v-text-field--outline.v-text-field--single-line input {
    margin-top: 6px;
}

.v-select.v-text-field--enclosed:not(.v-text-field--single-line) .v-select__selections {
    padding-top: 16px;
}
</style>

<script>
module.exports = {
components : {
        'one-dialog-confirm': httpVueLoader('../../common/oneDialogConfirm.vue')
   },

   mounted() {
      this.$store.dispatch('testref/search')
   },

   methods : {
      isSelected(p) {
         let x = this.$store.state.testref.selected_px
         if (!x)
            return false
            
         if (x.Nat_TestID == p.Nat_TestID)
            return true
         
         return false
      },

      search() {
         this.$store.dispatch("testref/search")
      },

      searchUp(e) {
          if (e.which == 13) {
              this.search()
          }
      },

      selectMe(doc) {
         this.$store.commit('testref/update_selected_px', doc)
      },

    //   thr_search: _.debounce( function () {
    //      this.$store.dispatch("packet/search_company")
         
    //   }, 700),

      edit_ref(x) {
        this.selectMe(x)
        this.$store.commit('testrefnew/update_edit', true)
        this.$store.commit('testrefnew/update_dialog_new', true)
      },

      one_money (x) {
         return window.one_money(x)
      },

      del_ref(x) {
        this.selectMe(x)
        this.$store.commit('update_dialog_confirm', true)
      },

      del_ref_confirm(x) {
        this.$store.dispatch('testref/remove')
      },

      new_ref(x) {
        this.selectMe(x)
        this.$store.commit('testrefnew/update_edit', false)
        this.$store.commit('testrefnew/update_dialog_new', true)
      },

      change_page(x) {
         this.curr_px_page = x
         this.$store.dispatch('testref/search')
      }
   },

   computed: {
      query_company : {
         get () {
            return this.$store.state.packet.query_company
         },
         set (v) {
            this.$store.commit('packet/update_query_company', v)
         }
      },

      query : {
         get () {
            return this.$store.state.testref.query
         },
         set (v) {
            this.$store.commit('testref/update_query', v)
         }
      },

      pxs : {
         get () {
            return this.$store.state.testref.pxs
         },
         set (v) {
            this.$store.commit('testref/update_pxs', v)
         }
      },

      selected_px() {
         return this.$store.state.testref.selected_px
      },

      isLoading () {
         return false
      },

      is_loading () {
         return false
      },

      dialog_confirm () {
         return this.$store.state.dialog_confirm
      },

      total_px_page () {
         return this.$store.state.testref.total_px_page
      },

      curr_px_page : {
         get () { return this.$store.state.testref.curr_px_page },
         set (v) { this.$store.commit('testref/update_curr_px_page', v) }
      }
   },
   data() {
      return {
         headers: [
            {
               text: "KODE PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "lab",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "TUJUAN RUJUKAN",
               align: "left",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "CABANG / PERUSAHAAN",
               align: "left",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "SPECIMEN",
               align: "left",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ACTION",
               align: "left",
               sortable: false,
               value: "name",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'Nat_TestName',
            totalItems: this.$store.state.testref.total_px
         },

         height: 50
      };
   },

   watch : {
    //   query_company(val, old) {
            
    //      if (val == null || typeof val == 'undefined') val = ""
    //      // console.log("1-val:"+val)
    //      if (val == old ) return
    //      // console.log("2-val:"+val)
    //      // if (! val) return
    //      // console.log("3-val:"+val)
    //      // if (val.length < 1 ) return
    //      // console.log("4-val:"+val)
    //      if (this.$store.state.packet.search_status == 1 ) return  
    //      // console.log("5-val:"+val)
    //      this.$store.commit("packet/update_query_company", val)
    //      this.thr_search()
    //   }
   
   }
}
</script>
