<template>
  <v-layout class="mb-2 " column>
    <v-dialog v-model="dialog_list_test" scrollable max-width="420px">
      <v-card>
        <v-card-title class="font-weight-bold">Pemeriksaan Terpilih</v-card-title>
        <v-divider></v-divider>
        <v-card-text style="height: 300px;">
          <v-text-field
            v-for="test in selected_test" :key="test"
            label=""
            :value="test.T_TestName"
            disabled
            hide-details
          ></v-text-field>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary darken-1" flat @click="dialog_list_test = false">Tutup</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="dialoginfo" persistent  max-width="290">
            <v-card>
                <v-card-title
                    dark
                    class="headline error pt-2 pb-2"
                    primary-title
                    style="color:white"
                >
                    <h4 dark>Info</h4>
                </v-card-title>
                <v-card-text>
                    {{msginfo}}
                </v-card-text>
                <v-card-actions>
                <v-spacer></v-spacer>
                    <v-btn small color="primary darken-1 text-sm-right" flat @click="dialoginfo = false">Tutup</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    <v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
      {{ msgsnackbar }}
      <v-btn flat @click="updateAlert_success(false)">
        Tutup
      </v-btn>
    </v-snackbar>
    <v-card  v-if="selected_tab.id !== 'ADDITIONAL' && selected_tab.id !== 'HISTORY'"  height="650px">
      <v-system-bar color="primary darken-4" dark>
        <v-spacer></v-spacer>
        <v-icon small>mdi-square</v-icon>
        <v-icon class="ml-1" small>mdi-circle</v-icon>
        <v-icon class="ml-1" small>mdi-triangle</v-icon>
      </v-system-bar>
      <v-toolbar color="primary accent-4" cards dark flat>
        <v-toolbar-title class="title font-weight-regular">{{ selected_tab.name }}</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-chip @click="getData('TEXT')" v-if="selected_tab.id === 'VITAL' && type_field === 'TEXT'" label color="primary darken-4">Text</v-chip>
        <v-chip @click="getData('FORM')" v-if="selected_tab.id === 'VITAL' && type_field === 'TEXT'" label color="blue darken-5">Form</v-chip>
        <v-chip @click="getData('TEXT')" v-if="selected_tab.id === 'VITAL' && type_field === 'FORM'" label color="blue darken-5">Text</v-chip>
        <v-chip @click="getData('FORM')" v-if="selected_tab.id === 'VITAL' && type_field === 'FORM'" label color="primary darken-4">Form</v-chip>
      </v-toolbar>
      <v-form ref="form" v-model="form" class="pl-3 pr-3 pb-2 pt-2">

        <v-textarea v-if="type_field === 'TEXT' && selected_tab.id !== 'DIAGPRIMER' && selected_tab.id !== 'DIAGSEKUNDER'" :disabled="selected_patient.orderIsCheck === 'D'" v-model="xnote"  box color="deep-purple" label="Keterangan" rows="23"></v-textarea>
        <v-textarea  v-if="selected_tab.id == 'DIAGPRIMER' || selected_tab.id == 'DIAGSEKUNDER'" :disabled="selected_patient.orderIsCheck === 'D'" v-model="xnote"  box color="deep-purple" label="Keterangan" rows="19"></v-textarea>
        <v-autocomplete
          v-if="selected_tab.id == 'DIAGPRIMER'"
          label="ICD-10"
          v-model="selected_icd10_primer"
          :items="icd10_primer"
          :search-input.sync="search_icd10primer"
          auto-select-first
          class="pb-2"
          no-filter
          item-text="display_name"
          return-object
          :loading="isLoading"
          no-data-text="Ketikkan pencarian ICD-10"
          clearable
          >
          <template
              slot="item"
              slot-scope="{ item }"
              >
              <v-list-tile-content>
                  <v-list-tile-title v-text="item.display_name"></v-list-tile-title>
              </v-list-tile-content>
          </template>
      </v-autocomplete>
      <v-autocomplete
      class="pb-2"
          v-if="selected_tab.id == 'DIAGSEKUNDER'"
          label="ICD-10"
          v-model="selected_icd10_sekunder"
          :items="icd10_sekunder"
          :search-input.sync="search_icd10sekunder"
          auto-select-first
          no-filter
          item-text="display_name"
          return-object
          :loading="isLoading"
          no-data-text="Ketikkan pencarian ICD-10"
          clearable
          >
          <template
              slot="item"
              slot-scope="{ item }"
              >
              <v-list-tile-content>
                  <v-list-tile-title v-text="item.display_name"></v-list-tile-title>
              </v-list-tile-content>
          </template>
      </v-autocomplete>
        
        

        <template v-if="type_field === 'FORM'">
          
        <v-card height="477px" elevation="0" class="mb-2">
          <div  class="x_form" v-for="(fisik,idx_f) in fisiks" :key="idx_f" >

        <v-layout pb-2 row>
            <v-flex class="pt-1" xs12>
              <v-subheader red--text text--lighten-1> 
                
                {{getnamelabel(fisik.title)}}
                <v-flex text-md-right>
                    <v-btn v-if="fisik.details[0].table_name === 'status_gizi'" :disabled="cantedit"  @click="changeStandartBMI(idx_f)" small color="info">{{fisik.standart_bmi}}</v-btn>
                </v-flex>
            </v-subheader>
            <v-divider class="mb-2" ></v-divider>
                <div v-if="fisik.type_form === 'VXX+'" >
                    <v-layout pl-2  pb-1 pt-1 v-for="(f_detail,kdx_detail) in generate_rows(fisik.details)" :key="kdx_detail"  wrap>
                        <v-flex v-for="f_cols in f_detail" :key="f_cols" xs6 pa-1>
                            <v-layout v-if="f_cols.type === 'vxx-vv'" class="pb-2" align-center row>
                                <v-flex  xs4>
                                    <span style="font-size:12px" >{{getnamelabel(f_cols.label)}}</span><br/>
                                    <v-btn class="mt-1" @click="changStandartTensi(idx_f,f_cols)" 
                                        style="font-size:10px;height: 20px;width: auto;min-width: 5px;margin: 0;" 
                                        small 
                                        v-if="f_cols.standart !== ''" 
                                        color="info">
                                        {{f_cols.standart}} 
                                    </v-btn>
                                </v-flex>
                                <v-flex xs4>
                                    <v-text-field
                                    
                              
                                        v-model="f_cols.value"
                                        outline
                                          @change="changeVXXValuePlus(idx_f,f_cols)"
                                          :disabled="cantedit || selected_patient.orderIsCheck === 'D'"
                                        single-line
                                        hide-details
                                    ></v-text-field>
                                    <span  v-if="f_cols.standart !==''" class='d-flex mt-1' 
                                        style="font-size:10px;font-weight:600" 
                                        :class="getcolortensi(f_cols)">{{getnamelabel(f_cols.value_x)}}</span> 
                                </v-flex>
                                <v-flex xs4 pl-1>
                                    <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.unit)}}</span>
                                </v-flex>
                                
                            </v-layout>
                            <v-layout v-if="f_cols.type === 'vxx-xx'" class="pb-2" align-center  row>
                                <v-flex xs4><span style="font-size:12px" >{{getnamelabel(f_cols.label)}}</span></v-flex>
                                <v-flex xs1>
                                    <v-checkbox row
                                        class="mt-0 pt-0"
                                        v-model="f_cols.chx_y"
                                        @change="changeVXXChx(idx_f,f_cols,'y')"
                                        :disabled="cantedit || selected_patient.orderIsCheck === 'D'"
                                        color="red"
                                        hide-details
                                        ></v-checkbox>
                                </v-flex>
                                <v-flex xs3>
                                    <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.label_y)}}</span>
                                </v-flex>
                                <v-flex xs1>
                                    <v-checkbox row
                                        class="mt-0 pt-0"
                                        v-model="f_cols.chx_x"
                                        @change="changeVXXChx(idx_f,f_cols,'x')"
                                        :disabled="cantedit || selected_patient.orderIsCheck === 'D'"
                                        color="red"
                                        hide-details
                                        ></v-checkbox>
                                </v-flex>
                                <v-flex xs3>
                                    <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.label_x)}}</span>
                                </v-flex>
                            </v-layout>
                            <v-layout v-if="f_cols.type === 'vxx-xv'" class="pb-2" align-center  row>
                                <v-flex xs4><span style="font-size:12px" >{{getnamelabel(f_cols.label)}}</span></v-flex>
                                <v-flex xs1>
                                    <v-checkbox row
                                        class="mt-0 pt-0"
                                        v-model="f_cols.chx_x"
                                        @change="changeVXXChx(idx_f,f_cols,'x')"
                                        :disabled="cantedit || f_cols.value !== '' || selected_patient.orderIsCheck === 'D'"
                                        color="red"
                                        hide-details
                                        ></v-checkbox>
                                </v-flex>
                                <v-flex xs3>
                                    <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.label_x)}}</span>
                                </v-flex>
                                <v-flex xs4 pr-2>
                                    <v-text-field
                                        style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                                        v-model="f_cols.value"
                                        outline
                                          @change="changeVXXValuePlusV(idx_f,f_cols)"
                                          :disabled="cantedit || f_cols.chx_x || selected_patient.orderIsCheck === 'D'"
                                        single-line
                                        hide-details
                                    ></v-text-field>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </div>
                <div v-if="fisik.type_form === 'VXX'" >
                  <v-layout pl-2  pb-1 pt-1 v-for="(f_detail,kdx_detail) in generate_rows(fisik.details)" :key="kdx_detail" wrap>
                      <v-flex v-for="f_cols in f_detail" xs6 pa-1>
                          <v-layout v-if="f_cols.type === 'vxx-v'" align-center row>
                              <v-flex xs4>
                                  <span style="font-size:12px" >{{getnamelabel(f_cols.label)}}</span>
                              </v-flex>
                              <v-flex xs5>
                                  <v-text-field
                                      style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                                      v-model="f_cols.value"
                                      outline
                                        @change="changeVXXValue(idx_f,f_cols)"
                                        :disabled="cantedit"
                                      single-line
                                      hide-details
                                  ></v-text-field>
                              </v-flex>
                              <v-flex xs3 pl-1>
                                  <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.unit)}}</span>
                              </v-flex>
                          </v-layout>
                          <v-layout v-if="f_cols.type === 'vxx-xx'" align-center  row>
                              <v-flex xs4><span style="font-size:12px" >{{getnamelabel(f_cols.label)}}</span></v-flex>
                              <v-flex xs1>
                                  <v-checkbox row
                                      class="mt-0 pt-0"
                                      v-model="f_cols.chx_y"
                                      @change="changeVXXChx(idx_f,f_cols,'y')"
                                      :disabled="cantedit"
                                      color="red"
                                      hide-details
                                      ></v-checkbox>
                              </v-flex>
                              <v-flex xs3>
                                  <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.label_y)}}</span>
                              </v-flex>
                              <v-flex xs1>
                                  <v-checkbox row
                                      class="mt-0 pt-0"
                                      v-model="f_cols.chx_x"
                                      @change="changeVXXChx(idx_f,f_cols,'x')"
                                      :disabled="cantedit"
                                      color="red"
                                      hide-details
                                      ></v-checkbox>
                              </v-flex>
                              <v-flex xs3>
                                  <span class="mono" style="font-size:12px" >{{getnamelabel(f_cols.label_x)}}</span>
                              </v-flex>
                          </v-layout>
                      </v-flex>
                  </v-layout>
              </div>
            </v-flex>
        </v-layout>
      </div> 
      </v-card>
      
       
        </template>
      
  </v-form>
      <v-divider class="mb-1"></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn v-if="selected_patient.orderIsCheck !== 'D'" :disabled="save_progress" @click="saveText()" class="white--text" color="primary" depressed>Simpan</v-btn>
      </v-card-actions>

    </v-card>
    <v-card v-else color="#616161" height="650px" >
      <v-tabs
          v-model="header_tab"
          color="primary"
          dark
          @change="changeGroup($event)"
          style="padding-left:0px!important"
        >
          <v-tabs-slider color="yellow"></v-tabs-slider>

          <v-tab  v-for="xgroup in group_tests"  :key="xgroup.id">
            {{ xgroup.name }}
          </v-tab>
        </v-tabs>
        <v-tabs-items v-model="header_tab"  >
          <v-tab-item v-for="xgroup in group_tests" :key="xgroup.id">
              <v-card-text>
                <div> 
                  <v-card class="ma-1 ">
                    <v-layout class="pa-2" row>
                    <v-flex class="pr-1" xs6>
                      <v-select
                          v-model="select_subgroup"
                          :items="subgroup_tests"
                          label="Filter subgroup"
                          return-object
                          item-text="name"
                          item-value="id"
                          multiple
                          @change="changeFilterSubgroup($event)"
                        >
                     
                        </v-select>
                    </v-flex>
                    <v-flex xs6 class="pl-1 text-xs-right">
                      <v-text-field
                        label="Cari"
                        placeholder="Silahkan ketikkan pemeriksaan"
                        v-model="search_test"
                        v-on:keyup.enter="searchTest()"
                      ></v-text-field>
                    </v-flex>
                  </v-layout>
                  </v-card>
                  <div class="overflowTests">
                    <v-layout v-if="loadingTest" row>
                      <v-flex xs12>
                        <v-progress-linear  :indeterminate="true"></v-progress-linear>
                      </v-flex>
                    </v-layout>
                    <v-layout  row wrap>
                    <v-flex xs6 class="pa-1">
                      <v-card>
                        
                        <div v-for="(test,index) in tests" :key="index">
                          <v-layout  row v-if="index % 2 == 0">
               
               <v-flex  xs2>
                   <v-btn v-if="test.selected  === false && selected_patient.orderIsCheck == 'D'"  depressed dark style="min-width:20px" small color="grey ligthen-4"><v-icon small>close</v-icon></v-btn>
                   <v-btn v-if="test.selected  === true && selected_patient.orderIsCheck === 'D'"  depressed style="min-width:20px" small color="grey ligthen-4"><v-icon color="white" small>check</v-icon></v-btn>
                   <v-btn v-if="test.selected  === false && selected_patient.orderIsCheck !== 'D'"  @click="changeSelectTest(index,test,test.selected)" dark style="min-width:20px" small color="grey darken-1"><v-icon small>close</v-icon></v-btn>
                   <v-btn v-if="test.selected  === true && selected_patient.orderIsCheck !== 'D'"   @click="changeSelectTest(index,test,test.selected)" depressed style="min-width:20px" small color="primary"><v-icon color="white" small>check</v-icon></v-btn>
               </v-flex>
               <v-flex xs10 class="pt-2">
                 <span class="body-1">{{test.T_TestName}}</span>
               </v-flex>
           
             
           </v-layout>
                        </div>
                        
                        </v-card>
                    </v-flex>
                    <v-flex xs6 class="pa-1">
                      <v-card>
                        <div v-for="(test,index) in tests" :key="index" >
                          <v-layout row v-if="index % 2 !== 0">
                    
                    <v-flex  xs2>
                        <v-btn v-if="test.selected  === false && selected_patient.orderIsCheck == 'D'"  depressed dark style="min-width:20px" small color="grey ligthen-4"><v-icon small>close</v-icon></v-btn>
                        <v-btn v-if="test.selected  === true && selected_patient.orderIsCheck === 'D'"  depressed style="min-width:20px" small color="grey ligthen-4"><v-icon color="white" small>check</v-icon></v-btn>
                        <v-btn v-if="test.selected  === false && selected_patient.orderIsCheck !== 'D'"  @click="changeSelectTest(index,test,test.selected)" dark style="min-width:20px" small color="grey darken-1"><v-icon small>close</v-icon></v-btn>
                        <v-btn v-if="test.selected  === true && selected_patient.orderIsCheck !== 'D'"   @click="changeSelectTest(index,test,test.selected)" depressed style="min-width:20px" small color="primary"><v-icon color="white" small>check</v-icon></v-btn>
                    </v-flex>
                    <v-flex xs10 class="pt-2">
                      <span class="body-1">{{test.T_TestName}}</span>
                    </v-flex>
          
                  
                </v-layout>
                        </div>
                        
                        </v-card>
                    </v-flex>
                  </v-layout>
       
                  </div>
                  <v-card class="ma-1 ">
                    <v-layout class="pa-2" row>
                    <v-flex class="pr-1 pt-1" xs6>
                      <v-chip @click="dialog_list_test = true" color="primary lighten-2" text-color="white">
                        <v-avatar class="primary darken-4">{{selected_test.length}}</v-avatar>
                        Pemeriksaan terpilih
                      </v-chip>
                    </v-flex>
                    <v-flex xs6 class="pl-1 text-xs-right">
                      <v-btn v-if="selected_patient.orderIsCheck !== 'D'" :disabled="save_progress" @click="savePx()" class="white--text" color="primary" depressed>Simpan</v-btn>
                    </v-flex>
                  </v-layout>
                  </v-card>
                  
                </div>
              </v-card-text>
          </v-tab-item>
        </v-tabs-items>
    </v-card>
   
  </v-layout>
