<template>
    <v-dialog
        v-model="dialog"    
        persistent
        max-width="500px"
        transition="dialog-transition"
    >
        

        <v-layout class="fill-height" column>
            <v-card class="grow">
                <v-card-text>
                    <v-data-table
                        :headers="headers" :items="reruns"
                        :loading="isLoading"
                        hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                        <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)">
                            {{ props.item.instrument_date.substr(0,10).split('-').reverse().join('-') }}
                            {{ props.item.instrument_date.substr(11,5) }}
                        </td>
                        <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)">
                            {{ props.item.instrument_name }}
                        </td>
                        <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)">
                            {{ props.item.result }}
                        </td>

                        <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)">
                            <v-btn flat icon color="green" @click="select(props.item)">
                                <v-icon>get_app</v-icon>
                            </v-btn>
                        </td>
                        </template>

                    </v-data-table>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" 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 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 = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "TANGGAL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ALAT",
               align: "left",
               sortable: false,
               value: "mr",
               width: "35%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HASIL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "30%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "",
               align: "left",
               sortable: false,
               value: "mr",
               width: "5%",
               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 ''
      }
   },

   computed : {
      reruns () {
         return this.$store.state.re_px.reruns
      },

      dialog : {
          get () { return this.$store.state.re_px.dialog_rerun },
          set (v) { this.$store.commit('re_px/update_dialog_rerun', v) }
      }
   },

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

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