<template>
  <v-layout class="mb-2 " column>
    <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 heigth="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">{{ active_name }}</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-chip v-if="typebutton == 'Text'" @click="changeButton('Text')" label color="primary darken-4">Text</v-chip>
        <v-chip v-if="typebutton == 'Form' " @click="changeButton('Text')" label color="blue">Text</v-chip>
        <v-chip v-if="typebutton == 'Form' && active_name !== 'RIWAYAT OPERASI'" @click="changeButton('Form')" label color="primary darken-4">Form</v-chip>
        <v-chip v-if="typebutton == 'Text' && active_name !== 'RIWAYAT OPERASI'" @click="changeButton('Form')" label color="blue">Form</v-chip>
      </v-toolbar>
      <v-form ref="form" v-if="typebutton == 'Text'" v-model="oText" class="pa-3 pt-4">
        <v-textarea :disabled="selected_patient.orderIsAnamnese !== 'Y'" v-model="xnote" auto-grow box color="deep-purple" label="Keterangan" 
        rows="17" class="mb-2"></v-textarea>
      </v-form>
      <div style="max-height:600px;overflow: auto;" class="x_form" v-if="typebutton == 'Form'">
        <v-card flat height="500px" class="mb-2">

          <v-layout pb-2 row v-if="active === '01'">
            <v-flex xs12>
              <div v-if="active === '01'">
                <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_keluhan(keluhans.details)" wrap>
                  <v-flex xs6 pa-1>
                    <v-layout v-if="r_detail[0]" align-center row>
                      <v-flex xs1>
                        <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details></v-checkbox>
                      </v-flex>
                      <v-flex xs7>
                        <span style="font-size:12px"
                          :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                            getnamelabel(r_detail[0].label)
                          }}</span>
                      </v-flex>
                      <v-flex xs4 pl-1 pr-2>
                        <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
                          v-model="r_detail[0].value" single-line :placeholder="getnamelabel('Keterangan')"
                          :disabled="selected_patient.orderIsAnamnese !== 'Y'"
                          hide-details></v-text-field>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs6 pa-1>
                    <v-layout v-if="r_detail[1]" align-center row>
                      <v-flex xs1>
                        <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details></v-checkbox>
                      </v-flex>
                      <v-flex xs7>
                        <span style="font-size:12px"
                          :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                            getnamelabel(r_detail[1].label)
                          }}</span>
                      </v-flex>
                      <v-flex xs4 pl-1 pr-2>
                        <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
                          v-model="r_detail[1].value" single-line :placeholder="getnamelabel('Keterangan')"
                          :disabled="selected_patient.orderIsAnamnese !== 'Y'"
                          hide-details></v-text-field>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>

          <v-layout pb-2 class="pt-2" row v-if="active === '02'">
            <v-flex xs12>
              <div v-if="active === '02'">
                <v-layout pl-2 v-for="(segment, idx_segment) in penyakitdulus.details" :key="idx_segment" wrap>
                  <v-flex xs12>
                    <v-layout row>{{
                      getnamelabel(segment.name) }}</v-layout>
                    <v-layout v-if="segment.caption && segment.caption !== ''" row><span class="caption red--text">{{
                      segment.caption }}</span></v-layout>
                    <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_penyakitdulu(segment.details)" wrap>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[0]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details
                              @change="checkXVSRiwayatCbx(r_detail[0].id_code, $event, idx_segment, idx_r, '02')"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                                getnamelabel(r_detail[0].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[0].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[1]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details
                              @change="checkXVSRiwayatCbx(r_detail[1].id_code, $event, idx_segment, idx_r,'02')"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                                getnamelabel(r_detail[1].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[1].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>

          <v-layout pb-2 class="pt-2"  row v-if="active === '03'">
            <v-flex xs12>
              <div v-if="active === '03'">
                <v-layout pl-2 v-for="(segment, idx_segment) in penyakitsekarangs.details" :key="idx_segment" wrap>
                  <v-flex xs12>
                    <v-layout row>{{
                      getnamelabel(segment.name) }}</v-layout>
                    <v-layout v-if="segment.caption && segment.caption !== ''" row><span class="caption red--text">{{
                      segment.caption }}</span></v-layout>
                    <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_penyakitsekarang(segment.details)" wrap>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[0]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details
                              @change="checkXVSRiwayatCbx(r_detail[0].id_code, $event, idx_segment, idx_r,'03')"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                                getnamelabel(r_detail[0].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[0].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[1]" align-center row>
                          <v-flex xs1>
                            <v-checkbox row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details
                            :disabled="selected_patient.orderIsAnamnese !== 'Y'" @change="checkXVSRiwayatCbx(r_detail[1].id_code, $event, idx_segment, idx_r,'03')"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                                getnamelabel(r_detail[1].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                            :disabled="selected_patient.orderIsAnamnese !== 'Y'" outline v-model="r_detail[1].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>

          <v-layout pb-2 class="pt-2"  row v-if="active === '04'">
            <v-flex xs12>
              <div v-if="active === '04'">
                <v-layout v-if="penyakitkeluargas.subtitle !== ''" class="pl-2 caption pb-2" row>{{ penyakitkeluargas.subtitle
                }}</v-layout>
                <v-layout class="pl-2 caption pb-2" row>
                  <v-flex xs12 pa-1>
                    <v-layout align-center row>
                      <v-flex xs4></v-flex>
                      <v-flex class="text-xs-left" xs2>
                        Ayah
                      </v-flex>
                      <v-flex class="text-xs-left" xs2>
                        Ibu
                      </v-flex>
                      <v-flex class="text-xs-left" xs2>
                        Saudara Kandung
                      </v-flex>
                      <v-flex class="text-xs-left" xs2>
                        Kakek/Nenek
                      </v-flex>
                      <v-flex class="text-xs-left" xs2>
                        Saudara Lainnya
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in penyakitkeluargas.details" vwrap>
                  <v-flex xs12 pa-1>
                    <v-layout align-center row>
                      <v-flex xs4>{{ getnamelabel(r_detail.label)
                      }}</v-flex>
                      <v-flex xs2 class="text-xs-left" v-for="(opsi, idx_opsi) in r_detail.options">
                        <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0 text-xs-left" v-model="opsi.selected" color="red"
                          hide-details></v-checkbox>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>

          <v-layout pb-2 class="pt-2"  row v-if="active === '05'">
            <v-flex xs12>
              <div v-if="active === '05'">
                <v-layout v-if="pengobatans.subtitle !== ''" class="pl-2 caption pb-2" row>{{ pengobatans.subtitle
                }}</v-layout>
                <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_pengobatan(pengobatans.details)" wrap>
                  <v-flex xs6 pa-1>
                    <v-layout v-if="r_detail[0]" align-center row>
                      <v-flex xs1>
                        <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details></v-checkbox>
                      </v-flex>
                      <v-flex xs7>
                        <span style="font-size:12px"
                          :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                            getnamelabel(r_detail[0].label)
                          }}</span>
                      </v-flex>
                      <v-flex xs4 pl-1 pr-2>
                        <v-text-field  :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
                          v-model="r_detail[0].value" single-line :placeholder="getnamelabel('Keterangan')"
                          hide-details></v-text-field>
                      </v-flex>
                    </v-layout>

                  </v-flex>
                  <v-flex xs6 pa-1>
                    <v-layout v-if="r_detail[1]" align-center row>
                      <v-flex xs1>
                        <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details></v-checkbox>
                      </v-flex>
                      <v-flex xs7>
                        <span style="font-size:12px"
                          :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                            getnamelabel(r_detail[1].label)
                          }}</span>
                      </v-flex>
                      <v-flex xs4 pl-1 pr-2>
                        <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
                          v-model="r_detail[1].value" single-line :placeholder="getnamelabel('Keterangan')"
                          hide-details></v-text-field>
                      </v-flex>
                    </v-layout>

                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>

          <v-layout pb-2 class="pt-2"  row v-if="active === '06'">
            <v-flex xs12>
              <div v-if="active === '06'">
                <v-layout pl-2 v-for="(segment, idx_segment) in sosials.details" :key="idx_segment" wrap>
                  <v-flex xs12>
                    <v-layout row>{{
                      getnamelabel(segment.name) }}</v-layout>
                    <v-layout v-if="segment.caption && segment.caption !== ''" row><span class="caption red--text">{{
                      segment.caption }}</span></v-layout>
                    <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_sosial(segment.details)" wrap>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[0]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details
                              @change="checkXVSRiwayatCbx(r_detail[0].id_code, $event, idx_segment, idx_r)"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                                getnamelabel(r_detail[0].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[0].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[1]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details
                              @change="checkXVSRiwayatCbx(r_detail[1].id_code, $event, idx_segment, idx_r,'06')"></v-checkbox>
                          </v-flex>
                          <v-flex xs7>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                                getnamelabel(r_detail[1].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs4 pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[1].value" single-line :placeholder="getnamelabel('Keterangan')"
                              hide-details></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>


          <v-layout pb-2 class="pt-2"  row v-if="active === '09'">
            <v-flex xs12>
              <div v-if="active === '09'">
                <v-layout pl-2 v-for="(segment, idx_segment) in imunisasis.details" :key="idx_segment" mb-2 wrap>
                  <v-flex xs12>
                    <v-layout row>{{
                      getnamelabel(segment.label) }}</v-layout>
                    <v-layout v-if="segment.caption && segment.caption !== ''" row><span class="caption red--text">{{
                      segment.caption }}</span></v-layout>
                    <v-layout pl-2 pb-1 pt-1 v-for="(r_detail, idx_detail) in generate_rows_imunisasi(segment.details)"
                      :key="idx_detail" wrap>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[0]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[0].chx" color="red" hide-details
                              @change="checkAnotherCbx(r_detail[0].id_code, $event, idx_segment, idx_r)"></v-checkbox>
                          </v-flex>
                          <v-flex xs6>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[0].color && r_detail[0].color == 'red' }">{{
                                getnamelabel(r_detail[0].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs5 v-if="r_detail[0].show_date" pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[0].value" :readonly="!r_detail[0].chx" single-line
                              :placeholder="getnamelabel('DD/MM/YYYY')" hide-details></v-text-field>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                      <v-flex xs6 pa-1>
                        <v-layout v-if="r_detail[1]" align-center row>
                          <v-flex xs1>
                            <v-checkbox :disabled="selected_patient.orderIsAnamnese !== 'Y'" row class="mt-0 pt-0" v-model="r_detail[1].chx" color="red" hide-details
                              @change="checkAnotherCbx(r_detail[1].id_code, $event, idx_segment, idx_r,'09')"></v-checkbox>
                          </v-flex>
                          <v-flex xs6>
                            <span style="font-size:12px"
                              :class="{ 'red--text': r_detail[1].color && r_detail[1].color == 'red' }">{{
                                getnamelabel(r_detail[1].label)
                              }}</span>
                          </v-flex>
                          <v-flex xs5 v-if="r_detail[1].show_date" pl-1 pr-2>
                            <v-text-field :disabled="selected_patient.orderIsAnamnese !== 'Y'" style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important"
                              outline v-model="r_detail[1].value" :readonly="!r_detail[1].chx" single-line
                              :placeholder="getnamelabel('DD/MM/YYYY')" hide-details></v-text-field>
                          </v-flex>
                        </v-layout>

                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </div>
            </v-flex>
          </v-layout>
          
        </v-card>
      </div>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn v-if="typebutton == 'Text' && selected_patient.orderIsAnamnese === 'Y'" :disabled="in_saving" @click="saveNewText()" class="white--text"
          color="primary" depressed>Simpan Text</v-btn>
        <v-btn v-if="typebutton == 'Form' && selected_patient.orderIsAnamnese === 'Y'" :disabled="in_saving" @click="saveNewForm()" class="white--text"
          color="primary" depressed>Simpan Form</v-btn>
      </v-card-actions>
    </v-card>
  </v-layout>
</template>

<style scoped>
.scroll-container {
        scroll-padding: 50px 0 0 50px;
    }

    ::-webkit-scrollbar {
        width: 7px;
    }

    /* this targets the default scrollbar (compulsory) */

    ::-webkit-scrollbar-track {
        background-color: #73baf3;
    }

    /* the new scrollbar will have a flat appearance with the set background color */

    ::-webkit-scrollbar-thumb {
        background-color: #2196f3;
    }

    /* this will style the thumb, ignoring the track */

    ::-webkit-scrollbar-button {
        background-color: #0079da;
    }

    /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

    ::-webkit-scrollbar-corner {
        background-color: black;
    }

    .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;
}
</style>

<script>
module.exports = {
  data: () => ({
    switchMe: false,
    oForm: false,
    oText: false
  }),
  computed: {
    selected_patient: {
            get() {
                return this.$store.state.patient.selected_patient
            },
            set(val) {
                this.$store.commit("patient/update_selected_patient", val)
            }
        },
    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)
      }
    },
    typebutton: {
      get() {
        return this.$store.state.patient.typebutton
      },
      set(val) {
        this.$store.commit("patient/update_typebutton", 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)
      }
    },
    active_name: {
      get() {
        return this.$store.state.patient.active_name
      },
      set(val) {
        this.$store.commit("patient/update_active_name", val)
      }
    },
    riwayats: {
      get() {
        return this.$store.state.patient.riwayats
      },
      set(val) {
        this.$store.commit("patient/update_riwayats", val)
      }
    },
    keluhans: {
      get() {
        return this.$store.state.patient.keluhans
      },
      set(val) {
        this.$store.commit("patient/update_keluhans", val)
      }
    },
    penyakitdulus: {
      get() {
        return this.$store.state.patient.penyakitdulus
      },
      set(val) {
        this.$store.commit("patient/update_penyakitdulus", val)
      }
    },
    penyakitsekarangs: {
      get() {
        return this.$store.state.patient.penyakitsekarangs
      },
      set(val) {
        this.$store.commit("patient/update_penyakitsekarangs", val)
      }
    },
    penyakitkeluargas: {
      get() {
        return this.$store.state.patient.penyakitkeluargas
      },
      set(val) {
        this.$store.commit("patient/update_penyakitkeluargas", val)
      }
    },
    pengobatans: {
      get() {
        return this.$store.state.patient.pengobatans
      },
      set(val) {
        this.$store.commit("patient/update_pengobatans", val)
      }
    },
    sosials: {
      get() {
        return this.$store.state.patient.sosials
      },
      set(val) {
        this.$store.commit("patient/update_sosials", val)
      }
    },
    imunisasis: {
      get() {
        return this.$store.state.patient.imunisasis
      },
      set(val) {
        this.$store.commit("patient/update_imunisasis", 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
    },
    active() {
      return this.$store.state.button_active
    }
  },
  methods: {
    saveNewText() {
      if (this.in_saving) return;
      this.in_saving = true;
      var prm = {}
      var id = this.$store.state.patient.selected_patient.orderNumber
      prm.id = id
      prm.orderid = this.$store.state.patient.selected_patient.orderID
      prm.note = this.xnote
      prm.activeid = this.$store.state.button_active
      prm.activename = this.$store.state.patient.active_name
      this.$store.dispatch("patient/newtext", prm)
    },
    saveNewForm() {
      if (this.in_saving) return;
      this.in_saving = true;
      var prm = {}
      var id = this.$store.state.patient.selected_patient.orderNumber
      prm.id = id
      prm.orderid = this.$store.state.patient.selected_patient.orderID
      prm.activeid = this.$store.state.button_active
      prm.activename = this.$store.state.patient.active_name
      prm.riwayats = this.riwayats
      prm.keluhans = this.keluhans
      prm.penyakitdulus = this.penyakitdulus
      prm.penyakitsekarangs = this.penyakitsekarangs
      prm.penyakitkeluargas = this.penyakitkeluargas
      prm.pengobatans = this.pengobatans
      prm.sosials = this.sosials
      prm.imunisasis = this.imunisasis
      this.$store.dispatch("patient/newform", prm)
    },
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val)
    },
    changeButton(x) {
      this.$store.commit("patient/update_typebutton", x)
    },
    getnamelabel(kata) {
      var lang_id = 1
      /*  var words = this.$store.state.sample.words
        var row_word = _.filter(words, function (o) { return o.Translate_WordNat_LangID === lang_id && o.Translate_WordFrom.toLowerCase() === kata.toLowerCase() })

        //console.log(row_word)
        if (row_word.length > 0)
            return row_word[0].Translate_WordTo
        else
      */
      return kata
    },
    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
    },
    generate_rows_keluhan(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)
      console.log(details)
      return row_riwayats
    },
    generate_rows_penyakitdulu(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
    },
    generate_rows_penyakitsekarang(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
    },
    generate_rows_pengobatan(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
    },
    generate_rows_sosial(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
    },
    generate_rows_imunisasi(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
    },
    checkXVSRiwayatCbx(id_code, event, idx_detail, idx_segment, tipe) {
      if (tipe === '01'){
        var riwayats = this.keluhans
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.keluhans = riwayats
        }
      }else if(tipe === '02') {
        var riwayats = this.penyakitdulus
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.penyakitdulus = riwayats
        }
      }else if(tipe === '03') {
        var riwayats = this.penyakitsekarangs
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.penyakitsekarangs = riwayats
        }
      }else if(tipe === '04') {
        var riwayats = this.penyakitkeluargas
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.penyakitkeluargas = riwayats
        }
      }else if(tipe === '05') {
        var riwayats = this.pengobatans
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.pengobatans = riwayats
        }
      }else if(tipe === '06') {
        var riwayats = this.sosials
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.sosials = riwayats
        }
      }else if(tipe === '09') {
        var riwayats = this.imunisasis
        var data = riwayats[idx_segment].details[idx_detail].details
        if (riwayats[idx_segment].title === 'RIWAYAT KEBIASAAN HIDUP') {
          data.forEach((value, key) => {
            if (value.id_code !== id_code) {
              data[key].chx = false
              data[key].value = ''
            }
          });
          console.log('check')
          console.log(data)
          this.imunisasis = riwayats
        }
      }
      

    },
    checkAnotherXCbx(id_code, event, idx_detail, idx_segment, tipe) {
      if (tipe === '01'){
        var riwayats = this.keluhans
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.keluhans = riwayats
      console.log(riwayats)
      }else if (tipe === '02'){
        var riwayats = this.penyakitdulus
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.penyakitdulus = riwayats
      console.log(riwayats)
      }else if (tipe === '03'){
        var riwayats = this.penyakitsekarangs
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.penyakitsekarangs = riwayats
      console.log(riwayats)
      }else if (tipe === '04'){
        var riwayats = this.penyakitkeluargas
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.penyakitkeluargas = riwayats
      console.log(riwayats)
      }else if (tipe === '05'){
        var riwayats = this.pengobatans
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.pengobatans = riwayats
      console.log(riwayats)
      }else if (tipe === '06'){
        var riwayats = this.sosials
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.sosials = riwayats
      console.log(riwayats)
      }else if (tipe === '09'){
        var riwayats = this.imunisasis
      var data = riwayats[idx_segment].details
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      this.imunisasis = riwayats
      console.log(riwayats)
      }
      
    },
    checkAnotherCbx(id_code, event, idx_detail, idx_segment,tipe) {
      if (tipe === '01'){
        var riwayats = this.keluhans
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.keluhans = riwayats
      }else if (tipe === '02'){
        var riwayats = this.penyakitdulus
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.penyakitdulus = riwayats
      }else if (tipe === '03'){
        var riwayats = this.penyakitsekarangs
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.penyakitsekarangs = riwayats
      }else if (tipe === '04'){
        var riwayats = this.penyakitkeluargas
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.penyakitkeluargas = riwayats
      }else if (tipe === '05'){
        var riwayats = this.pengobatans
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.pengobatans = riwayats
      }else if (tipe === '06'){
        var riwayats = this.sosials
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.sosials = riwayats
      }else if (tipe === '09'){
        var riwayats = this.imunisasis
      var data = riwayats[idx_segment].details[idx_detail].details
      //console.log(id_code)
      //console.log(event)
      //console.log(details)
      //console.log(data)
      data.forEach((value, key) => {
        if (value.id_code !== id_code) {
          data[key].chx = false
          data[key].value = ''
        }
      });
      console.log('check')
      console.log(data)
      this.imunisasis = riwayats
      }
      
    },
  }
}
</script>