</template>

<style scoped>
.divider.x_step{
        border-color:#fff;
    }
    .x_form .v-text-field--outline>.v-input__control>.v-input__slot {
        align-items: stretch;
        min-height: 20px!important;
        margin-top:0;
        line-height:25px;
    }

    .x_form .v-text-field--outline.v-text-field--single-line input {
        margin-top: 0px!important;
        font-size:14px;
    }
.mini-input .v-input{
    margin-top: 0px; 
}

.mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
    margin-top: 0px; 
    margin-bottom:0px;
    margin-left:3px;
}
.mini-input .v-messages{
    min-height:0px;
}
input.fhm-input{
    border: 1px solid black; 
    border-radius: 2px;
    -webkit-box-shadow: 
    inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
    inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    box-shadow: 
    inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    padding: 2px 4px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 1px 0;
    width:30px;
    text-align:center;
}

.overflowTests {
  width: 100%;
  height: 420px;
  overflow-x: auto;
}
</style>

<script>
module.exports = {
  data: () => ({
    model_chx_all:false,
    notifications:false,
    show:false,
    switchMe: false,
    form: false,
    dialog_list_test:false,
    search_icd10primer:'',
    search_icd10sekunder:''
  }),
  computed: {
    loadingTest(){
      return this.$store.state.patient.loading_test
    },
    isLoading(){
      return this.$store.state.patient.update_autocomplete_status
    },
    selected_icd10_primer:{
      get() {
          return this.$store.state.patient.selected_icd10_primer
      },
      set(val) {
          this.$store.commit("patient/update_selected_icd10_primer",val)
      }
    },
    icd10_primer:{
      get() {
          return this.$store.state.patient.icd10_primer
      },
      set(val) {
          this.$store.commit("patient/update_icd10_primer",val)
      }
    },
    selected_icd10_sekunder:{
      get() {
          return this.$store.state.patient.selected_icd10_sekunder
      },
      set(val) {
          this.$store.commit("patient/update_selected_icd10_sekunder",val)
      }
    },
    icd10_sekunder:{
      get() {
          return this.$store.state.patient.icd10_sekunder
      },
      set(val) {
          this.$store.commit("patient/update_icd10_sekunder",val)
      }
    },
    cantedit:{
            get() {
                return this.$store.state.patient.cantedit
            },
            set(val) {
                this.$store.commit("patient/update_cantedit",val)
            }
        },
    fisiks: {
      get() {
        return this.$store.state.patient.fisiks
      },
      set(val) {
        this.$store.commit("patient/update_fisiks", val)
      }
    },
    type_field: {
      get() {
        return this.$store.state.patient.type_field
      },
      set(val) {
        this.$store.commit("patient/update_type_field", val)
      }
    },
    dialoginfo: {
      get() {
        return this.$store.state.patient.dialoginfo
      },
      set(val) {
        this.$store.commit("patient/update_dialoginfo", val)
      }
    },
    msginfo: {
      get() {
        return this.$store.state.patient.msginfo
      },
      set(val) {
        this.$store.commit("patient/update_msginfo", val)
      }
    },
    header_tab: {
      get() {
        return this.$store.state.patient.header_tab
      },
      set(val) {
        this.$store.commit("patient/update_header_tab", val)
      }
    },
    tests: {
      get() {
        return this.$store.state.patient.tests
      },
      set(val) {
        this.$store.commit("patient/update_tests", val)
      }
    },
    selected_test: {
      get() {
        return this.$store.state.patient.selected_test
      },
      set(val) {
        this.$store.commit("patient/update_selected_test", val)
      }
    },
    select_subgroup: {
      get() {
        return this.$store.state.patient.select_subgroup
      },
      set(val) {
        this.$store.commit("patient/update_select_subgroup", val)
      }
    },
    subgroup_tests: {
      get() {
        return this.$store.state.patient.subgroup_tests
      },
      set(val) {
        this.$store.commit("patient/update_subgroup_tests", val)
      }
    },
    search_test: {
      get() {
        return this.$store.state.patient.search_test
      },
      set(val) {
        this.$store.commit("patient/update_search_test", val)
      }
    },
    group_tests: {
      get() {
        return this.$store.state.patient.group_tests
      },
      set(val) {
        this.$store.commit("patient/update_group_tests", val)
      }
    },
    selectAllSubGroup () {
        return this.select_subgroup.length === this.subgroup_tests.length
      },
      selectSomeSubGroup () {
        return this.select_subgroup.length > 0 && !this.selectAllSubGroup
      },
      icon () {
        if (this.selectAllSubGroup) return 'mdi-close-box'
        if (this.selectSomeSubGroup) return 'mdi-minus-box'
        return 'mdi-checkbox-blank-outline'
      },
    pgrs_save() {

      return this.$store.state.patient.pgrs_save
    },
    xnote: {
      get() {
        return this.$store.state.patient.xnote
      },
      set(val) {
        this.$store.commit("patient/update_xnote", val)
      }
    },
    in_saving: {
      get() {
        return this.$store.state.patient.in_saving
      },
      set(val) {
        this.$store.commit("patient/update_in_saving", val)
      }
    },
    dialogconfirmationdelete: {
      get() {
        return this.$store.state.patient.dialog_confirmation_delete
      },
      set(val) {
        this.$store.commit("patient/update_dialog_confirmation_delete", val)
      }
    },
    selected_tab: {
      get() {
        return this.$store.state.patient.selected_tab
      },
      set(val) {
        this.$store.commit("patient/update_selected_tab", val)
      }
    },
    active_name: {
      get() {
        return this.$store.state.patient.active_name
      },
      set(val) {
        this.$store.commit("patient/update_active_name", val)
      }
    },
    snackbar: {
      get() {
        return this.$store.state.patient.alert_success
      },
      set(val) {
        this.$store.commit("patient/update_alert_success", val)
      }
    },
    msgsnackbar() {
      return this.$store.state.patient.msg_success
    },
    save_progress: {
      get() {
        return this.$store.state.patient.save_progress
      },
      set(val) {
        this.$store.commit("patient/update_save_progress", val)
      }
    },
    selected_patient: {
      get() {
        return this.$store.state.patient.selected_patient
      },
      set(val) {
        this.$store.commit("patient/update_selected_patient", val)
      }
    },
    selected_tab: {
      get() {
        return this.$store.state.patient.selected_tab
      },
      set(val) {
        this.$store.commit("patient/update_selected_tab", val)
      }
    },
  },
  methods: {
    changeStandartBMI(idx_f){
            var fisiks = this.fisiks
            var val_now = fisiks[idx_f].standart_bmi === 'who' ? 'asia_pacific':'who'
            fisiks[idx_f].standart_bmi = val_now
           // console.log('jalan')
            var idx_bmi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_4'})    
            var bmi_value = fisiks[idx_f].details[idx_bmi].value
            var classx = '-'
            if(bmi_value && !isNaN(bmi_value)){
                
                if(fisiks[idx_f].standart_bmi === 'asia_pacific'){
                    if(bmi_value < 18.5)
                    classx = 'Underweight'

                    if(bmi_value >= 18.5 && bmi_value < 23)
                        classx = 'Normal'

                    if(bmi_value >= 23 && bmi_value < 25)
                        classx = 'Overweight'

                    if(bmi_value >= 25 && bmi_value < 30)
                        classx = 'Obese I'

                    if(bmi_value >= 30)
                        classx = 'Obese II'
                }

                if(fisiks[idx_f].standart_bmi === 'who'){
                    //console.log(bmi_value)
                    if(bmi_value < 18.5)
                    classx = 'Underweight'

                    if(bmi_value >= 18.5 && bmi_value < 25){
                        classx = 'Normal'
                       // console.log("normal")
                    }
                        

                    if(bmi_value >= 25 && bmi_value < 30){
                        classx = 'Overweight'
                       // console.log("iyyaaa")
                    }

                    if(bmi_value >= 30)
                        classx = 'Obese'
                }

                
            }
            var idx_xclass = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_6'})   
                console.log(idx_xclass) 
                fisiks[idx_f].details[idx_xclass].value = classx
                this.$store.commit("patient/update_fisiks",fisiks)
        },
        changeVXXValue(idx_f,row){
            var fisiks = this.fisiks
           // console.log(row)
            if(row.table_name === 'status_gizi'){
               // console.log(row)
                var idx_berat = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_1'})
                var val_berat = parseFloat(fisiks[idx_f].details[idx_berat].value)
                //console.log(val_berat)
                var idx_tinggi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_2'})
                var val_tinggi = parseFloat(fisiks[idx_f].details[idx_tinggi].value)
                //console.log(val_tinggi)
                var idx_bmi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_4'})
                var val_bmi = (val_berat / ((val_tinggi/100)*(val_tinggi/100))).toFixed(2)
               // console.log(val_bmi)
                fisiks[idx_f].details[idx_bmi].value = val_bmi
                var bmi_value = val_bmi
                 var classx = '-'
                if(bmi_value && !isNaN(bmi_value)){
                   
                    if(fisiks[idx_f].standart_bmi === 'asia_pacific'){
                        if(bmi_value < 18.5)
                            classx = 'Underweight'

                        if(bmi_value >= 18.5 && bmi_value < 23)
                            classx = 'Normal'

                        if(bmi_value >= 23 && bmi_value < 25)
                            classx = 'Overweight'

                        if(bmi_value >= 25 && bmi_value < 30)
                            classx = 'Obese I'

                        if(bmi_value >= 30)
                            classx = 'Obese II'
                    }

                    if(fisiks[idx_f].standart_bmi === 'who'){
                        if(bmi_value < 18.5)
                            classx = 'Underweight'

                        if(bmi_value >= 18.5 && bmi_value < 25){
                            classx = 'Normal'
                            // console.log("normal")
                        }
                                

                        if(bmi_value >= 25 && bmi_value < 30){
                            classx = 'Overweight'
                            // console.log("iyyaaa")
                        }

                        if(bmi_value >= 30)
                            classx = 'Obese'
                    }

                    
                        
                }
                var idx_xclass = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'status_gizi_6'})    
                fisiks[idx_f].details[idx_xclass].value = classx
                this.$store.commit("patient/update_fisiks",fisiks)
            }
        },
    getcolortensi(row){
            console.log(row)
            var result = 'grey--text'

            if(row.standart === 'JNC-VII'){
                if(row.value_x === 'NORMAL'){
                    result = 'info--text'
                }
                if(row.value_x === 'PREHIPERTENSI'){
                    result = 'warning--text'
                }
                if(row.value_x === 'HIPERTENSI STADIUM 1'){
                    result = 'amber--text'
                }
                if(row.value_x === 'HIPERTENSI STADIUM 2'){
                    result = 'red--text'
                }
            }

            if(row.standart === 'JNC-VIII'){
                if(row.value_x === 'NORMAL'){
                    result = 'info--text'
                }
                if(row.value_x === 'ELEVATED'){
                    result = 'warning--text'
                }
                if(row.value_x === 'HIPERTENSI STAGE 1'){
                    result = 'amber--text'
                }
                if(row.value_x === 'HIPERTENSI STAGE 2'){
                    result = 'red--text'
                }
                if(row.value_x === 'HIPERTENSI STAGE 3'){
                    result = 'brown--text'
                }
            }

            if(row.standart === 'ESC/ESH'){
                if(row.value_x === 'OPTIMAL' || row.value_x === 'NORMAL'){
                    result = 'info--text'
                }
                if(row.value_x === 'HIGH NORMAL' || row.value_x === 'GRADE 1 HYPERTENSION'){
                    result = 'warning--text'
                }
                if(row.value_x === 'HIGH NORMAL' || row.value_x === 'GRADE 1 HYPERTENSION'){
                    result = 'amber--text'
                }
                if(row.value_x === 'GRADE 2 HYPERTENSION' || row.value_x === 'GRADE 3 HYPERTENSION'){
                    result = 'red--text'
                }
                if(row.value_x === 'ISOLATED SYSTOLIC HYPERTENSION'){
                    result = 'brown--text'
                }
            }

            //console.log(result)
            return result
        },
    generate_rows(details){
            //console.log(details)
            var riwayats = details
            var row_riwayats = []
            var rows = []
            riwayats.forEach(function(item,index){
                rows.push(item)
                if(index%2 !== 0 || index === riwayats.length - 1 ){
                    row_riwayats.push(rows)
                    rows = []
                }
            })
            //console.log(row_riwayats)
            return row_riwayats
        },
    getnamelabel(kata){
      return kata
    },
    changeStatusInspected(idx_f){
        var fisiks = this.fisiks
        //var idx_tensi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'tanda_vital_5'})
        //console.log("tooth-status")
        //console.log(fisiks[idx_f])
        fisiks[idx_f].is_inspected = fisiks[idx_f].is_inspected === "Y" ?"N":"Y"
        if(fisiks[idx_f].is_inspected === 'Y'){
            fisiks[idx_f].details.forEach(function(value,idx){
                let details_x = value.details
                details_x.forEach(function(item,index){
                    console.log('detail_x')
                    console.log(fisiks[idx_f].details[idx].details[index])
                    fisiks[idx_f].details[idx].details[index].value = ""
                })
            })
        }
        
        this.$store.commit("sample/update_fisiks",fisiks)
    },
    changeVXXChx(idx_f,row,status){
          var fisiks = this.fisiks
          //console.log(row)
          var idx = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == row.id_code})
          
          if(status == 'y'){
              var now_y = fisiks[idx_f].details[idx].chx_y
              fisiks[idx_f].details[idx].chx_x = now_y?false:true
          }

          if(status == 'x'){
              var now_x = fisiks[idx_f].details[idx].chx_x
              fisiks[idx_f].details[idx].chx_y = now_x?false:true
              fisiks[idx_f].details[idx].value = ''
          }
          
          this.$store.commit("sample/update_fisiks",fisiks)
      },
    changeVXXValuePlusV(idx_f,row){
        var fisiks = this.fisiks
        //console.log(row)
        var idx = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == row.id_code})
        
        var now_val = fisiks[idx_f].details[idx].value
        if(now_val != ''){
            fisiks[idx_f].details[idx].chx_x = false
        }

        
        this.$store.commit("sample/update_fisiks",fisiks)
        
    },
    changeVXXValuePlus(idx_f,row){
            var fisiks = this.fisiks
            var idx_tensi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'tanda_vital_5'})
            var standart = fisiks[idx_f].details[idx_tensi].standart
            console.log(standart)
            if(row.table_name === 'tanda_vital'){
               var result = fisiks[idx_f].details[idx_tensi].value_x
               var xval = fisiks[idx_f].details[idx_tensi].value
               if(xval !== ''){
                    var arr_val = xval.split("/")
                    var sistolik = arr_val[0]
                    var diastolik = arr_val[1]
                    if(standart === 'JNC-VII'){
                        if(sistolik < 120 && diastolik < 80){
                            result = 'NORMAL'
                        }
                        if((sistolik >= 120 && sistolik <= 139) || (diastolik >= 80 && diastolik <= 89)){
                            result = 'PREHIPERTENSI'
                        }
                        if((sistolik >= 140 && sistolik <= 159) || (diastolik >= 90 && diastolik <= 99)){
                            result = 'HIPERTENSI STADIUM 1'
                        }
                        if((sistolik >= 160) || (diastolik >= 100)){
                            result = 'HIPERTENSI STADIUM 2'
                        }
                    }
                    if(standart === 'JNC-VIII'){
                        if(sistolik < 120 && diastolik < 80){
                            result = 'NORMAL'
                        }
                        if((sistolik >= 120 && sistolik <= 129) && (diastolik < 80)){
                            result = 'ELEVATED'
                        }
                        if((sistolik >= 130 && sistolik <= 139) || (diastolik >= 80 && diastolik <= 89)){
                            result = 'HIPERTENSI STAGE 1'
                        }
                        if(sistolik >= 140 || diastolik >= 90){
                            result = 'HIPERTENSI STAGE 2'
                        }
                        if((sistolik >= 180) || (diastolik >= 120)){
                            result = 'HYPERTENSIVE CRISIS'
                        }
                    }
                    if(standart === 'ESC/ESH'){
                        if(sistolik < 120 && diastolik < 80){
                            result = 'OPTIMAL'
                        }
                        if((sistolik >= 120 && sistolik <= 129) || (diastolik >= 80 && diastolik <= 84)){
                            result = 'NORMAL'
                        }
                        if((sistolik >= 130 && sistolik <= 139) || (diastolik >= 85 && diastolik <= 89)){
                            result = 'HIGH NORMAL'
                        }
                        if((sistolik >= 140 && sistolik <= 159) || (diastolik >= 90 && diastolik <= 99)){
                            result = 'GRADE 1 HYPERTENSION'
                        }
                        if((sistolik >= 160 && sistolik <= 179) || (diastolik >= 100 && diastolik <= 109)){
                            result = 'GRADE 2 HYPERTENSION'
                        }
                        if(sistolik >= 180 || diastolik >= 110){
                            result = 'GRADE 3 HYPERTENSION'
                        }
                        if(sistolik >= 140 && diastolik < 90){
                            result = 'ISOLATED SYSTOLIC HYPERTENSION'
                        }
                    }
               }
                fisiks[idx_f].details[idx_tensi].value_x = result
                this.$store.commit("sample/update_fisiks",fisiks)
            }
        },
    changStandartTensi(idx_f,row){
      var fisiks = this.fisiks
      var idx_tensi = _.findIndex(fisiks[idx_f].details, function(o) { return o.id_code == 'tanda_vital_5'})
      var standart = fisiks[idx_f].details[idx_tensi].standart //=== 'JNC-VII' ? 'JNC-VIII':'JNC-VII'
      if(standart === 'JNC-VII'){
          standart = 'JNC-VIII'
          console.log(1)
      }else if(standart === 'JNC-VIII'){
          standart = 'ESC/ESH'
          console.log(2)
      }
      else{
          console.log(3)
          standart = 'JNC-VII'
      }
      console.log(standart)
      fisiks[idx_f].details[idx_tensi].standart = standart
      if(row.table_name === 'tanda_vital'){
          var result = fisiks[idx_f].details[idx_tensi].value_x
          var xval = fisiks[idx_f].details[idx_tensi].value
          if(xval !== ''){
              var arr_val = xval.split("/")
              var sistolik = arr_val[0]
              var diastolik = arr_val[1]
              if(standart === 'JNC-VII'){
                  if(sistolik < 120 && diastolik < 80){
                      result = 'NORMAL'
                  }
                  if((sistolik >= 120 && sistolik <= 139) || (diastolik >= 80 && diastolik <= 89)){
                      result = 'PREHIPERTENSI'
                  }
                  if((sistolik >= 140 && sistolik <= 159) || (diastolik >= 90 && diastolik <= 99)){
                      result = 'HIPERTENSI STADIUM 1'
                  }
                  if((sistolik >= 160) || (diastolik >= 100)){
                      result = 'HIPERTENSI STADIUM 2'
                  }
              }
              if(standart === 'JNC-VIII'){
                  if(sistolik < 120 && diastolik < 80){
                      result = 'NORMAL'
                  }
                  if((sistolik >= 120 && sistolik <= 129) && (diastolik < 80)){
                      result = 'ELEVATED'
                  }
                  if((sistolik >= 130 && sistolik <= 139) || (diastolik >= 80 && diastolik <= 89)){
                      result = 'HIPERTENSI STAGE 1'
                  }
                  if(sistolik >= 140 || diastolik >= 90){
                      result = 'HIPERTENSI STAGE 2'
                  }
                  if((sistolik >= 180) || (diastolik >= 120)){
                      result = 'HYPERTENSIVE CRISIS'
                  }
              }
              if(standart === 'ESC/ESH'){
                  if(sistolik < 120 && diastolik < 80){
                      result = 'OPTIMAL'
                  }
                  if((sistolik >= 120 && sistolik <= 129) || (diastolik >= 80 && diastolik <= 84)){
                      result = 'NORMAL'
                  }
                  if((sistolik >= 130 && sistolik <= 139) || (diastolik >= 85 && diastolik <= 89)){
                      result = 'HIGH NORMAL'
                  }
                  if((sistolik >= 140 && sistolik <= 159) || (diastolik >= 90 && diastolik <= 99)){
                      result = 'GRADE 1 HYPERTENSION'
                  }
                  if((sistolik >= 160 && sistolik <= 179) || (diastolik >= 100 && diastolik <= 109)){
                      result = 'GRADE 2 HYPERTENSION'
                  }
                  if(sistolik >= 180 || diastolik >= 110){
                      result = 'GRADE 3 HYPERTENSION'
                  }
                  if(sistolik >= 140 && diastolik < 90){
                      result = 'ISOLATED SYSTOLIC HYPERTENSION'
                  }
              }
          }
          fisiks[idx_f].details[idx_tensi].value_x = result
          this.$store.commit("sample/update_fisiks",fisiks)
      }
    },
    searchTest(){
      var prm = {}
      prm.subgroup = this.select_subgroup
      prm.search = this.search_test
      prm.group_id = this.group_tests[this.header_tab]
      this.$store.dispatch("patient/get_tests", prm)
    },
    clickSelectTest(index,test,value){
      let tests = this.tests
      tests[index].selected = !value
      this.tets = tests
      this.changeSelectTest(test,tests[index].selected )
    },
    changeSelectTest(index,test,value){
      value = !value
      if(value){
        if(this.selectPx(test,index)){
          let tests = this.tests
          tests[index].selected = value
          this.tests = tests
        }
      }else{
        let new_seltest = this.selected_test.filter(function(item) {
          return item.T_TestID !== test.T_TestID
        })  
        this.selected_test = new_seltest
        this.$store.commit('patient/update_nat_test')
        let tests = this.tests
        tests[index].selected = false
        this.tests = tests
      }
      
    },
    selectPx(px,index){
      // IF PROFILE
      //console.log(px.px_type)
      if (px.px_type == "PR" || px.px_type == "PXR")
               return this.selectProfile(px,index)

        // SEARCH NAT TEST
        let nt = this.$store.state.patient.nat_test
        //console.log(px.nat_test)
        let found_nt = false
        for (let i in px.nat_test) {
            console.log(px.nat_test[i])
            if (nt.indexOf(px.nat_test[i]) > -1)
            found_nt = true
        }

        console.log(found_nt)
        if (found_nt) {
            this.dialoginfo = true
            this.msginfo = "Pemeriksaan tersebut sudah ada !"
            return false
        }

        in_selectPx = true
        let selected_test = this.$store.state.patient.selected_test
        let flag_found = false
        selected_test.forEach( function(t,idx) {
            if (t.T_TestID == px.T_TestID) {
              selected_test[idx] = px 
              flag_found = true
            }
        })
        if (!flag_found) {
            selected_test.push(px)
        }
        this.selected_test = selected_test
        this.$store.commit('patient/update_nat_test')
        return true
    },
    selectProfile(px,index) {

      // SEARCH NAT TEST
      let nt = this.$store.state.patient.nat_test
      let found_nt = false
      for (let i in px.nat_test) {
          if (nt.indexOf(px.nat_test[i]) > -1)
            found_nt = true
      }

      if (found_nt) {
          this.dialoginfo = true
          this.msginfo = "Pemeriksaan tersebut sudah ada !"
          return false
      }

      let selected_test = this.$store.state.patient.selected_test
      selected_test.push(px)
          
      this.selected_test = selected_test
      
      this.$store.commit('patient/update_nat_test')
      return true

      },
    savePx(){
      this.save_progress = true;
      var prm = {}
      prm.orderid = this.$store.state.patient.selected_patient.orderID
      prm.doctor = this.$store.state.patient.selected_doctor
      prm.selected_test = this.selected_test
      console.log(prm.selected_test)
      if(prm.selected_test.length > 0)
      this.$store.dispatch("patient/savepx", prm)
      else{
        this.dialoginfo = true
        this.msginfo = "Anda belum memilih pemeriksaan"
      }

    },
    changeGroup(value){
      console.log(value)
      var prm = {}
      this.select_subgroup = []
      this.search_test = ""
      prm.subgroup = this.select_subgroup
      prm.search = this.search_test
      //this.header_tab = parseInt(group.id)
      prm.group_id = this.group_tests[this.header_tab]
      this.$store.dispatch("patient/get_tests", prm)
    },
    changeFilterSubgroup(value){
      var prm = {}
      prm.subgroup = value
      prm.search = this.search_test
      prm.group_id = this.group_tests[this.header_tab]
      this.$store.dispatch("patient/get_tests", prm)
    },
    toggle () {
        this.$nextTick(() => {
          if (this.selectAllSubGroup) {
            this.select_subgroup = []
          } else {
            this.select_subgroup = this.subgroup_tests.slice()
          }
        })
      },
    selectAll(value){
      console.log(value)
    },
    clearText(){
      this.xnote = ""
    },
    saveText() {
      this.save_progress = true;
      var prm = {}
      prm.orderid = this.$store.state.patient.selected_patient.orderID
      prm.doctor = this.$store.state.patient.selected_doctor
      prm.note = this.xnote
      prm.vital_sign = this.fisiks
      prm.selected_tab = this.$store.state.patient.selected_tab
      prm.type = this.type_field
      this.$store.dispatch("patient/savetext", prm)
    },
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val)
    },
    getData(value){
      this.$store.commit("patient/update_type_field", value)
      this.$store.dispatch("patient/get_data")
    },
    thr_search_icd10primer: _.debounce( function () {
        this.$store.dispatch("patient/search_icd10",{type:'primer',search:this.search_icd10primer})
    },2000),
    thr_search_icd10sekunder: _.debounce( function () {
        this.$store.dispatch("patient/search_icd10",{type:'sekunder',search:this.search_icd10sekunder})
    },2000),
  },
  watch: {
      search_icd10primer(val,old) {
        if (val == old ) return
        if (! val) return
        if (val.length < 1 ) return
        if (this.$store.state.patient.update_autocomplete_status == 1 ) return  
        //this.selected_icd10_primer = {}
        this.thr_search_icd10primer()
      },
      search_icd10sekunder(val,old) {
        if (val == old ) return
        if (! val) return
        if (val.length < 1 ) return
        if (this.$store.state.patient.update_autocomplete_status == 1 ) return  
        //this.selected_icd10_sekunder = {}
        this.thr_search_icd10sekunder()
      }
   }
}
</script>