<template>
   <v-layout class="fill-height" column>
      <v-dialog v-model="dialogemail" persistent  max-width="490">
        <v-card>
            <v-card-title style="color:#fff" class="headline grey darken-1">Ganti email</v-card-title>
            <v-card-text>
               <v-layout pa-2 class="grey lighten-2" row>
                  
               <v-flex xs12>
                  <v-text-field
                     v-model="edited_email"
                     label="Email"
                     
                  ></v-text-field>
               </v-flex>
               </v-layout>
               
            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey darken-1" flat @click="dialogemail = false">Tutup</v-btn>
            <v-btn dark color="grey darken-1"  @click="updateEmail">Simpan</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-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="dialogemail" persistent  max-width="490">
        <v-card>
            <v-card-title style="color:#fff" class="headline grey darken-1">ganti email</v-card-title>
            <v-card-text>
               <v-layout pa-2 class="grey lighten-2" row>
                  <v-flex xs12>
                     <v-text-field
                        v-model="edited_email"
                        label="Email"
                     ></v-text-field>
                  </v-flex>
               </v-layout>
            </v-card-text>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey darken-1" flat @click="dialogemail = false">Tutup</v-btn>
            <v-btn dark color="grey darken-1"  @click="updateEmail">Simpan</v-btn>
            
            </v-card-actions>
        </v-card>
      </v-dialog>
      <v-card class="mb-2 pa-2">
         <v-layout mb-2 align-center row >

            <v-flex class="mx-auto" xs3 pr-2>
               <v-img
                  v-if="!selected_patient"
                  aspect-ratio="1"
                  class="grey lighten-2"
                >
                  
                </v-img>
               <v-img
                  v-if="selected_patient"
                  :src="selected_patient.photo"
                  
                  aspect-ratio="1"
                  class="grey lighten-2"
                >
                  <template v-slot:placeholder>
                    <v-layout row
                      class="fill-height ma-0"
                      align="center"
                      justify="center"
                    >
                      
                    </v-layout>
                  </template>
                </v-img>
            </v-flex>
         </v-layout>
         <v-layout row>
            <v-flex class="mx-auto text-xs-center" d-flex>
               <h3 v-if="!selected_patient" style="text-decoration:underline" class="body-2">NOT FOUND</h3>
               <h3 v-if="selected_patient" style="text-decoration:underline" class="body-2">{{selected_patient.T_OrderHeaderLabNumber}}</h3>
            </v-flex>
         </v-layout>
         <v-layout mb-2 row>
            <v-flex class="mx-auto text-xs-center" d-flex>
               <h3 v-if="!selected_patient" class="subtitle-2">NOT FOUND</h3>
               <h3 v-if="selected_patient" class="subtitle-2">{{selected_patient.patient_fullname}}</h3>
            </v-flex>
         </v-layout>
         <v-divider></v-divider>
         <v-layout pa-2 row>
            <h3 class="body-2">PENGIRIMAN HASIL</h3>
         </v-layout>
         <v-divider></v-divider>
         <v-layout mb-2 wrap>
            <v-flex class="xs12 pt-2">
               <v-chip  v-if="info_deliveries " v-for="delivery in info_deliveries" 
                  class="ma-1"
                  label
               >
                  {{delivery.label}}  
                  <span class="mono" v-if="delivery.code !== 'PICKUP' && delivery.code !== 'EMAIL'"> [{{delivery.destination}}]</span>
                  <span style="cursor:pointer" @click="changeEmail(delivery)" title="ganti email" class="mono" v-if="delivery.code !== 'PICKUP' && delivery.code === 'EMAIL'"> [{{delivery.destination}}]</span>
               </v-chip>
            </v-flex>
         </v-layout>
         <v-divider></v-divider>
         <v-layout pa-2 row>
            <h3 class="body-2">INFO TAGIHAN</h3>
         </v-layout>
         <v-divider></v-divider>
         <v-layout mt-1 mb-1 row>
            <v-flex class="xs5 pl-2">
               <h3 class="subtitle-1">TOTAL TAGIHAN</h3>
            </v-flex>
            <v-flex style="font-size:20px;font-weight:bold" class="mono xs7 pr-3 text-xs-right">
               <span v-if="info_bill">Rp {{convertMoney(info_bill.total_bill)}}</span>
               <span v-if="!info_bill">Rp -</span>
            </v-flex>
         </v-layout>
         <v-layout mb-1 row>
            <v-flex class="xs5 pl-2">
               <h3 class="body-1">TOTAL BAYAR</h3>
            </v-flex>
            <v-flex style="font-size:20px;font-weight:bold" class="mono xs7 pr-3 text-xs-right">
               <span v-if="info_bill">Rp {{convertMoney(info_bill.paid)}}</span>
               <span v-if="!info_bill">Rp -</span>
            </v-flex>
         </v-layout>
         <v-layout v-if="info_bill && info_bill.status !== 'Y'" mb-2 row>
            <v-flex class="xs5 pl-2">
               <h3 class="body-2">KURANG BAYAR</h3>
            </v-flex>
            <v-flex style="font-size:20px;font-weight:bold;color:red" class="mono xs7 pr-3 text-xs-right">
               <span v-if="info_bill && info_bill.status !== 'Y'">Rp {{convertMoney(info_bill.unpaid)}}</span>
               <span v-if="!info_bill">Rp -</span>
            </v-flex>
         </v-layout>
         <v-layout mb-2 row>
            <v-flex xs12 class="ma-2">
               <v-btn @click="goToCashier()" color="error" v-if="info_bill && info_bill.status !== 'Y'" block outline>BELUM LUNAS</v-btn>
               <v-btn color="success" v-if="info_bill && info_bill.status === 'Y'" block >LUNAS</v-btn>
            </v-flex>
         </v-layout>
         <v-divider></v-divider>
         <v-layout pa-2 row>
            <h3 class="body-2">INFO PEMERIKSAAN</h3>
         </v-layout>
         <v-divider></v-divider>
         <div v-if="info_test" v-for="test in info_test">
            <v-layout  mt-1 mb-1 row>
               <v-flex class="xs12 pl-2">
                  <h3 style="text-weight:bold" dark color="success" class="mono body-2">{{test.DocumentationGroupName}}</h3>
               </v-flex>
            </v-layout>
            <v-layout  mb-2 wrap>
               <v-flex class="xs12">
                  <v-chip v-for="detail in test.details"
                     class="ma-1"
                     label
                     v-if="detail.status !== 'X'"
                     color="success"
                     dark
                  >
                     {{detail.testname}}
                  </v-chip>
                  <v-chip v-for="detail in test.details"
                     class="ma-1"
                     label
                     v-if="detail.status === 'X'"
                     color="grey"
                     dark
                  >
                     {{detail.testname}}
                  </v-chip>
               </v-flex>
            </v-layout>
         </div>
      </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/getkerajaan",{
         nolab: this.nolab,
         groupid:this.selected_filter_kerajaan.id
      })
   },
   methods : {
      changeEmail(value){
         this.selected_email = value
         this.edited_email = value.destination
         this.dialogemail = true
      },
      convertMoney(money){
            return one_money(money)
        },
      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",{
            nolab: this.nolab,
            groupid:this.selected_filter_kerajaan.id
         })
      },
      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
               })
            }
        },
      updateEmail(){
           //console.log("closedialogaction")
            var prm = this.selected_email
            prm.edited_email = this.edited_email
             this.$store.dispatch("done/updateemail",prm)
        },
      goToCashier(){
         console.log(location)
         var xdate = this.selected_patient.T_OrderHeaderDate
         var noreg = this.selected_patient.T_OrderHeaderLabNumber
         var type = 'email'
        // location.replace("/one-ui/test/vuex/one-fo-cashier-new-payment/" + "?id=" +noreg+"&xdate="+xdate+"&type="+fo)
      }
   },
   computed: {
      dialogemail: {
         get() {
            return this.$store.state.done.dialog_email
         },
         set(val) {
            this.$store.commit("done/update_dialog_email",val)
         }
      },
      edited_email: {
         get() {
            return this.$store.state.done.edited_email
         },
         set(val) {
            this.$store.commit("done/update_edited_email",val)
         }
      },
      selected_patient(){
         return this.$store.state.patient.selected_patient
      },
      info_deliveries(){
         return this.$store.state.done.info_deliveries
      },
      info_test(){
         return this.$store.state.done.info_test
      },
      info_bill(){
         return this.$store.state.done.info_bill
      },
      filter_kerajaan: {
         get() {
            return this.$store.state.done.filter_kerajaan
         },
         set(val) {
            this.$store.commit("done/update_filter_kerajaan",val)
         }
      },
      selected_filter_kerajaan: {
         get() {
            return this.$store.state.done.selected_filter_kerajaan
         },
         set(val) {
            this.$store.commit("done/update_selected_filter_kerajaan",val)
            this.searchTransaction()
         }
      },
      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)
         }
      },
   },
   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,
         selected_email:'',
         //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>
