<template>
   <v-layout class="fill-height" column>
      <v-dialog v-model="dialogsuccess" persistent  max-width="290">
        <v-card>
            <v-card-title color="success"  class="headline">Berhasil !</v-card-title>
            <v-card-text>
                {{msgsuccess}}
            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
            </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog v-model="dialogbarcode" persistent  max-width="490">
        <v-card>
            <v-card-title style="color:#fff" class="headline grey darken-1">Cetak Barcode</v-card-title>
            <v-card-text>
               <v-layout pa-2 class="grey lighten-2" row>
                  
               
               </v-layout>
               
            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey darken-1" flat @click="dialogbarcode = false">Tutup</v-btn>
            <v-btn dark color="grey darken-1"  @click="printMultipleBarcode">Cetak terpilih [ {{selected_barcode.length}} ]</v-btn>
            
            </v-card-actions>
        </v-card>
      </v-dialog>
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout row >
            <v-flex xs4 mt-1 pr-2>
               <v-text-field
                  label="No Reg"
                  outline
                  v-model="nolab"
                  hide-details
                  v-on:keyup.enter="searchTransaction"
               ></v-text-field>
            </v-flex>
            <v-flex xs4 mt-1 pr-2>
               <v-text-field
                  label="Nama"
                  outline
                  v-model="name"
                  v-on:keyup.enter="searchTransaction"
                  hide-details
               ></v-text-field>
            </v-flex>
            <v-flex xs4 v-if="btn_hide === false" text-md-right>
                  <span title="Kirim ke FO"   @click="doSend"  class="icon-medium-fill-base xs1 white--text primary"><v-icon dark>send</v-icon></span>
            </v-flex>
            <!--<span @click="searchTransaction"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>-->
            
         </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="xtransactions"
                  :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.ordernumber }}</td>
                     <td class="pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.patient_fullname}}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.company_name}}</td>
                  </template>
               </v-data-table>-->
               <v-data-table 
                  :headers="headers" 
                  :items="xtransactions"
                  :loading="isLoading"
                  hide-actions
                  class="elevation-1">
                  <template v-slot:headers="props">
                        <tr>
                           <th style="width:20px" class= "text-xs-left blue-grey white--text">
                              <v-checkbox style="padding-top:0;margin-top:0"
                                 hide-details
                                 color="white"
                                 :indeterminate="indeterminatex"
                                 @change="changeCbxAll(bar_chx_all)"
                                 v-model="bar_chx_all"
                              ></v-checkbox>
                           </th>
                           <th
                              v-for="header in props.headers"
                              :key="header.text"
                              :class="header.class"
                              :width="header.width"
                           >
                           {{ header.text }}
                           </th>
                        </tr>
                  </template>
                     
                  <template v-slot:items="props">
                        <td style="width:20px" class="text-xs-left">
                           <v-checkbox style="padding-top:0;margin-top:0"
                              color="blue-grey"
                              hide-details
                              v-model="props.item.chex"
                              @change="checkTop()"
                           ></v-checkbox>
                        </td>
                        <td class="text-xs-left pa-2">{{ props.item.ordernumber }}</td>
                        <td class="text-xs-left pa-2">{{ props.item.patient_fullname}}</td>
                        <td class="text-xs-left pa-2">
                           {{props.item.test_name}}
                        </td>
                  </template>
               </v-data-table>
            </v-flex>
         </v-layout>
      </v-card>
       <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
       <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="closeDialogInfo()"></one-dialog-info>
   </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;
}

</style>

