<template>
   <v-layout class="fill-height" column>
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout align-center row>
            <v-flex xs3>
               <v-menu 
                  v-model="menufilterdatestart"
                  :close-on-content-click="false"
                  :nudge-right="40"
                  lazy
                  transition="scale-transition"
                  offset-y
                  full-width
                  max-width="290px"
                  min-width="290px"
                  >
                  <template v-slot:activator="{ on }">
                     <v-text-field
                        class="mr-2"
                     v-model="filterComputedDateFormattedStart"
                     label="Tanggal Transaksi"
                     
                     outline
                     hide-details
                     readonly
                     v-on="on"
                     @blur="date = deFormatedDate(filterComputedDateFormattedStart)"
                     ></v-text-field>
                  </template>
                  <v-date-picker v-model="xdatestart" no-title @input="menufilterdatestart = false"></v-date-picker>
               </v-menu>
            </v-flex>
            <v-flex xs3>
               <v-text-field 
                  style="font-size:14px"
                  label="No Reg / Nama"
                  class="mr-1"    
                  outline
                  v-on:keyup.enter="searchPatient"
                  v-model="filter_search"
                  hide-details
               ></v-text-field>
            </v-flex>
            <v-flex xs3>
               <v-autocomplete
                  label="Kel. Pelanggan"
                  v-model="selected_company"
                  class="ma-1"
                  :items="xcompanies"
                  :search-input.sync="search_company"
                  auto-select-first
                  hide-details
                  style="font-size:14px"
                  outline
                  no-filter
                  item-text="name"
                  return-object
                  :loading="isLoading"
                  no-data-text="Semua Kel. Pelanggan"
               >
                  <template slot="item" slot-scope="{ item }">
                  <v-list-tile-content>
                     <v-list-tile-title v-text="item.name"></v-list-tile-title>
                  </v-list-tile-content>
                  </template>
               </v-autocomplete>
            </v-flex>
            <v-flex class="text-xs-right pr-2" xs3>
               <span class="font-weight-black title">TOTAL PASIEN : </span>
               <span class="font-weight-black title mono">{{total_all}}</span>
            </v-flex>
         </v-layout>
      </v-card>
      <v-card >
         
            <v-layout align-center row>
               <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                  <v-data-table 
                     :headers="headers" 
                     :items="patients"
                     :loading="isLoading"
                     hide-actions
                     class="elevation-1 fixed_header">
                     <template slot="items" slot-scope="props">
                        <td style="width:50px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           {{ props.item.xno }}
                        </td>
                        <td style="width:135px" class="align-center text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <p class="mono font-weight-bold caption ma-0">{{ props.item.order_date}}</p>
                           
                              <kbd v-if="splitpromise(props.item.order_promise).length > 0" 
                                 v-for="promise in splitpromise(props.item.order_promise)"
                              >{{promise}}</kbd>
                         
                        </td>
                        <td style="width:180px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-flex d-flex>
                              <span class="caption font-weight-black mono">{{props.item.no_reg}}</span> 
                              <span style="color:#800000" class="pl-1 font-weight-bold caption mono">{{props.item.no_reg_ext}}</span>
                           </v-flex>
                           <v-flex d-flex>
                              <p class="font-weight-black ma-0" style="font-size:11px">{{props.item.patient_name}}</p>
                           </v-flex>
                           <v-flex d-flex>
                              <p class="ma-0 mono caption">{{props.item.company_name}} : {{props.item.mou_name}}</p>
                           </v-flex>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_order"
                                 class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_sampling"
                                 class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_verifications"
                                 class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_process"
                                 class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_result_verification"
                                class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_result_validation"
                                class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                        <td style="width:160px" class="text-xs-center pa-1" v-bind:class="{'amber lighten-4':isSelected(props.item),'teal white--text':props.item.coming === 'Y','amber':props.item.iscito === 'Y'}" @click="selectMe(props.item)">
                           <v-btn small v-for="test in props.item.details_print"
                              class="mono mr-1 white--text"
                                 :color="getcolor(test.status)"
                                 :title="test.group_name"
                              >
                                 {{getName(test.group_name)}}
                           </v-btn>
                        </td>
                     </template>
                  </v-data-table>
                  <v-divider></v-divider>
                  <v-pagination
                     style="margin-top:10px;margin-bottom:5px"
                     v-model="curr_page"
                     :length="xtotal_page"
                  ></v-pagination>
               </v-flex>
            </v-layout>
         
      </v-card>
       <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="closeDialogInfo()"></one-dialog-info>
       <one-dialog-timeline></one-dialog-timeline>
       <!--<one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>-->
   </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;
   }
   .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;
  }
  table {
  border-collapse: collapse;
}


