<template>
  <div>
    <v-dialog
      v-model="dialog_resume_individu_log"
      width="650"
      persistent
    >

      <v-card>
        <v-card-title
          class="title grey lighten-2"
          primary-title
        >
          RESULT ACTIVITY
        </v-card-title>
        <v-card-text>
          <v-layout row>
            <v-flex xs12>
                <v-card
                  class="mx-auto"
                  max-width="600"
                  flat
                >
                  <v-card-title
                    class="blue-grey white--text"
                  >
                    <span class="title">Logs</span>
                    <v-spacer></v-spacer>
                      User Activity
                  </v-card-title>
                  <v-card-text class="py-0">
                    
                    <v-timeline  dense>
                      <v-slide-x-reverse-transition
                        group
                        hide-on-leave
                      >
                        <v-timeline-item
                          v-for="item in data_resume_individu_log"
                          :key="item.xid"
                          small
                          fill-dot
                        >
                          <v-card>
                            <v-list>
                                <v-list-tile
                                  avatar
                                  ripple
                                >
                                  <v-list-tile-content>
                                    <v-list-tile-title class="font-weight-light">[ {{ item.act }} ]</v-list-tile-title>
                                    <v-list-tile-sub-title class="text--primary">{{ item.re_user }} {{ item.log_date }}</v-list-tile-sub-title>
                                  </v-list-tile-content>
                                </v-list-tile>
                            </v-list>
                          </v-card>
                          
                        </v-timeline-item>
                      </v-slide-x-reverse-transition>
                    </v-timeline>
                  </v-card-text>
                </v-card>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_resume_individu_log = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="dialog_result_log"
      width="650"
      persistent
    >

      <v-card>
        <v-card-title
          class="title grey lighten-2"
          primary-title
        >
          RESULT ACTIVITY
        </v-card-title>
        <v-card-text>
          <v-layout row>
            <v-flex xs12>
                <v-card
                  class="mx-auto"
                  max-width="600"
                  flat
                >
                  <v-card-title
                    class="blue-grey white--text"
                  >
                    <span class="title">Logs</span>
                    <v-spacer></v-spacer>
                      User Activity
                  </v-card-title>
                  <v-card-text class="py-0">
                    <v-timeline v-if="selected_detail_process.isNonLab === 'N'" dense>
                      <v-slide-x-reverse-transition
                        group
                        hide-on-leave
                      >
                        <v-timeline-item
                          v-for="item in data_result_log"
                          :key="item.xid"
                          small
                          fill-dot
                        >
                          <v-card>
                            <v-list>
                                <v-list-tile
                                  avatar
                                  ripple
                                >
                                  <v-list-tile-content>
                                    <v-list-tile-title class="font-weight-black">{{ item.log_date }}</v-list-tile-title>
                                    <v-list-tile-sub-title class="text--primary">{{ item.authorization_user }} {{ item.authorization_date }}</v-list-tile-sub-title>
                                  </v-list-tile-content>
                                </v-list-tile>
                            </v-list>
                          </v-card>
                          
                        </v-timeline-item>
                      </v-slide-x-reverse-transition>
                    </v-timeline>
                    <v-timeline v-if="selected_detail_process.isNonLab === 'Y'" dense>
                      <v-slide-x-reverse-transition
                        group
                        hide-on-leave
                      >
                        <v-timeline-item
                          v-for="item in data_result_log"
                          :key="item.xid"
                          small
                          fill-dot
                        >
                          <v-card>
                            <v-list>
                                <v-list-tile
                                  avatar
                                  ripple
                                >
                                  <v-list-tile-content>
                                    <v-list-tile-title class="font-weight-light">[ {{ item.act }} ]</v-list-tile-title>
                                    <v-list-tile-sub-title class="text--primary">{{ item.re_user }} {{ item.log_date }}</v-list-tile-sub-title>
                                  </v-list-tile-content>
                                </v-list-tile>
                            </v-list>
                          </v-card>
                          
                        </v-timeline-item>
                      </v-slide-x-reverse-transition>
                    </v-timeline>
                  </v-card-text>
                </v-card>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_result_log = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="dialog_result"
      width="50%"
    >

      <v-card>
        <v-card-title
          class="title grey lighten-2"
          primary-title
        >
          RESULT
        </v-card-title>
        <v-card-text>
          <v-layout row>
            <v-flex xs12>
              <v-card elevation="0">
                <v-data-table
                  :headers="result_headers"
                  :items="detail_item"
                  :loading="loading_result"
                  hide-actions
                  class="v-table"
                  ref="dynamicTable"
                >
                  <template v-slot:headers="props">
                    <tr style="height:40px !important">
                      <th
                        v-for="header in props.headers"
                        :key="header.text"
                        :width="header.width"
                      >
                        {{ header.text }}
                      </th>
                    </tr>
                  </template>
                  <template v-slot:items="props">
                    <td v-bind:class="{
                    'blue lighten-4': isSelectedDetail(props.item) 
                  }"
                    @click="selectMeDetail(props.item)" v-on:dblclick="getLogResult(props.item)" v-html="addSpaces(props.item.t_name, props.item.t_code, props.item.isNonLab)"></td>
                    <td v-bind:class="{
                    'blue lighten-4': isSelectedDetail(props.item)
                  }"
                    @click="selectMeDetail(props.item)" v-on:dblclick="getLogResult(props.item)" class="text-xs-center">
                      <span v-if="props.item.isResult === 'Y'">{{ props.item.last_updated }}</span>
                    </td>
                    <td v-bind:class="{
                    'blue lighten-4': isSelectedDetail(props.item)
                  }"
                    @click="selectMeDetail(props.item)" v-on:dblclick="getLogResult(props.item)" class="text-xs-center">
                        <span v-if="props.item.isResult === 'Y'">{{ props.item.last_user}}</span>
                    </td>
                    <td v-bind:class="{
                    'blue lighten-4': isSelectedDetail(props.item)
                  }"
                    @click="selectMeDetail(props.item)"  v-on:dblclick="getLogResult(props.item)" class="text-xs-center">
                      <v-chip v-if="props.item.isResult === 'Y' && props.item.status === 'VAL1'" depressed round small dark color="success">Selesai</v-chip>
                      <v-chip v-if="props.item.isResult === 'Y' && props.item.status === 'NEW'" depressed round small >Sedang dikerjakan</v-chip>
                      <v-chip v-if="props.item.isResult === 'Y' && props.item.status === 'X'" depressed round small >Belum dikerjakan</v-chip>
                    </td>
                  </template>
                </v-data-table>
              </v-card>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_result = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="dialog_order"
      width="500"
    >

      <v-card>
        <v-card-title
          class="title grey lighten-2"
          primary-title
        >
          ORDER
        </v-card-title>

        <v-card-text>
          <v-layout row>
            <v-flex xs12>
                <p>Diinput oleh : {{selected_patient.staff_register}} pada {{selected_patient.order_created}}</p>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12>
              <v-card>
                <v-toolbar color="teal" dark>
                  <v-toolbar-side-icon></v-toolbar-side-icon>

                  <v-toolbar-title>List Pemeriksaan</v-toolbar-title>

                  <v-spacer></v-spacer>

                  <!--<v-btn icon>
                    <v-icon>more_vert</v-icon>
                  </v-btn>-->
                </v-toolbar>

                <v-list>
                  <v-list-group
                    v-for="item in selected_patient.orders"
                    :key="item.id"
                    v-model="item.active"
                    :prepend-icon="item.action"
                    no-action
                  >
                    <template v-slot:activator>
                      <v-list-tile>
                        <v-list-tile-content>
                          <v-list-tile-title>{{ item.px_name }}</v-list-tile-title>
                        </v-list-tile-content>
                      </v-list-tile>
                    </template>

                    <v-list-tile
                      v-for="subItem in item.details"
                      :key="subItem.T_TestID"
                      @click=""
                    >
                      <v-list-tile-content>
                        <v-list-tile-title>{{ subItem.T_TestName }}</v-list-tile-title>
                      </v-list-tile-content>
                    </v-list-tile>
                  </v-list-group>
                </v-list>
              </v-card>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_order = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="dialog_sampling"
      width="60%"
    >

      <v-card>
        <v-card-title
          class="title grey lighten-2"
          primary-title
        >
          SAMPLING
        </v-card-title>

        <v-card-text>
          <v-layout class="mb-3" row>
            <v-flex xs12>
              <v-card class="pa-2">
                <v-toolbar flat dense>

                  <v-toolbar-title>Jenis Sample</v-toolbar-title>

                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-layout row class="pa-2" wrap>
                  <v-flex xs12>
                    <v-chip
                      dense
                      outline
                      v-for="(item, i) in selected_patient.all_samples"
                      :color="item.status === 'Y'?'success':''"
                      class="mr-2"
                    >{{item.sampletype_name}}</v-chip>
                  </v-flex>
                </v-layout>
              </v-card>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12>
              <v-card class="pa-2">
                <v-toolbar flat dense>
                <v-toolbar-title>Timeline</v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-timeline align-top>
                  <v-timeline-item
                    v-for="(item, i) in selected_patient.all_samples_timeline"
                    :key="i"
                    :color="item.color"
                    :icon="item.icon"
                    v-if="item.x_datetime"
                    fill-dot
                  >
                    <v-card
                      :color="item.color"
                      
                      dark
                    >
                      <v-card-title class="title">{{item.sampletype_name}}</v-card-title>
                      <v-card-text class="white text--primary">
                        <v-list two-line subheader>
                          <v-subheader>{{item.staff_name}}</v-subheader>

                          <v-list-tile avatar>
                            <v-list-tile-content>
                              <v-list-tile-title>Check In</v-list-tile-title>
                              <v-list-tile-sub-title>{{item.checkin_date}} {{item.checkin_time}}</v-list-tile-sub-title>
                            </v-list-tile-content>
                          </v-list-tile>

                          <v-list-tile avatar>
                            <v-list-tile-content>
                              <v-list-tile-title>Check Out</v-list-tile-title>
                              <v-list-tile-sub-title>{{item.checkout_date}} {{item.checkout_time}}</v-list-tile-sub-title>
                            </v-list-tile-content>
                          </v-list-tile>
                        </v-list>
                      </v-card-text>
                    </v-card>
                  </v-timeline-item>
                </v-timeline>
              </v-card>
            </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_sampling = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-snackbar
      v-model="snackbar"
      color="success"
      :auto-height="true"
      :timeout="5000"
      :right="true"
      :multi-line="false"
      :vertical="false"
      :bottom="true"
    >
      {{ msgsnackbar }}
      <v-btn flat @click="updateAlert_success(false)"> Tutup </v-btn>
    </v-snackbar>
    <v-layout class="fill-height" column>
      <v-card class="mb-2 pa-2 searchbox">
        <v-layout align-center row>
          <v-flex xs3>
            <v-menu
              v-model="menufilterdatestart"
              :close-on-content-click="false"
              :nudge-right="40"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              max-width="290px"
              min-width="290px"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                  class="mr-2"
                  v-model="filterComputedDateFormattedStart"
                  label="Tanggal Awal"
                  outline
                  hide-details
                  readonly
                  v-on="on"
                  @blur="
                    date = deFormatedDate(filterComputedDateFormattedStart)
                  "
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="xdatestart"
                no-title
                @input="menufilterdatestart = false"
              ></v-date-picker>
            </v-menu>
          </v-flex>
          <v-flex xs3>
            <v-menu
              v-model="menufilterdateend"
              :close-on-content-click="false"
              :nudge-right="40"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              max-width="290px"
              min-width="290px"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                  class="mr-2"
                  v-model="filterComputedDateFormattedEnd"
                  label="Tanggal Akhir"
                  outline
                  hide-details
                  readonly
                  v-on="on"
                  @blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="xdateend"
                no-title
                @input="menufilterdateend = false"
              ></v-date-picker>
            </v-menu>
          </v-flex>
          <v-flex xs3>
            <v-text-field
              style="font-size: 14px"
              label="No Reg / Nama"
              class="mr-1"
              outline
              v-on:keyup.enter="searchPatient"
              v-model="searchnamelab"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex xs3>
            <v-autocomplete
              label="Corporate"
              v-model="selected_company"
              class="ma-1"
              :items="xcompanies"
              :search-input.sync="search_company"
              auto-select-first
              hide-details
              style="font-size: 14px"
              outline
              no-filter
              item-text="name"
              return-object
              :loading="isLoading"
              no-data-text="Semua Corporate"
            >
              <template slot="item" slot-scope="{ item }">
                <v-list-tile-content>
                  <v-list-tile-title v-text="item.name"></v-list-tile-title>
                </v-list-tile-content>
              </template>
            </v-autocomplete>
          </v-flex>
          <v-flex class="text-xs-right pr-2" xs3>
            <v-autocomplete
              label="Cabang"
              v-model="selectedBranch"
              class="ma-1"
              :items="branchList"
              hide-details
              style="font-size: 14px"
              outline
              item-text="name"
              return-object
              :loading="isLoading"
              no-data-text="-"
            >
              <template slot="item" slot-scope="{ item }">
                <v-list-tile-content>
                  <v-list-tile-title v-text="item.name"></v-list-tile-title>
                </v-list-tile-content>
              </template>
            </v-autocomplete>
          </v-flex>
          <v-flex xs2>
              <span @click="searchPatient"  class="icon-medium-fill-base xs1 white--text warning iconsearch-search"></span>
            </v-flex>
        </v-layout>
      </v-card>
      <v-card>
      <v-card>
        <v-data-table
              :headers="headers"
              :items="patients"
              :loading="isLoading"
              hide-actions
              class="elevation-1"
            >
              <template slot="items" slot-scope="props">
                <td
                  class="text-xs-center pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                  <p class="font-weight-black mb-0">
                    {{ props.item.T_OrderHeaderLabNumber }}
                  </p>
                  <p style="color: #800000" class="caption mb-1 font-weight-bold">
                    {{ props.item.order_date }}
                  </p>
                </td>
                <td
                  class="text-xs-left pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                <p class="mb-0">
                    {{ props.item.patient_fullname }}
                  </p>
                </td>
                <td
                  class="text-xs-center pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                  <v-btn @click="dialog_order = true" color="success" dark small>Selesai</v-btn>
                </td>
                <td
                  class="text-xs-center pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                  <v-btn v-if="props.item.dt_sample_lab_done == 0 && props.item.dt_sample_nonlab_done == 0" small>Belum dilakukan</v-btn>
                  <v-btn @click="dialog_sampling = true" color="warning" v-if="(props.item.dt_sample_lab_done > 0 && props.item.dt_sample_lab_new > 0) || (props.item.dt_sample_nonlab_done > 0 && props.item.dt_sample_nonlab_new > 0)" small>Proses</v-btn>
                  <v-btn @click="dialog_sampling = true" color="success" v-if="props.item.dt_sample_lab_new == 0 && props.item.dt_sample_nonlab_new == 0"  small>Selesai</v-btn>
                </td>
                <td
                  class="text-xs-center pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                  <v-btn v-if="props.item.dt_sample_relab_done == 0 && props.item.dt_sample_renonlab_done == 0" small>Belum dilakukan</v-btn>
                  <v-btn @click="openDialogResult(props.item)" color="warning" v-if="props.item.dt_sample_relab_new > 0 || props.item.dt_sample_renonlab_new > 0" small>Proses</v-btn>
                  <v-btn @click="openDialogResult(props.item)" color="success" v-if="props.item.dt_sample_relab_new == 0 && props.item.dt_sample_renonlab_new == 0"  small>Selesai</v-btn>
                </td>
                <td
                  class="text-xs-center pa-2"
                  v-bind:class="{
                    'amber lighten-4': isSelected(props.item),
                    amber: props.item.iscito === 'Y',
                  }"
                  @click="selectMe(props.item)"
                >
                  <v-btn v-if="!props.item.re_individu.Mcu_ResumeID" small>Belum dilakukan</v-btn>
                  <v-btn @click="openDialogResumeIndividu(props.item)"  color="warning" v-if="props.item.re_individu.Mcu_ResumeID && props.item.re_individu.Mcu_ResumeValidation !== 'Y'" small>Proses</v-btn>
                  <v-btn @click="openDialogResumeIndividu(props.item)" color="success" v-if="props.item.re_individu.Mcu_ResumeID && props.item.re_individu.Mcu_ResumeValidation === 'Y'"  small>Selesai</v-btn>
                </td>
              </template>
            </v-data-table>
            <v-divider></v-divider>
               <v-pagination
                  style="margin-top:10px;margin-bottom:10px"
                  v-model="curr_page"
                  :length="xtotal_page"
               
               
               ></v-pagination>
      </v-card>
    </v-card>
    </v-layout>
  </div>
