<template>
   <v-layout class="fill-height flex-card" column>
      <v-card class="fill-height">
         <!-- <v-subheader>
            <h3 class="title">DAFTAR PASIEN</h3>
         </v-subheader> -->
            <hr style="border-top:0px solid #c8c8c8;" />
         <!--
            <v-progress-linear :indeterminate="true" class="mt-1 mb-1" v-if="search_status == 1"
               height="10" striped></v-progress-linear>
         -->
         <v-data-table
            :headers="headers" :items="pxs"
            :loading="search_status == 1"
            hide-actions class="xelevation-1">
            
            <template slot="items" slot-scope="props">
            <tr :class="{'red lighten-4': props.item.verification == 'Y', 
               'green lighten-4': props.item.validation== 'Y' }"> 
               <td class="text-xs-left pt-2 pb-2 pr-2 green--text" v-bind:class="margin_left(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'N'" colspan="7">
                  {{ props.item.t_testname }}
               </td>

               <td class="text-xs-left pt-2 pb-2 pr-2 green--text" v-bind:class="margin_left(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                  {{ props.item.t_testname }}
               </td>

               <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'" style="position: relative">
                  
                  <v-textarea
                      label=""
                      solo
                      rows=1
                      hide-details
                      v-on:keyup="update_result(props.index, $event.target.value)"
                      :value="props.item.result"
                      v-if="props.item.is_quantitative == 'Y'"
                      auto-grow
                      :readonly="props.item.T_OrderDetailVerification == 'Y'"
                      :flat="props.item.T_OrderDetailVerification == 'Y'"
                      v-show="(props.item.sample_worklist_receive == 'Y' && props.item.pre_analytic && props.item.resample == 'N') ||
                                (props.item.resample == 'Y' && props.item.resample_status == 'W')"
                  ></v-textarea>

                  <v-select
                     :items="props.item.template"
                     label=""
                     item-value="T_ResultTemplateValue"
                     item-text="T_ResultTemplateValue"
                     v-if="props.item.is_quantitative == 'N'"
                     solo
                     hide-details
                     :value="props.item.result"
                     @change="update_result(props.index, $event)"
                     :disabled="props.item.T_OrderDetailVerification == 'Y'"
                     v-show="(props.item.sample_worklist_receive == 'Y' && props.item.pre_analytic && props.item.resample == 'N') ||
                                (props.item.resample == 'Y' && props.item.resample_status == 'W')"
                  >
                     <template v-slot:append-outer>
                        <v-btn icon dark color="blue" small class="btn-outer ma-0" @click="template_new(props.item)"><v-icon>add_circle</v-icon></v-btn>
                      </template>
                  </v-select>

                  <span class="body-1" v-show="props.item.sample_worklist_receive != 'Y' || !props.item.pre_analytic || (props.item.resample == 'Y' && props.item.resample_status != 'W')">{{init_result(props.item)}}</span>

                  <!-- <v-textarea 
                     solo 
                     hide-details 
                     rows="2" 
                     :value="props.item.result"
                     @change="update_result(props.index, $event)"
                     >
                  </v-textarea> -->
                  
                  <v-btn v-if="props.item.is_quantitative == 'Y' && props.item.result_instrument_n > 0 " color="blue lighten-2" class="btn_rerun" icon flat small @click="rerun_me(props.index, props.item)">
                     <v-img :src="icon_info" aspect-ratio="1" height="20" contain></v-img>
                  </v-btn>
               </td>

               <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                  {{ !init_blank(props.item) ? props.item.result_flag : '' }}
               </td>

               <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                    {{ !init_blank(props.item) ? props.item.normal_note : '' }}
                    <a href="javascript:;" v-show="props.item.normal_note != '' && props.item.normal_note != null && props.item.sample_processing == 'Y' && !init_blank(props.item)" @click="normalChange(props)"><v-icon small color="blue">create</v-icon></a>
               </td>

               <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                    {{ !init_blank(props.item) ? props.item.unit_name : '' }}
               </td>

                <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                    {{ !init_blank(props.item) ? props.item.methode_name : '' }}
                    <a href="javascript:;" v-show="props.item.methode_name != '' && props.item.methode_name != null && props.item.sample_processing == 'Y' && !init_blank(props.item)" @click="methodeChange(props)"><v-icon small color="blue">create</v-icon></a>
               </td>

               <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                   @click="select(props.index, props.item)" v-if="props.item.is_result == 'Y'">
                  <v-textarea
                      label=""
                      solo
                      rows=1
                      hide-details
                      v-on:keyup="update_note(props.index, $event.target.value)"
                      :value="props.item.note"
                      auto-grow
                      :readonly="props.item.T_OrderDetailVerification == 'Y'"
                      :flat="props.item.T_OrderDetailVerification == 'Y'"
                      v-show="props.item.sample_worklist_receive == 'Y' && props.item.pre_analytic && !init_blank(props.item)"
                  ></v-textarea>
               </td>
            </tr>
            </template>

         </v-data-table>

         
      </v-card>

      <one-process-re-rerun-result></one-process-re-rerun-result>
      <one-process-re-history></one-process-re-history>
      <v-snackbar
         v-model="snackbar"
         :timeout="5000"
         bottom right
      >
         {{ save_text }}
         <v-btn
         color="pink"
         flat
         @click="snackbar = false"
         >
         Close
         </v-btn>
      </v-snackbar>

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