table, th, td {
  border: 1px solid #00000075;
}

   .fixed_header tbody {
   display: block;
   max-height: 500px;
   overflow-y: scroll;
   }

   .fixed_header thead,
   tbody tr {
   display: table;
   width: 100%;
   table-layout: fixed;
   }
</style>

<script>
module.exports = {
components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-timeline':httpVueLoader('./oneDialogTimeline.vue')
   },
   mounted() {
      this.$store.dispatch("patientlist/searchcompany", this.search_company)
   },
   methods : {
      getName(name){
         var rtn = name
         if(name.length > 18)
            rtn = name.substring(0, 18)+'..'

         return rtn
      },
      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')}`
      },
      getcolor(color){
         if(color == 'N'){
            return 'blue-grey'
         }
         if(color == 'P'){
            return 'orange'
         }
         if(color == 'Y'){
            return '#1cbaab'
         }
      },
      splitpromise(promises){
         if(promises){
            return promises.split(",")
         }
         else{
            return []
         }
      },
      isSelected(p) {
         return p.xid == this.$store.state.patientlist.selected_patient.xid
      },
      searchPatient() {
         this.$store.dispatch("patientlist/search",{
            search:this.filter_search,
            companyid:this.selected_company.id,
            xdate:this.xdatestart,
            current_page:this.curr_page
         })
      },
      selectMe(pat) {
         var patients = this.$store.state.patientlist.patients
         console.log(pat)
         this.$store.commit("patientlist/update_selected_patient",pat)
         var idx = _.findIndex(patients, function(o) { return o.xid == pat.xid })
         this.$store.commit("patientlist/update_last_id",idx) 
      },
      thr_search_company: _.debounce(function() {
         this.$store.dispatch("patientlist/searchcompany", this.search_company)
      }, 2000),
   },
   computed: {
      curr_page: {
         get() {
            return this.$store.state.patientlist.current_page
         },
         set(val) { 
            this.$store.commit("patientlist/update_current_page",val)
            this.searchPatient()
         }
      },
      xtotal_page: {
         get() {
            return this.$store.state.patientlist.total_patients
         },
         set(val) {
            this.$store.commit("patientlist/update_total_patients",val)
         }
      },
      filterComputedDateFormattedStart () {
         return this.formatDate(this.xdatestart)
      },
      xdatestart : {
         get() {
            return this.$store.state.patientlist.start_date
         },
         set(val) {
           this.$store.commit("patientlist/update_start_date",val)
           this.searchPatient()
         }
      },
      isLoading() {
         return this.$store.state.patientlist.search_status == 1
      },
      patients() {
         return this.$store.state.patientlist.patients
      },
      total_all() {
         return this.$store.state.patientlist.total_all
      },
      opendialoginfo: {
         get() {
               return this.$store.state.patientlist.open_dialog_info
         },
         set(val) {
               this.$store.commit("patientlist/update_open_dialog_info",false)
         }
      },
      msginfo(){
         return this.$store.state.patientlist.msg_info
      },
      filter_search: {
         get() {
            return this.$store.state.patientlist.filter_search
         },
         set(val) {
            this.$store.commit("patientlist/update_filter_search",val)
         }
      },
      xcompanies() {
         return this.$store.state.patientlist.companies
      },
      selected_company: {
         get() {
            return this.$store.state.patientlist.selected_company
         },
         set(val) {
            this.$store.commit("patientlist/update_selected_company", val)
            this.searchPatient()
         }
      },
   },
   watch: {
      search_company(val, old) {
         if (val == old) return;
         if (!val) return;
         if (val.length < 1) return;
         if (this.$store.state.patientlist.update_autocomplete_status == 1) return;
         this.thr_search_company();
      }
   },
   data() {
      return {
         menufilterdatestart:false,
         date: new Date().toISOString().substr(0, 10),
         msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !",
         items: [],
         search_company: "",
         //isLoading: false,
         page:1,
         headers: [
            {
               text: "NO",

               sortable: false,
               value: "mr",
               width: "50px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "ORDER / JANJI HASIL",

               sortable: false,
               value: "lab",
               width: "135px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "PASIEN",

               sortable: false,
               value: "name",
               width: "180px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "STATUS ORDER",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "SAMP. COLLECT",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "SAMP. VERIF",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "PROCESS",
  
               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "RESULT VERIF",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "RESULT VALID",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            },
            {
               text: "PRINT",

               sortable: false,
               value: "status",
               width: "160px",
               class: "pa-2 text-xs-center  blue lighten-3 white--text"
            }
         ]
      };
   }
}
</script>
