<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
             <v-flex xs6>
                 <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-spacer></v-spacer>
            <v-btn color="primary" :disabled="selected_order.length < 1" :dark="selected_order.length > 0" class=" one-btn-icon" @click="sendSome">
                <v-icon>send</v-icon>
            </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="patients"
                  :loading="isLoading"
                  hide-actions
                  select-all
                  item-key="T_OrderRefOutID"
                   class="elevation-1"
                   v-model="selected_order">
                  <template slot="items" slot-scope="props">
                        <td class="text-xs-center pl-4 pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                            <v-checkbox v-model="props.selected" hide-details primary></v-checkbox>
                        </td>
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderHeaderLabNumber }}</td>
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.patient_name }}</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-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestName }}</td>
                        <!-- <td class="text-xs-left pr-1 pl-1 pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                            <v-btn color="blue" small dark class="ma-0" @click="sendMe(props.item)">Kirim</v-btn>
                        </td> -->
                     
                     
                  </template>
                        

                        
                    
               </v-data-table>
               <v-pagination
                            v-model="curr_patient_page"
                            :length="total_patient_page"
                            :total-visible="5"
                            @input="change_page"
                        ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>
      
      <v-snackbar
          v-model="snackbar"
          top
      >
          Order berhasil dikirim
          <v-btn flat color="red" @click.native="snackbar = false">Tutup</v-btn>
      </v-snackbar>

   </v-layout>
</template>

<style scoped>
table tr th:first-child {
    background-color: #90caf9!important;
    border-color: #90caf9!important;
}
/* .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('patient/search')
   },

   methods : {
      isSelected(p) {
         let x = this.$store.state.patient.selected_patient
         if (!x)
            return false
            
        //  if (x.patient_id == p.patient_id)
        //     return true
         
         return false
      },

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

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

      selectMe(doc) {
         this.$store.commit('patient/update_selected_patient', doc)
        //  this.$store.dispatch('patient/search')
      },

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

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

      sendMe (doc) {
          this.$store.dispatch("patient/send", doc.T_OrderRefOutID)
      },

      sendSome (doc) {
          if (this.selected_order.length < 1) {
              alert('Tidak ada yang perlu di kirim')
              return
          }

            let x = []
            for (let i in this.selected_order)
                x.push(this.selected_order[i].T_OrderRefOutID)
          
            this.$store.dispatch("patient/send", x.join(","))
      }
   },

   computed: {

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

      patients () {
         
        return this.$store.state.patient.patients
         
      },

      selected_patient() {
         return this.$store.state.patient.selected_patient
      },

      isLoading () {
         return false
      },

      is_loading () {
         return false
      },

      total_patient_page () {
         return this.$store.state.patient.total_patient_page
      },

      curr_patient_page : {
         get () { return this.$store.state.patient.curr_patient_page },
         set (v) { this.$store.commit('patient/update_curr_patient_page', v) }
      },

      snackbar : {
          get () { return this.$store.state.patient.snackbar },
          set (v) { this.$store.commit('patient/update_snackbar', v) }
      },

      selected_order : {
          get () { return this.$store.state.patient.selected_order },
          set (v) { this.$store.commit('patient/update_selected_order', v) }
      }
   },
   data() {
      return {
         headers: [
            {
               text: "LAB NUMBER",
               align: "left",
               sortable: false,
               value: "mr",
               width: "13%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "mr",
               width: "22%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "SPECIMEN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "40%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'patient_name',
            totalItems: this.$store.state.patient.total_patient
         },

         height: 50
      };
   },

   watch : {
   
   
   }
}
</script>
