<template>

   <v-dialog
      v-model="dialog"
      width="65%"
      >
      <v-card>
         <v-card-title
            class="teal subheading  white--text pt-2 pb-2"
            primary-title
            align-center
            >
            <span class="font-weight-thin">RIWAYAT PASIEN</span>
         </v-card-title>
            <v-card-text class="pt-2 pb-1">
               <v-layout v-for="(history,index) in histories" @click="opendetail(history,index)" row>
                  <v-flex xs12>
                     <v-layout  align-center mb-1 row>
                        <v-flex xs12>
                           <v-card flat :color="getcolorlist(history.xshow)" class="white--text pt-1 pb-1 pl-2 pr-2">
                              <v-layout row>
                                 <v-flex  xs10>
                                    <h3 class="subheading">
                                       <kbd class="mono">{{history.labnumber_ext}} | {{history.xdate}} | {{history.M_MouName}} | <span :title="history.realdoctor">{{history.M_DoctorName}}</span></kbd>
                                    </h3>
                                 </v-flex>
                                 <v-flex class="text-xs-right" xs2>
                                    <!--<v-icon v-if="history.xshow === 'N'" style="cursor:pointer"  @click="opendetail(history,index)" dark>more_horiz</v-icon>
                                    <v-icon v-if="history.xshow === 'Y'" style="cursor:pointer"  @click="opendetail(history,index)" dark>minimize</v-icon>-->
                                 </v-flex>
                              </v-layout>
                           </v-card>
                        </v-flex>
                     </v-layout>
                     <v-layout v-if="history.xshow === 'Y'" mb-2 row>
                        <v-flex xs12>
                           <v-card flat color="#fcac8c" class="pt-2 pb-0 pl-2 pr-2">
                              <v-layout row>
                                 <v-flex class="text-xs-left" xs12>
                                    <v-btn @click="setToOrder(history.T_OrderHeaderID)" class="mb-0 mt-0 ml-0" dark color="#3c70a4">
                                       jadikan order
                                    </v-btn>
                                 </v-flex>
                              </v-layout>
                              <v-divider dark class="mt-1 mb-1"></v-divider>
                              <v-card>
                              <v-layout pl-3 pt-2 pb-2 pr-3 row>
                                 
                                 <v-flex  xs2>
                                    <h5 class="subtitle-2">NO REG</h5>
                                    <p class="body-1 mb-0">{{history.labnumber_ext}}</p>
                                 </v-flex>
                                 <v-flex  xs2>
                                    <h5 class="subtitle-2 ma-0 pa-0">TANGGAL</h5>
                                    <p class="body-1 mb-0">{{history.xdate}}</p>
                                 </v-flex>
                                 <v-flex  xs4>
                                    <h5 class="subtitle-2 ma-0 pa-0">DOKTER</h5>
                                    <p class="body-1 mb-0">{{history.M_DoctorName}}</p>
                                 </v-flex>
                                 <v-flex  xs4>
                                    <h5 class="subtitle-2 ma-0 pa-0">AGREEMENT</h5>
                                    <p class="body-1 mb-0">{{history.M_MouName}}</p>
                                 </v-flex>
                                 
                              </v-layout>
                              </v-card>
                              <v-divider dark class="mt-1 mb-1"></v-divider>
                              <v-card>
                              <v-layout pl-3 pt-2 pb-2 pr-3 row>
                                 
                                    <v-flex  xs6>
                                       <h5 class="subtitle-2 ma-0 pa-0">CATATAN PASIEN</h5>
                                       <p class="body-1 mb-0">{{history.M_PatientNote}}</p>
                                    </v-flex>
                                    <v-flex  xs6>
                                       <h5 class="subtitle-2 ma-0 pa-0">CATATAN FO</h5>
                                       <p class="body-1 mb-0">{{history.T_OrderHeaderFoNote}}</p>
                                    </v-flex>
                                 
                              </v-layout>
                              </v-card>
                              <v-divider dark class="mt-1 mb-1"></v-divider>
                              <v-layout row>
                                 <v-flex xs12>
                                    <v-data-table
                                       :headers="headers"
                                       :items="history.details"
                                       class="elevation-1"
                                       hide-actions
                                    >
                                       <template v-slot:items="props">
                                          <td>{{ props.item.test_name }}</td>
                                          <td class="text-xs-right">{{ props.item.str_price }}</td>
                                          <td class="text-xs-right">{{ props.item.str_disc }}</td>
                                          <td class="text-xs-right">{{ props.item.str_total }}</td>
                                       </template>
                                       <template v-slot:footer>
                                          <td><strong>TOTAL</strong></td>
                                          <td class="text-xs-right"><strong>{{ history.T_OrderHeaderSubTotal }}</strong></td>
                                          <td class="text-xs-right"><strong>{{ history.total_disc }}</strong></td>
                                          <td class="text-xs-right"><strong>{{ history.T_OrderHeaderTotal }}</strong></td>
                                       </template>
                                    </v-data-table>
                                 </v-flex>
                              </v-layout>
                              <v-divider dark class="mt-1 mb-1"></v-divider>
                              <v-layout mb-2 pb-2 row>
                                 <v-flex  xs12>
                                    <v-card>
                                       <v-layout v-for="delivery in history.deliveries" pl-3 pt-2 pb-2 pr-3 row>
                                             <v-flex  xs12>
                                                <h5 class="subtitle-2 ma-0 pa-0">{{delivery.M_DeliveryName.toUpperCase() }}</h5>
                                                <p class="body-1 mb-0">{{delivery.T_OrderDeliveryDestination}}</p>
                                                <p class="mb-0"><kbd>catatan : {{ delivery.xnote }}</kbd></p>
                                             </v-flex>
                                       </v-layout>
                                    </v-card>
                                 </v-flex>
                              </v-layout>
                           </v-card>
                        </v-flex>
                     </v-layout>
                  </v-flex>
               </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn
                  color="grey"
                  flat
                  @click="dialog = false"
                  >
                  Tutup
               </v-btn>
            </v-card-actions>
      </v-card>
   </v-dialog>
