<template>
    <v-dialog
        v-model="dialog"    
        persistent
        max-width="800px"
        transition="dialog-transition"
    >
        
        <v-layout class="fill-height" column>
            <v-card class="grow" color="blue-grey lighten-2">
                <v-card-title primary-title class="title white--text pb-2">
                    HISTORI PEMERIKSAAN
                </v-card-title>
                <v-card-text class="pt-2 pb-2">
                    <v-layout row wrap>
                        <v-flex xs2 v-for="(px, i) in pxs" :key="i" pr-1>
                            <v-btn :color="is_selected_tab(px) ? 'blue' : 'white'" :dark="is_selected_tab(px)" block @click="select_tab(px)">{{ px.date.substr(0,10) }}</v-btn>
                        </v-flex>
                    </v-layout>

                    <v-layout row wrap>
                        <v-flex xs12 v-for="(px, i) in pxs" :key="i" v-show="is_selected_tab(px)">
                            <v-card>
                                <v-card-text class="pt-1 pb-1 pl-1 pr-1">
                                    <v-data-table
                                        :headers="headers" :items="px.data"
                                        :loading="isLoading"
                                        hide-actions class="elevation-1 table-history"
                                        >
                                        <template slot="items" slot-scope="props">
                                        <td class="text-xs-left pl-2 pr-2 pa-1 green--text" v-bind:class="is_selected(props.item)">
                                            {{ props.item.px_name }}
                                        </td>
                                        <td class="text-xs-left pl-2 pr-2 pa-1" v-bind:class="is_selected(props.item)">
                                            {{ props.item.result }}
                                        </td>
                                        <td class="text-xs-left pl-2 pr-2 pa-1" v-bind:class="is_selected(props.item)">
                                            {{ props.item.flag }}
                                        </td>

                                        </template>

                                    </v-data-table>
                                </v-card-text>
                            </v-card>
                        </v-flex>
                    </v-layout>

                    <!-- <v-expansion-panel>
                        <v-expansion-panel-content
                        v-for="(px, i) in pxs"
                        :key="i"
                        >
                        <template v-slot:header>
                            <div class="subheading">{{ px.date }}</div>
                        </template>
                        <v-card>
                            <v-card-text class="pt-1 pb-1">
                                <v-data-table
                                    :headers="headers" :items="px.data"
                                    :loading="isLoading"
                                    hide-actions class="elevation-1 table-history"
                                    >
                                    <template slot="items" slot-scope="props">
                                    <td class="text-xs-left pl-2 pr-2 pa-1 green--text" v-bind:class="is_selected(props.item)">
                                        {{ props.item.px_name }}
                                    </td>
                                    <td class="text-xs-left pl-2 pr-2 pa-1" v-bind:class="is_selected(props.item)">
                                        {{ props.item.result }}
                                    </td>
                                    <td class="text-xs-left pl-2 pr-2 pa-1" v-bind:class="is_selected(props.item)">
                                        {{ props.item.flag }}
                                    </td>

                                    </template>

                                </v-data-table>
                            </v-card-text>
                        </v-card>
                        </v-expansion-panel-content>
                    </v-expansion-panel> -->
                    
                    
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="white" flat @click="dialog = false">Tutup</v-btn>
                    <!-- <v-btn color="blue darken-1" :dark="btn_save_enabled" @click="save" :disabled="!btn_save_enabled">Simpan</v-btn> -->
                </v-card-actions>
                

            </v-card>
        </v-layout>
    </v-dialog>
</template>

<style>

.table-history table td {
    height: 40px !important
}


</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "PEMERIKSAAN",
               align: "left",
               sortable: false,
               width: "45%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HASIL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "35%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "FLAG",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],


         isLoading: false
      };
   },

   methods : {
      oneMoment : function(d) {
         return window.oneMoment(d)
      },

      select (item) {
        //  this.$store.commit('re_px/update_selected_rerun', item)
        //  this.$store.commit('re_px/update_dialog_rerun', false)

        //  let x = this.$store.state.re_px.pxs
        //  x[this.$store.state.re_px.selected_px_idx]['result'] = item.result
        //  this.$store.commit('re_px/update_pxs', {records:x})
      },

      is_selected (item) {
        //  let x = this.$store.state.re_patient.selected_patient
        //  if (!x)
        //     return ''
         
        //  if (x.T_OrderHeaderID == item.T_OrderHeaderID)
        //     return 'green lighten-4'

         return ''
      },

        select_tab (px) {
            this.selected_tab = px.id
        },

        is_selected_tab (px) {
            
            if (px.id == this.selected_tab)
                return true
            return false
        }
   },

   computed : {
      pxs () {
         return this.$store.state.re_history.pxs
      },

      dialog : {
          get () { return this.$store.state.re_history.dialog_history },
          set (v) { this.$store.commit('re_history/update_dialog_history', v) }
      },

        selected_tab : {
            get () { return this.$store.state.re_history.selected_tab },
            set (v) { this.$store.commit('re_history/update_selected_tab', v) }
        }
   },

   mounted () {
    //   this.$store.dispatch('re_px/search_rerun')
   },

   watch : {
       dialog (n, o) {
           if (n && !o) {
               this.$store.dispatch('re_history/history')
           }
       }
   }
}
</script>