<script>
module.exports = {
components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
      //this.$store.dispatch("form/getalmaries")
      this.$store.dispatch("done/search",{
         name:this.name,
         nolab: this.nolab,
      })
   },
   methods : {
      changeCbxAll(value){
         var arr = this.xtransactions
         this.indeterminatex = false
         this.btn_hide = true
         arr.forEach((el)=>{el.chex = value})
         var selected =  _.filter(arr, function(o) { return o.chex; })
         this.$store.commit("done/update_selected_transaction",selected) 
         if(selected.length > 0)
            this.btn_hide = false
      },
      printSingleBarcode(value){
         var label = value.T_BarcodeLabBarcode
         if(value.type === 'barcode')
            one_print_barcode_pk(label)
         else
            one_print_barcode_formulir(value.id)
      },
      printMultipleBarcode(){
         var arr = this.barcodes
         var xarrtojoin = []
         var xformulir = {}
         _.forEach(arr, function(value) {
            //console.log(value)
            if(value.chex && value.type === 'barcode'){
               xarrtojoin.push(value.T_BarcodeLabBarcode)
            }
            if(value.chex && value.type === 'formulir'){
               xformulir = value
            }
         })
         if(xarrtojoin.length > 0 ){
            one_print_barcode_pk(xarrtojoin.join(','))
         }
         
         if(!_.isEmpty(xformulir)){
            //console.log("oeoeooeoe")
            one_print_barcode_formulir(xformulir.id)
         }
            
      },
      formatDate (date) {
         if (!date) return null

         const [year, month, day] = date.split('-')
         return `${day}-${month}-${year}`
      },
      deFormatedDate (date) {
          if (!date) return null

         const [ day,month, year] = date.split('-')
         return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
      isSelected(p) {
         return p.ohid == this.$store.state.done.selected_transaction.ohid
      },
      searchTransaction() {
         this.$store.dispatch("done/search",{
            name:this.name,
            nolab: this.nolab,
         })
      },
      selectMe(trx) {
        
      },
      closeAlertConfirmation(){
          this.$store.commit("done/update_open_alert_confirmation",false)
      },
      forgetAlertConfirmation(){
          this.$store.commit("done/update_no_save",0)
          this.$store.commit("done/update_open_alert_confirmation",false)
      },
      updateAlert_success(val){
         this.$store.commit("done/update_alert_success",val)
      },
      setNewTransaction(){
         this.$store.commit("done/update_selected_transaction",{})
         this.$store.commit("done/update_act",'new')
         
      },
      closeDialogSuccess(){
         let arrtrx = this.$store.state.done.transactions
         var idx = _.findIndex(arrtrx, item => item.T_SampleStorageID === this.$store.state.done.last_id)
         console.log(idx)
         this.$store.dispatch("done/search",{
            startdate:this.xdatestart,
            enddate: this.xdateend,
             search:this.search,
            current_page:1,
            lastid: idx
         })
         this.$store.commit("done/update_dialog_success",false)
      },
      closeDialogInfo(){
         this.$store.commit("done/update_open_dialog_info",false)
      },
      openbarcodeprint(value){
         this.bar_chx_all = false
         this.indeterminatex = false
         this.dialogbarcode = true
         this.selected_barcode = []
         this.$store.dispatch("patient/lookup_barcodes",value)
      },
      checkTop(){
         this.btn_hide = true
        var barcodes = this.xtransactions
        var selected =  _.filter(barcodes, function(o) { return o.chex; })
        this.bar_chx_all = false
        this.indeterminatex = false
        if(selected.length > 0 && barcodes.length === selected.length){
           this.bar_chx_all = true
           this.indeterminatex = false
           this.btn_hide = false
        }
        if(selected.length > 0 && barcodes.length > selected.length){
           this.bar_chx_all = false
           this.indeterminatex = true
           this.btn_hide = false
        }
         this.$store.commit("done/update_selected_transaction",selected)
         
      },
      doSend(){
           //console.log("closedialogaction")
            this.btn_hide = true
            var barcodes = this.xtransactions
            var selected =  _.filter(barcodes, function(o) { return o.chex; })
            if(selected.length > 0){
               this.$store.dispatch("done/dosend",{
                  name:this.name,
                  nolab:this.nolab,
                  selected:selected
               })
            }
        },
      
   },
   computed: {
      btn_hide: {
         get() {
            return this.$store.state.done.btn_hide
         },
         set(val) {
            this.$store.commit("done/update_btn_hide",val)
         }
      },
       name: {
         get() {
            return this.$store.state.done.name
         },
         set(val) {
            this.$store.commit("done/update_name",val)
         }
      },
      nolab: {
         get() {
            return this.$store.state.done.nolab
         },
         set(val) {
            this.$store.commit("done/update_nolab",val)
         }
      },
      dialogsuccess: {
         get() {
            return this.$store.state.done.dialog_success
         },
         set(val) {
            this.$store.commit("done/update_dialog_success",val)
         }
      },
      msgsuccess(){
         return this.$store.state.done.msg_success
      }, 
      snackbar: {
         get() {
            return this.$store.state.done.alert_success
         },
         set(val) {
            this.$store.commit("done/update_alert_success",val)
         }
      },
      barcodes: {
         get() {
            return this.$store.state.patient.barcodes
         },
         set(val) {
            this.$store.commit("done/update_patient_barcodes",val)
         }
      },
      isLoading() {
         return this.$store.state.done.search_status == 1
      },
      xdatestart : {
         get() {
            return this.$store.state.done.start_date
         },
         set(val) {
            this.$store.commit("done/update_start_date",val)
            this.searchTransaction()
         }
      },
      xdateend : {
         get() {
            return this.$store.state.done.end_date
         },
         set(val) {
            this.$store.commit("done/update_end_date",val)
            this.searchTransaction()
         }
      },
      filterComputedDateFormattedStart () {
         return this.formatDate(this.xdatestart)
      },
      filterComputedDateFormattedEnd () {
         return this.formatDate(this.xdateend)
      },
      xtransactions() {
         console.log(this.$store.state.done.transactions)
         return this.$store.state.done.transactions
      },
      openalertconfirmation: {
         get() {
            return this.$store.state.done.open_alert_confirmation
         },
         set(val) {
            this.$store.commit("done/update_open_alert_confirmation",val)
         }
      },
      opendialoginfo: {
            get() {
                  return this.$store.state.done.open_dialog_info
            },
            set(val) {
                  this.$store.commit("done/update_open_dialog_info",false)
            }
      },
      msginfo(){
            return this.$store.state.done.msg_info
      },
      curr_page: {
         get() {
            return this.$store.state.done.current_page
         },
         set(val) { 
            this.$store.commit("done/update_current_page",val)
            this.$store.dispatch("done/search",{
                  startdate:this.xdatestart,
                  enddate: this.xdateend,
                  current_page:val,
                  lastid:-1
            })
         }
      },
      xtotal_page: {
         get() {
            return this.$store.state.done.total_page
         },
         set(val) {
            this.$store.commit("done/update_total_page",val)
         }
      },
      bar_chx_all: {
         get() {
            return this.$store.state.done.bar_chx_all
         },
         set(val) {
            this.$store.commit("done/update_bar_chx_all",val)
         }
      },
      bar_chx_allx: {
         get() {
            return this.$store.state.done.bar_chx_allx
         },
         set(val) {
            this.$store.commit("done/update_bar_chx_allx",val)
         }
      },
   },
   data() {
      return {
         msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !",
         menufilterdatestart:false,
         menufilterdateend:false,
         dialogbarcode:false,
         date: new Date().toISOString().substr(0, 10),
         items: [],
         page:1,
         indeterminatex:false,
         checkednotall:false,
         //bar_chx_all:false,
         selected_barcode:[],
         headers: [
            {
               text: "NO REG",
               align: "left",
               sortable: false,
               value: "lab",
               width: "25%",
               class: "pa-2 blue-grey text-xs-left  white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "name",
               width: "35%",
               class: "pa-2 blue-grey text-xs-left white--text"
            },
            {
               text: "PEMERIKSAAN",
               align: "center",
               sortable: false,
               value: "status",
               width: "30%",
               class: "pa-2 blue-grey text-xs-left white--text"
            }
         ],
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'T_SampleStorageDate',
            totalItems: this.$store.state.done.total_transactions
         }
      };
   }
}
</script>