</template>

<style scoped>
.notlunas {
  color: #c42d2d;
}

.cito {
  color: rgba(255, 255, 255, 0.945);
  background-color: #fb8c0087;
}

.citoo {
  color: #c42d2d;
}

span.xtd {
  margin-right: 10px;
}

.searchbox .v-input.v-text-field .v-input__slot {
  min-height: 40px;
}

.searchbox .v-btn {
  min-height: 40px;
}

table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

table.v-table thead tr {
  height: 40px;
}

.v-messages {
  min-height: 0px !important;
}

.cursor_pointer {
  cursor: "pointer" !important;
}

table.custom-table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table.custom-table > td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

table.custom-table > tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<script>
module.exports = {
  components: {
    "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
  },
  mounted() {
    if (localStorage.getItem("startdate") != null) {
      this.xdatestart = localStorage.getItem("startdate");
    }

    if (localStorage.getItem("enddate") != null) {
      this.xdateend = localStorage.getItem("enddate");
      if (localStorage.getItem("enddate") < localStorage.getItem("startdate")) {
        this.xdateend = localStorage.getItem("startdate");
      }
    }
    this.$store.dispatch("patient/getbranch");
    this.$store.dispatch("patient/search", {
      startdate: this.$store.state.patient.start_date,
      enddate: this.$store.state.patient.end_date,
      search: this.searchnamelab,
      doctorid: this.$store.state.patient.selected_doctor.id,
      doctorcode: this.$store.state.patient.selected_doctor.code,
      companyid: this.$store.state.patient.selected_company.id,
      testid: this.$store.state.patient.selected_filter_test.id,
      current_page: 1,
      lastidx: -1,
    });
  },
  methods: {
    openDialogResumeIndividu(item){
      this.$store.dispatch("patient/get_resume_individu_log", item);
    },
    getLogResult(item){
      if(item.isResult === 'Y'){
        //this.dialog_result_log = true
        this.$store.dispatch("patient/get_data_result_log", item);
      }
    },
    addSpaces(name, t_sascode,isnonlab) {
          let x_loop = ((t_sascode.length - 8) * 1)/2
          let space = ''
          if(isnonlab === 'N'){
            if(x_loop > 0){
              for (let i = 0; i < x_loop; i++) {
                space += space + "_";
              }
            }
          }
          
          
          return space+name;
    },
    applyDynamicPadding() {
      this.$nextTick(() => {
        const rows = this.$refs.dynamicTable.querySelectorAll("td");
        rows.forEach((cell) => {
          const t_code = cell.innerText;
          cell.style.paddingLeft = this.calculatePadding(t_code) + "px";
        });
      });
    },
    margin_left (item) {
            if (item.level == 2)
                return 'pl-4'

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

            return 'pl-2'
        },
    calculatePadding(t_code) {
      return (t_code.length - 8) * 1; // Hitung padding-left
    },
    openDialogResult(prm){
      this.loading_result = true
      this.$store.dispatch("patient/get_detail_tests", prm);
    },
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val);
    },
    changeUpdateDOB(value) {
      this.data_patient.M_PatientDOB = value;
    },
    updateDOB() {
      var xval = this.$store.state.patient.data_patient;
      xval.status = this.show_form_dob;
      this.$store.dispatch("patient/updatedob", xval);
    },
    opendialogDob() {
      this.$store.dispatch("patient/getdatadob", this.selected_patient);
    },
    getTimeline(value) {
      this.selected_delivery = value;
      console.log(this.selected_delivery);
      if (value.delivery_type_id === "2") {
        this.$store.dispatch("patient/gettimelinedelivery", value);
      }
    },
    changeCbxAll(value) {
      var arr = _.filter(this.barcodes, function (o) {
        return (
          o.type === "barcode" ||
          o.type === "formulir" ||
          o.type === "nonlab" ||
          o.type === "qrcode"
        );
      });
      this.indeterminatex = false;
      arr.forEach((el) => {
        el.chex = value;
      });
      var selected = _.filter(arr, function (o) {
        return o.chex;
      });
      this.selected_barcode = selected;
    },
    checkTop() {
      var barcodes = _.filter(this.barcodes, function (o) {
        return (
          o.type === "barcode" ||
          o.type === "formulir" ||
          o.type === "nonlab" ||
          o.type === "qrcode"
        );
      });
      var selected = _.filter(barcodes, function (o) {
        return o.chex;
      });
      this.bar_chx_all = false;
      this.indeterminatex = false;
      if (selected.length > 0 && barcodes.length === selected.length) {
        this.bar_chx_all = true;
        this.indeterminatex = false;
      }
      if (selected.length > 0 && barcodes.length > selected.length) {
        this.bar_chx_all = false;
        this.indeterminatex = true;
      }
      this.selected_barcode = selected;
      console.log(selected);
    },
    printSingleBarcode(value) {
      var label = value.T_BarcodeLabBarcode;
      if (value.type === "barcode") one_print_barcode_pk(label);
      if (value.type === "formulir") one_print_barcode_formulir(value.id);
      if (value.type === "nonlab") one_print_barcode_sov1(value.T_SampleTypeID);
      if (value.type === "nonlab" && value.T_SampleTypeID === "qr") {
        this.printQrcode();
      }
      if (value.type === "nonlab" && value.T_SampleTypeID === "qrpasien") {
        this.printQrcodePatient();
      }
      if (value.type === "nonlab_group")
        one_print_barcode_amplop_so_group(value.orderid);
    },
    printRobo() {
      var arr = this.barcodes;
      var xarrtojoin = [];
      _.forEach(arr, function (value) {
        if (value.type === "barcode") {
          xarrtojoin.push(value.T_BarcodeLabBarcode);
        }
      });
      if (xarrtojoin.length > 0) {
        one_print_robo(xarrtojoin.join(","));
      }
    },
    printQrcode() {
      var inp = {};
      inp.id = this.$store.state.patient.selected_patient.T_OrderHeaderID;
      inp.no_lab =
        this.$store.state.patient.selected_patient.T_OrderHeaderLabNumber;
      inp.name = this.$store.state.patient.selected_patient.patient_fullname;
      inp.register_date = this.$store.state.patient.selected_patient.order_date;
      one_print_qrcode(inp);
    },
    printQrcodePatient() {
      var inp = {};
      inp.id = this.$store.state.patient.selected_patient.T_OrderHeaderID;
      inp.no_lab =
        this.$store.state.patient.selected_patient.T_OrderHeaderLabNumber;
      inp.name = this.$store.state.patient.selected_patient.patient_fullname;
      inp.register_date = this.$store.state.patient.selected_patient.order_date;
      one_print_qrcode_patient(inp);
    },
    printMultipleBarcode() {
      var arr = this.barcodes;
      var xarrtojoin = [];
      var xarrtojoinnonlab = [];
      let qrCode = false;
      let qrCodePasien = false;
      var xformulir = {};
      _.forEach(arr, function (value) {
        if (value.chex && value.type === "barcode") {
          xarrtojoin.push(value.T_BarcodeLabBarcode);
        }
        if (value.chex && value.type === "formulir") {
          xformulir = value;
        }
        if (value.chex && value.type === "nonlab") {
          xarrtojoinnonlab.push(value.T_SampleTypeID);
        }
        if (value.chex && value.type === "qrcode") {
          if (value.T_SampleTypeID === "qr") {
            qrCode = true;
          }
          if (value.T_SampleTypeID === "qrpasien") {
            qrCodePasien = true;
          }
        }
      });
      if (xarrtojoin.length > 0) {
        one_print_barcode_pk(xarrtojoin.join(","));
      }
      if (xarrtojoinnonlab.length > 0) {
        one_print_barcode_sov1(xarrtojoinnonlab.join(","));
      }
      if (qrCode) {
        this.printQrcode();
      }
      if (qrCodePasien) {
        this.printQrcodePatient();
      }

      if (!_.isEmpty(xformulir)) {
        one_print_barcode_formulir(xformulir.id);
      }
    },
    openDetails(value) {
      this.$store.commit("patient/update_selected_patient", value);
      this.sheet = true;
    },
    openBarcode() {
      this.bar_chx_all = false;
      this.indeterminatex = false;
      this.dialogbarcode = true;
      this.selected_barcode = [];
      this.$store.dispatch("patient/getdatabarcodes", this.selected_patient);
    },
    number_format(val) {
      return numeral(val).format("0,0");
    },
    notToday(item) {
      return item.order_date !== moment(new Date()).format("YYYY-MM-DD");
    },
    splittest(inp) {
      if (inp != "") {
        let a_test = inp.split(",");
        let s_test = "";
        for (let i = 0; i < a_test.length; i++) {
          let test = a_test[i];
          let a_cito = test.split("^");
          s_test += '<p class="mb-0 ';
          if (a_cito[1] == "Y") s_test += "citoo";
          s_test += '" >';
          s_test += a_cito[0] + "</p>";
        }
        return s_test;
      } else {
        return "";
      }
    },
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${day}-${month}-${year}`;
    },
    deFormatedDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },
    isSelected(p) {
      return (
        p.T_OrderHeaderID ==
        this.$store.state.patient.selected_patient.T_OrderHeaderID
      );
    },
    isSelectedDetail(p) {
      return (
        p.xid ==
        this.$store.state.patient.selected_detail_process.xid
      );
    },
    isCito(p) {
      return p.cito == 1;
    },
    async searchPatient() {
      let inp_no = this.searchnamelab;
      
      this.$store.commit("patient/update_current_page", 1);
      this.$store.dispatch("patient/search", {
        startdate: this.$store.state.patient.start_date,
        enddate: this.$store.state.patient.end_date,
        search: inp_no,
        doctorid: this.$store.state.patient.selected_doctor.id,
        doctorcode: this.$store.state.patient.selected_doctor.code,
        companyid: this.$store.state.patient.selected_company.id,
        testid: this.$store.state.patient.selected_filter_test.id,
        current_page: this.$store.state.patient.current_page,
        lastidx: -1,
      });
    },
    selectMe(pat) {
      var patients = this.$store.state.patient.patients;
      var idx = _.findIndex(patients, function (o) {
        return o.T_OrderHeaderID == pat.T_OrderHeaderID;
      });
      this.$store.commit("patient/update_lastidx", idx);
      this.$store.commit("patient/update_selected_patient", pat);
    },
    selectMeDetail(test) {
      this.$store.commit("patient/update_selected_detail_process", test);
    },
    closeAlertNoPay() {
      this.$store.commit("patient/update_open_alert_no_pay", false);
    },
    forgetAlertNoPay() {
      var xval = this.$store.state.payment.types;
      var valpay = 0;
      xval.forEach(function (obj) {
        obj.leftvalue = 0;
        obj.rightvalue = 0;
      });
      this.$store.commit("payment/update_total_payment", 0);
      this.$store.commit("patient/update_open_alert_no_pay", false);
    },
    patientComing() {
      var prm = this.$store.state.patient.selected_patient;
      this.xpromisedialog = true;
      //this.$store.dispatch("patient/lookup_promises", prm)
    },
    doSavePromise() {
      var prm = {
        data: this.$store.state.patient.selected_patient,
      };

      prm.search = {
        startdate: this.$store.state.patient.start_date,
        enddate: this.$store.state.patient.end_date,
        search: this.searchnamelab,
        doctorid: this.$store.state.patient.selected_doctor.id,
        doctorcode: this.$store.state.patient.selected_doctor.code,
        companyid: this.$store.state.patient.selected_company.id,
        testid: this.$store.state.patient.selected_filter_test.id,
        current_page: this.$store.state.patient.current_page,
        lastidx: this.$store.state.patient.lastidx,
      };

      this.$store.dispatch("patient/savepromises", prm);
    },
    openDialogQrCodeCtrlCard() {
      console.log(this.selected_patient);
      //devcpone.aplikasi.web.id/one-media/one-qrcontrolcard/qrcode_T2406170008.png
      this.urlQrCode =
        "https://" +
        location.hostname +
        "/one-media/one-qrcontrolcard/qrcode_" +
        this.selected_patient.T_OrderHeaderLabNumber +
        ".png";
      this.dialogQrCode = true;
    },
    closeDialogQrCode() {
      this.dialogQrCode = false;
    },
    openDialogQrCodePatient() {
      console.log(this.selected_patient);
      // https://devcpone.aplikasi.web.id/one-media/one-qrpatient/patient_qr_T2406170008.png
      this.urlQrCodePatient =
        "https://" +
        location.hostname +
        "/one-media/one-qrpatient/patient_qr_" +
        this.selected_patient.T_OrderHeaderLabNumber +
        ".png";
      this.dialogQrCodePatient = true;
    },
    closeDialogQrCodePatient() {
      this.dialogQrCodePatient = false;
    },
    thr_search_company: _.debounce(function () {
      this.$store.dispatch("patient/searchcompany", this.search_company);
    }, 2000),
    thr_search_doctor: _.debounce(function () {
      this.$store.dispatch("patient/searchdoctor", this.search_doctor);
    }, 2000),
    thr_search_test: _.debounce(function () {
      this.$store.dispatch("patient/searchtest", this.search_test);
    }, 2000),
  },
  computed: {
    data_resume_individu_log(){
      return this.$store.state.patient.data_resume_individu_log;
    },
    dialog_resume_individu_log: {
      get() {
        return this.$store.state.patient.dialog_resume_individu_log;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_resume_individu_log", val);
      },
    },
    selected_detail_process: {
      get() {
        return this.$store.state.patient.selected_detail_process;
      },
      set(val) {
        this.$store.commit("patient/update_selected_detail_process", val);
      },
    },
    data_result_log(){
      return this.$store.state.patient.data_result_log;
    },
    dialog_result_log: {
      get() {
        return this.$store.state.patient.dialog_result_log;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_result_log", val);
      },
    },
    dialog_result: {
      get() {
        return this.$store.state.patient.dialog_result;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_result", val);
      },
    },
    loading_result: {
      get() {
        return this.$store.state.patient.loading_result;
      },
      set(val) {
        this.$store.commit("patient/update_loading_result", val);
      },
    },
    detail_item: {
      get() {
        return this.$store.state.patient.detail_item;
      },
      set(val) {
        this.$store.commit("patient/update_detail_item", val);
      },
    },
    filter_tests: {
      get() {
        return this.$store.state.patient.filter_tests;
      },
      set(val) {
        this.$store.commit("patient/update_filter_tests", val);
      },
    },
    selected_filter_test: {
      get() {
        return this.$store.state.patient.selected_filter_test;
      },
      set(val) {
        this.$store.commit("patient/update_selected_filter_test", val);
        //this.searchPatient();
      },
    },
    selectedBranch: {
      get() {
        return this.$store.state.patient.selectedBranch;
      },
      set(val) {
        this.$store.commit("patient/update_selectedBranch", val);
        //this.searchPatient();
      },
    },
    branchList: {
      get() {
        return this.$store.state.patient.branchList;
      },
      set(val) {
        this.$store.commit("patient/update_branchList", val);
      },
    },
    bahan_belum() {
      if (
        !_.isEmpty(this.selected_patient) &&
        this.selected_patient.bahan_belum
      ) {
        return this.selected_patient.bahan_belum;
      } else return [];
    },
    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;
    },
    data_patient: {
      get() {
        return this.$store.state.patient.data_patient;
      },
      set(val) {
        this.$store.commit("patient/update_data_patient", val);
      },
    },
    show_form_dob: {
      get() {
        return this.$store.state.patient.show_form_dob;
      },
      set(val) {
        this.$store.commit("patient/update_show_form_dob", val);
      },
    },
    dialog_update_dob: {
      get() {
        return this.$store.state.patient.dialog_update_dob;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_update_dob", val);
      },
    },
    timeline_delivery: {
      get() {
        return this.$store.state.patient.timeline_delivery;
      },
      set(val) {
        this.$store.commit("patient/update_timeline_delivery", val);
      },
    },
    dialog_timeline_delivery: {
      get() {
        return this.$store.state.patient.dialog_timeline_delivery;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_timeline_delivery", val);
      },
    },
    xcompanies() {
      return this.$store.state.patient.companies;
    },
    selected_company: {
      get() {
        return this.$store.state.patient.selected_company;
      },
      set(val) {
        this.$store.commit("patient/update_selected_company", val);
        this.searchPatient();
      },
    },
    xdoctors() {
      return this.$store.state.patient.doctors;
    },
    selected_doctor: {
      get() {
        return this.$store.state.patient.selected_doctor;
      },
      set(val) {
        this.$store.commit("patient/update_selected_doctor", val);
        this.searchPatient();
      },
    },
    filterComputedDateFormattedStart() {
      return this.formatDate(this.xdatestart);
    },
    filterComputedDateFormattedEnd() {
      return this.formatDate(this.xdateend);
    },
    xdatestart: {
      get() {
        return this.$store.state.patient.start_date;
      },
      set(val) {
        this.$store.commit("patient/update_start_date", val);
        //this.searchPatient();
      },
    },
    xdateend: {
      get() {
        return this.$store.state.patient.end_date;
      },
      set(val) {
        this.$store.commit("patient/update_end_date", val);
        //this.searchPatient();
      },
    },
    dialogbarcode: {
      get() {
        return this.$store.state.patient.dialog_barcode;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_barcode", val);
      },
    },
    barcodes: {
      get() {
        return this.$store.state.patient.barcodes;
      },
      set(val) {
        this.$store.commit("patient/update_barcodes", val);
      },
    },
    total_patients_all() {
      return this.$store.state.patient.total_patients_all;
    },
    xpromisedialog: {
      get() {
        return this.$store.state.patient.promise_dialog;
      },
      set(val) {
        this.$store.commit("patient/update_promise_dialog", val);
      },
    },
    xpromises: {
      get() {
        return this.$store.state.patient.promises;
      },
      set(val) {
        this.$store.commit("patient/update_promises", val);
      },
    },
    xenddate: {
      get() {
        return this.$store.state.patient.end_date;
      },
      set(val) {
        this.$store.commit("patient/update_end_date", val);
        this.searchPatient();
      },
    },
    searchnamelab: {
      get() {
        return this.$store.state.patient.search;
      },
      set(val) {
        this.$store.commit("patient/update_search", val);
        //this.searchPatient()
      },
    },
    statuses() {
      return this.$store.state.patient.statuses;
    },
    status: {
      get() {
        return this.$store.state.patient.selected_status;
      },
      set(val) {
        this.$store.commit("patient/update_selected_status", val);
        //this.searchPatient();
      },
    },
    startDateFormatted() {
      return this.formatDate(this.xstartdate);
    },
    endDateFormatted() {
      return this.formatDate(this.xenddate);
    },
    isLoading() {
      return this.$store.state.patient.search_status == 1;
    },
    patients() {
      return this.$store.state.patient.patients;
    },
    selected_patient: {
      get() {
        let sp = this.$store.state.patient.selected_patient;
        if (sp == undefined) return {};
        if (!sp.hasOwnProperty("T_OrderHeaderLabNumber")) {
          sp["T_OrderHeaderLabNumber"] = "";
          sp["M_PatientName"] = "";
        }
        return sp;
      },
      set(val) {
        this.$store.commit("patient/update_selected_patient", val);
      },
    },
    openalertnopay: {
      get() {
        return this.$store.state.patient.open_alert_no_pay;
      },
      set(val) {
        this.$store.commit("patient/update_open_alert_no_pay", false);
      },
    },
    msgalertnopay() {
      return this.$store.state.patient.msg_alert_no_pay;
    },
    curr_page: {
      get() {
        return this.$store.state.patient.current_page;
      },
      set(val) {
        this.$store.commit("patient/update_current_page", val);
        this.$store.dispatch("patient/search", {
          startdate: this.$store.state.patient.start_date,
          enddate: this.$store.state.patient.end_date,
          search: this.searchnamelab,
          search: this.searchnamelab,
          doctorid: this.$store.state.patient.selected_doctor.id,
          companyid: this.$store.state.patient.selected_company.id,
          testid: this.$store.state.patient.selected_filter_test.id,
          current_page: val,
          lastidx: -1,
        });
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.patient.total_page;
      },
      set(val) {
        this.$store.commit("patient/update_total_page", val);
      },
    },

    xtotal_patients: {
      get() {
        return this.$store.state.patient.total_patient;
      },
      set(val) {
        this.$store.commit("patient/update_total_patient", val);
      },
    },

    xtotalpatients() {
      return this.$store.state.patient.total_patients;
    },
    xtotalfilterpatients() {
      return this.$store.state.patient.total_filter_patients;
    },
    filters: {
      get() {
        return this.$store.state.patient.filters;
      },
      set(val) {
        this.$store.commit("patient/update_filters", val);
      },
    },
    selected_filter: {
      get() {
        return this.$store.state.patient.selected_filter;
      },
      set(val) {
        this.$store.commit("patient/update_selected_filter", val);
        this.searchPatient();
      },
    },
    dialogQrCode: {
      get() {
        return this.$store.state.patient.dialogQrCode;
      },
      set(val) {
        this.$store.commit("patient/update_dialogQrCode", val);
      },
    },
    urlQrCode: {
      get() {
        return this.$store.state.patient.urlQrCode;
      },
      set(val) {
        this.$store.commit("patient/update_urlQrCode", val);
      },
    },
    dialogQrCodePatient: {
      get() {
        return this.$store.state.patient.dialogQrCodePatient;
      },
      set(val) {
        this.$store.commit("patient/update_dialogQrCodePatient", val);
      },
    },
    urlQrCodePatient: {
      get() {
        return this.$store.state.patient.urlQrCodePatient;
      },
      set(val) {
        this.$store.commit("patient/update_urlQrCodePatient", val);
      },
    },
  },
  watch: {
    search_company(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.thr_search_company();
    },
    search_doctor(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.thr_search_doctor();
    },
    search_test(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.thr_search_test();
    },
    // Jika `xdatestart` berubah, ubah `xdateend` menjadi 7 hari setelahnya
    xdatestart(newVal) {
      if (newVal) {
        const startDate = new Date(newVal);
        this.xdateend = new Date(startDate.getTime() + 14 * 24 * 60 * 60 * 1000)
          .toISOString()
          .slice(0, 10);
      }
    },
    // Jika `xdateend` berubah, ubah `xdatestart` menjadi 7 hari sebelumnya
    xdateend(newVal) {
      if (newVal) {
        const endDate = new Date(newVal);
        this.xdatestart = new Date(endDate.getTime() - 14 * 24 * 60 * 60 * 1000)
          .toISOString()
          .slice(0, 10);
      }
    },
  },
  data() {
    return {
      dialog_order:false,
      dialog_sampling:false,
      selected_delivery: {},
      search_company: "",
      search_test: "",
      menufilterdatestart: false,
      menufilterdateend: false,
      date: new Date().toISOString().substr(0, 10),
      items: [],
      menustartdate: false,
      menuenddate: false,
      errors: [],
      sheet: false,
      indeterminatex: false,
      checkednotall: false,
      bar_chx_all: false,
      selected_barcode: [],
      dialogtimeline: false,
      search_doctor: "",
      result_headers: [
        {
          text: "PEMERIKSAAN",
          align: "center",
          sortable: false,
          value: "lab",
          width: "35%",
          class: "pa-1 blue darken-1 white--text",
        },
        {
          text: "LAST UPDATED",
          align: "center",
          sortable: false,
          value: "name",
          width: "25%",
          class: "pa-1 blue darken-1 white--text",
        },
        {
          text: "LAST USER",
          align: "center",
          sortable: false,
          value: "name",
          width: "20%",
          class: "pa-1 blue darken-1 white--text",
        },
        {
          text: "STATUS",
          align: "center",
          sortable: false,
          value: "name",
          width: "10%",
          class: "pa-1 blue darken-1 white--text",
        },
      ],
      headers: [
        {
          text: "NO REG",
          align: "center",
          sortable: false,
          value: "lab",
          width: "8%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "NAMA",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "ORDER",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "SAMPLING",
          align: "center",
          sortable: false,
          value: "status",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "RESULT",
          align: "center",
          sortable: false,
          value: "status",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "RESUME INDIVIDU",
          align: "center",
          sortable: false,
          value: "status",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
      ],
    };
  },
};
</script>