<style scoped>
div.v-table__overflow {
   height:640px!important;
   overflow-y:scroll;
}
.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;
}

.btn_rerun {
   position: absolute; 
   top: 10px;
   right: 2px
}

.flex-card {
    min-height: -webkit-min-content;
  display: flex;
}

.v-text-field.v-text-field--solo .v-input__control {
    min-height: 40px;
}

.v-textarea.v-text-field--box.v-text-field--single-line .v-text-field__prefix, .v-textarea.v-text-field--box.v-text-field--single-line textarea, .v-textarea.v-text-field--enclosed.v-text-field--single-line .v-text-field__prefix, .v-textarea.v-text-field--enclosed.v-text-field--single-line textarea {
    margin-top: 6px;
}
</style>

<script>
module.exports = {
   components : {
      'one-process-re-rerun-result': httpVueLoader('./oneProcessReRerunResult.vue'),
      'one-process-re-history': httpVueLoader('./oneProcessReHistory.vue'),
      'one-dialog-template': httpVueLoader('./oneProcessReDialogResultTemplateNew.vue')
   },

   data() {
      return {
         query: "",
         save_text: "Data telah tersimpan.",
         items: [],
         headers: [
            {
               text: "NAMA PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HASIL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "FLAG",
               align: "left",
               sortable: false,
               value: "mr",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NILAI NORMAL",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "UNIT",
               align: "left",
               sortable: false,
               value: "mr",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "METODE",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "CATATAN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "20%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],

         isLoading: false
      };
   },

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

      icon_info () {
         return window.BASE_URL + '/one-ui/apps/image/info.png'
      },

      snackbar : {
         get () { return this.$store.state.re_px.snackbar },
         set (v) { this.$store.commit('re_px/update_snackbar', v) }
      },

      search_status () {
         return this.$store.state.re_px.search_status
      },

        selected_px () {
            return this.$store.state.re_px.selected_px
        }
   },

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

        select (idx, item) {
            this.$store.commit('re_px/update_selected_px', item)
            this.$store.commit('re_px/update_selected_px_idx', idx)
        },

        is_selected (item) {

            return ''
        },

        margin_left (item) {
            if (item.level == 2)
                return 'pl-4'

            if (item.level == 3)
                return 'pl-5'

            return 'pl-2'
        },

        rerun_me (idx, item) {
           if(item.verification == 'Y' ) return
            this.select(idx, item)
            this.$store.commit('re_px/update_dialog_rerun', true)
        },

        update_result(idx, result) {
            let x = this.$store.state.re_px.pxs
            x[idx]['result'] = result

            this.$store.commit('re_px/update_pxs', {records:x})
        },

        update_note(idx, note) {
            
            let x = this.$store.state.re_px.pxs
            x[idx]['note'] = note

            this.$store.commit('re_px/update_pxs', {records:x})
        },

        template_new(item) {
            this.$store.commit('re_px/update_selected_px', item)
            this.$store.commit('re_px/update_dialog_template_new', true)
        },

        methodeChange(d) {
           if (d.item.verification == 'Y') return
            this.select(d.index, d.item)
            this.$store.commit('normal_method/update_nattest_id', d.item.nattest_id)
            this.$store.commit('normal_method/update_id', d.item.id)
            this.$store.commit('normal_method/update_dialog_method', true)
        },

        normalChange(d) {
            return
        },

        init_result(x) {
            if (x.verification == "Y" || x.validation == "Y")
                return x.result
            
            let susul_date = moment(x.T_OrderPromiseDateTime).format('DD.MM.YYYY HH:mm')
            // Override
            if (x.resample == "Y") {
                if (x.resample_status == "N")
                    return "Bahan belum"
                if (x.resample_status == "R")
                    return "Hasil Menyusul : " + susul_date
                if (x.resample_status == "W")
                    return x.result
            }

            if (x.sample_receive != 'Y')
                return "Bahan belum"
            if (x.sample_receive == 'Y' && !x.pre_analytic)
                return "Belum Pre Analitik"
            if (x.sample_receive == 'Y' && x.pre_analytic)
            {
                if (x.sample_worklist_receive == "Y")
                    return x.result
                else
                    return "Hasil Menyusul : " + susul_date
            }
        },

        init_blank(x) {
            if (x.verification == "Y" || x.validation == "Y")
                return false

            // Override
            if (x.resample == "Y") {
                if (x.resample_status == "N" || x.resample_status == "R")
                    return true                
            }

            if (x.sample_receive != 'Y' || !x.pre_analytic || x.sample_worklist_receive != "Y")
                return true

            return false
        }
    },

   mounted () {
    //   this.$store.dispatch('re_patient/search')
   }
}
</script>