</template>
<style scoped>
.v-list--two-line .v-list__tile {
    height: 55px!important;
}
.v-dialog__container {
   display: block !important;
}
</style>
<script>
module.exports = {
   components : {
      'patient-history': httpVueLoader('./patientHistory.vue')
   },
   methods : {
      setToOrder(id){
          this.$store.dispatch('history/get_databyorder_id', {'order_id':id})
      },
      getcolorlist(value){
         var rtn = "teal lighten-2"
         if(value === 'Y')
            rtn = "#ff8a5c"

         return rtn
      },
      opendetail(value,idx){
         console.log(value.xshow)
         console.log(idx)
         var all = this.$store.state.history.histories
         all[idx].xshow = value.xshow == 'N'?'Y':'N'
         console.log(all[idx].xshow)
         console.log(all)
         this.$store.commit('history/update_histories',all)
      }
   },
   computed: {
      no_history() {
         if (! this.$store.state.patient.selected_patient.M_PatientID) return true
         return this.$store.state.history.histories.length == 0
      },
      dialog: {
         get() {
            return this.$store.state.history.history_dialog
         },
         set(val) {
            this.$store.commit('history/update_history_dialog',val)
         }
      },
      histories(){
         return this.$store.state.history.histories
      }
   },
   data () {
      return {
         headers: [
            {
               text: 'PEMERIKSAAN',
               align: 'left',
               sortable: false,
               
            },
            { text: 'BRUTO',align: 'right',sortable: false},
            { text: 'DISKON',align: 'right',sortable: false },
            { text: 'HARGA',align: 'right',sortable: false}
         ]
      }
   },
   watch : {
        
   }
}
</script>
