<template>
  <v-container fluid>
    <v-row justify="center" dense class="flex-wrap mb-6">
      <v-col md="7" lg="6" cols="12">
        <v-card tile>
          <v-card-actions>
            <v-row style="margin:auto">
              <v-col cols="12" sm="6" class="d-flex justify-space-around align-baseline">
                <v-combobox
                  v-model="selectedDevice"
                  :items="deviceCodeItems"
                  :search-input.sync="deviceComboSearch"
                  hide-selected
                  :label="$t('WorkList.deviceComboboxLabel')"
                  persistent-hint
                  small-chips
                  clearable
                  dense
                  class="ma-4"
                  item-text="GroupName"
                  item-value="GroupName"
                  return-object
                >
                  <template v-if="noDataCombo" v-slot:no-data>
                    <v-list-item>
                      <v-list-item-content>
                        <v-list-item-title>
                          {{$t('WorkList.deviceComboboxNoDataMatch')}} "
                          <strong>{{ deviceComboSearch }}</strong>
                          " {{$t('WorkList.deviceComboboxNoDataMatch1')}}
                        </v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </template>
                </v-combobox>
              </v-col>
              <v-col cols="12" sm="6" class="d-flex justify-space-around align-center flex-wrap">
                <v-btn color="success" text @click="toggleAllOrUnknown=0">
                  <v-icon left v-if="toggleAllOrUnknown==0">done</v-icon>
                  <strong>{{$t("WorkList.AllBtn")}}</strong>
                </v-btn>
                <v-btn color="success" text @click="toggleAllOrUnknown=1">
                  <v-icon left v-if="toggleAllOrUnknown==1">done</v-icon>
                  <strong>{{$t("WorkList.UnknownBtn")}}</strong>
                </v-btn>
              </v-col>
            </v-row>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>

    <v-row justify="center" dense class="flex-wrap mt-6">
      <v-col md="9" cols="12">
        <v-data-table
          ref="patientsDatatable"
          v-model="selectedPatientInTable"
          :headers="headerOfTable"
          :items="patientsOfTable"
          item-key="_id"
          class="elevation-1"
          style="width:100%"
          fixed-header
          hide-default-footer
          disable-pagination
          :sort-by.sync="sortByTable"
          :sort-desc.sync="sortDescTable"
          height="61vh"
        >
          <template v-slot:top>
            <div>
              <v-progress-linear
                :active="fetchWorklistLoading"
                :indeterminate="fetchWorklistLoading"
                color="cyan lighten-2"
              ></v-progress-linear>
            </div>
            <v-toolbar flat color="white">
              <!-- <v-toolbar-title>{{devicemap==""?$t("WorkList.noDevicemap"):devicemap}}</v-toolbar-title> -->

              <v-btn color="rgb(94, 181, 177,.85)" class="white--text" @click="editPatients()">
                <v-icon small left>edit</v-icon>
                <strong>{{$t('WorkList.editBtn')}}</strong>
              </v-btn>
              <v-divider class="mx-4" inset vertical></v-divider>
              

              <v-dialog v-model="editDialog" max-width="900px">
                <v-card class="grey lighten-4">
                  <v-progress-linear
                    :active="editLoading"
                    :indeterminate="editLoading"
                    absolute
                    top
                    color="cyan lighten-2"
                  ></v-progress-linear>
                  <v-card-title>
                    <v-icon @click="close" class="mr-1">close</v-icon>
                    <span>{{$t("WorkList.EditRegisterPatient")}}</span>
                  </v-card-title>

                  <v-card-text class="ma-0 pa-0" v-if="$vuetify.breakpoint.mdAndUp">
                    <v-container class="cyan lighten-2" style="border-radius: 5px;">
                      <v-card class="pa-3 pr-6 ma-4">
                        <v-row dense>
                          <v-col md="3" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.FarsiFirstName")}}:</v-card-text>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :color="editedItemParts.FarsiFirstNameParts0.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts0.includes('?') }"
                              v-model="editedItemParts.FarsiFirstNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts1.includes('?') }"
                              :color="editedItemParts.FarsiFirstNameParts1.includes('?')==true?'red':''"
                              v-model="editedItemParts.FarsiFirstNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts2.includes('?') }"
                              :color="editedItemParts.FarsiFirstNameParts2.includes('?')==true?'red':''"
                              v-model="editedItemParts.FarsiFirstNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                        <v-row dense>
                          <v-col md="3" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.EnglishFirstName")}}:</v-card-text>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts0.includes('?') }"
                              :color="editedItemParts.EnglishFirstNameParts0.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishFirstNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts1.includes('?') }"
                              :color="editedItemParts.EnglishFirstNameParts1.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishFirstNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts2.includes('?') }"
                              :color="editedItemParts.EnglishFirstNameParts2.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishFirstNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                      </v-card>
                      <v-card class="pa-3 pr-6 ma-4">
                        <v-row dense>
                          <v-col md="3" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.FarsiLastName")}}:</v-card-text>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts0.includes('?') }"
                              :color="editedItemParts.FarsiLastNameParts0.includes('?')?'red':''"
                              v-model="editedItemParts.FarsiLastNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts1.includes('?') }"
                              :color="editedItemParts.FarsiLastNameParts1.includes('?')?'red':''"
                              v-model="editedItemParts.FarsiLastNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts2.includes('?') }"
                              :color="editedItemParts.FarsiLastNameParts2.includes('?')?'red':''"
                              v-model="editedItemParts.FarsiLastNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                        <v-row dense>
                          <v-col md="3" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.EnglishLastName")}}:</v-card-text>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts0.includes('?') }"
                              :color="editedItemParts.EnglishLastNameParts0.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishLastNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts1.includes('?') }"
                              :color="editedItemParts.EnglishLastNameParts1.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishLastNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col md="3">
                            <v-text-field
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts2.includes('?') }"
                              :color="editedItemParts.EnglishLastNameParts2.includes('?')?'red':''"
                              v-model="editedItemParts.EnglishLastNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                      </v-card>
                    </v-container>
                  </v-card-text>
                  <v-card-text class="ma-0 pa-0" v-else>
                    <v-container class="cyan lighten-2" style="border-radius: 5px;">
                      <v-card class="pa-3">
                        <v-row dense>
                          <v-col sm="6" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.FarsiFirstName")}}:</v-card-text>
                          </v-col>

                          <v-col sm="6" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.EnglishFirstName")}}:</v-card-text>
                          </v-col>
                        </v-row>
                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiFirstNameParts0.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts0.includes('?') }"
                              v-model="editedItemParts.FarsiFirstNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishFirstNameParts0.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts0.includes('?') }"
                              v-model="editedItemParts.EnglishFirstNameParts0"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiFirstNameParts1.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts1.includes('?') }"
                              v-model="editedItemParts.FarsiFirstNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishFirstNameParts1.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts1.includes('?') }"
                              v-model="editedItemParts.EnglishFirstNameParts1"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiFirstNameParts2.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiFirstNameParts2.includes('?') }"
                              v-model="editedItemParts.FarsiFirstNameParts2"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishFirstNameParts2.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishFirstNameParts2.includes('?') }"
                              v-model="editedItemParts.EnglishFirstNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                      </v-card>

                      <v-card class="pa-3 mt-4">
                        <v-row dense>
                          <v-col sm="6" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.FarsiLastName")}}:</v-card-text>
                          </v-col>

                          <v-col sm="6" class="justify-center align-center align-self-end">
                            <v-card-text
                              class="subtitle-1 font-weight-bold black--text"
                              style="text-align:center"
                            >{{$t("WorkList.EnglishLastName")}}:</v-card-text>
                          </v-col>
                        </v-row>
                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiLastNameParts0.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts0.includes('?') }"
                              v-model="editedItemParts.FarsiLastNameParts0"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishLastNameParts0.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts0.includes('?') }"
                              v-model="editedItemParts.EnglishLastNameParts0"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiLastNameParts1.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts1.includes('?') }"
                              v-model="editedItemParts.FarsiLastNameParts1"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishLastNameParts1.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts1.includes('?') }"
                              v-model="editedItemParts.EnglishLastNameParts1"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                        <v-row>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.FarsiLastNameParts2.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.FarsiLastNameParts2.includes('?') }"
                              v-model="editedItemParts.FarsiLastNameParts2"
                            ></v-text-field>
                          </v-col>
                          <v-col sm="6">
                            <v-text-field
                              :color="editedItemParts.EnglishLastNameParts2.includes('?')==true?'red':''"
                              :class="{ 'unknownInput': editedItemParts.EnglishLastNameParts2.includes('?') }"
                              v-model="editedItemParts.EnglishLastNameParts2"
                            ></v-text-field>
                          </v-col>
                        </v-row>
                      </v-card>
                    </v-container>
                  </v-card-text>

                  <v-card-actions class="justify-center align-center">
                    <v-btn
                      depressed
                      color="blue darken-1"
                      text
                      @click="prevPatient"
                      :disabled="prevDisabled"
                    >
                      <v-icon color="blue darken-1">keyboard_arrow_left</v-icon>
                    </v-btn>
                    <v-btn color="blue darken-1" text @click="savePatient">
                      <v-icon>save</v-icon>
                    </v-btn>
                    <v-btn
                      depressed
                      color="blue darken-1"
                      text
                      @click="nextPatient"
                      :disabled="nextDisabled"
                    >
                      <v-icon color="blue darken-1">keyboard_arrow_right</v-icon>
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-toolbar>
          </template>
          <!-- <template v-slot:item.Action="{ item }">
            <v-icon small @click="editPatients(item)">edit</v-icon>
          </template>-->

          <template v-slot:item="{item}">
            <tr
              v-if="$vuetify.breakpoint.mdAndUp"
              @click="activerow(item)"
              :class="{'cyan lighten-4': item._id===selectedId}"
            >
              <td>{{ item.AdmissionID }}</td>
              <td class="text-xs-right">
                <v-btn
                  text
                  tile
                  @click="activerow(item);editPatients()"
                  :class="{
                        'red--text': item.EnglishFirstName.includes('?'),
                        'blue--text':!item.EnglishFirstName.includes('?')
                        }"
                >{{item.EnglishFirstName}}</v-btn>
              </td>
              <td class="text-xs-right">
                <v-btn
                  text
                  tile
                  @click="activerow(item);editPatients()"
                  :class="{
                        'red--text': item.EnglishLastName.includes('?'),
                        'blue--text':!item.EnglishLastName.includes('?')
                        }"
                >{{item.EnglishLastName}}</v-btn>
              </td>
              <td class="text-xs-right">{{ item.FarsiFirstName }}</td>
              <td class="text-xs-right">{{ item.FarsiLastName }}</td>
              <td class="text-xs-right">{{ item.HISID }}</td>
              <td class="text-xs-right">{{ item.Modality }}</td>
              <td class="text-xs-right">{{ item.PatientAge }}</td>
            </tr>
            <tr v-else @click="activerow(item)" :class="{'cyan lighten-4': item._id===selectedId}">
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">AdmissionID</div>
                  <div class="v-data-table__mobile-row__cell">{{item.AdmissionID}}</div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper flex-wrap">
                  <div class="v-data-table__mobile-row__header">EnglishFirstName</div>
                  <div class="v-data-table__mobile-row__cell">
                    <v-btn
                      :class="{
                        'red--text': item.EnglishFirstName.includes('?'),
                        'blue--text':!item.EnglishFirstName.includes('?'),
                        'ma-0':true
                        }"
                      text
                      tile
                      @click="activerow(item);editPatients()"
                    >{{item.EnglishFirstName}}</v-btn>
                  </div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper flex-wrap">
                  <div class="v-data-table__mobile-row__header">EnglishLastName</div>
                  <div class="v-data-table__mobile-row__cell">
                    <v-btn
                      :class="{
                        'red--text': item.EnglishLastName.includes('?'),
                        'blue--text':!item.EnglishLastName.includes('?'),
                        'ma-0':true
                        }"
                      text
                      tile
                      @click="activerow(item);editPatients()"
                    >{{item.EnglishLastName}}</v-btn>
                  </div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">FarsiFirstName</div>
                  <div class="v-data-table__mobile-row__cell">{{item.FarsiFirstName}}</div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">FarsiLastName</div>
                  <div class="v-data-table__mobile-row__cell">{{item.FarsiLastName}}</div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">HISID</div>
                  <div class="v-data-table__mobile-row__cell">{{item.HISID}}</div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">Modality</div>
                  <div class="v-data-table__mobile-row__cell">{{item.Modality}}</div>
                </div>
              </td>
              <td class="v-data-table__mobile-row">
                <div class="v-data-table__mobile-row__wrapper">
                  <div class="v-data-table__mobile-row__header">PatientAge</div>
                  <div class="v-data-table__mobile-row__cell">{{item.PatientAge}}</div>
                </div>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Worklist from "../../imports/api/collections/worklist.js";
import DeviceCode from "../../imports/api/collections/devicecode.js";
import HisWorklist from "./HisWorklist.vue";

export default {
  methods: {
    activerow: function(item) {
      if (this.sortByTable && this.sortByTable.length > 0) {
        const items = this.patientsOfTable.sort((a, b) => {
          const sortA = a[this.sortByTable[0]];
          const sortB = b[this.sortByTable[0]];

          if (this.sortDescTable && this.sortDescTable[0] == true) {
            if (sortA < sortB) return 1;
            if (sortA > sortB) return -1;
            return 0;
          } else {
            if (sortA < sortB) return -1;
            if (sortA > sortB) return 1;
            return 0;
          }
        });
        this.sortedItems = items;
      } else {
        this.sortedItems = this.patientsOfTable;
      }

      if (item) {
        this.selectedItem = item;
        this.selectedPatientInTable = [item];
      }

      this.selectedId = item._id;
      // this.$set(item, "selected", true);
    },
    searchPatients() {
      debugger;
      if (
        this.selectedDevice &&
        this.devicemap != this.selectedDevice.GroupName
      ) {
        let self = this;
        Meteor.call("Fetchworklist", this.selectedDevice.GroupName, function() {
          self.devicemap = self.selectedDevice.GroupName;
        });
      }

      if (this.selectedDevice == undefined || this.selectedDevice == null) {
        alert("لطفا یک مقدار را انتخاب نمایید");
      }
    },
    editPatients(item) {
      if (item == undefined) {
        var item = this.selectedItem;
        if (
          this.selectedPatientInTable == undefined ||
          this.selectedPatientInTable.length == 0
        )
          return;
      }

      this.editedItemParts = {
        EnglishFirstNameParts0: "",
        EnglishFirstNameParts1: "",
        EnglishFirstNameParts2: "",
        FarsiFirstNameParts0: "",
        FarsiFirstNameParts1: "",
        FarsiFirstNameParts2: "",
        EnglishLastNameParts0: "",
        EnglishLastNameParts1: "",
        EnglishLastNameParts2: "",
        FarsiLastNameParts0: "",
        FarsiLastNameParts1: "",
        FarsiLastNameParts2: ""
      };

      for (let element in item.FarsiFirstNameParts)
        this.editedItemParts["FarsiFirstNameParts" + Number(element)] =
          item.FarsiFirstNameParts[element];

      for (let element in item.EnglishFirstNameParts)
        this.editedItemParts["EnglishFirstNameParts" + Number(element)] =
          item.EnglishFirstNameParts[element];

      for (let element in item.EnglishLastNameParts)
        this.editedItemParts["EnglishLastNameParts" + Number(element)] =
          item.EnglishLastNameParts[element];

      for (let element in item.FarsiLastNameParts)
        this.editedItemParts["FarsiLastNameParts" + Number(element)] =
          item.FarsiLastNameParts[element];

      this.editDialog = true;
      this.selectedItem = item;
      this.selectedPatientInTable = [item];
    },
    close() {
      this.editDialog = false;
    },
    
    nextPatient() {
      let index = this.sortedItems.findIndex(
        patient => patient._id == this.selectedItem._id
      );
      this.nextDisabled = false;
      this.prevDisabled = false;
      if (index == -1) this.prevDisabled = true;
      if (index == this.sortedItems.length - 2) this.nextDisabled = true;

      if (index + 1 > this.sortedItems.length - 1) {
        this.nextDisabled = true;
        return;
      }

      this.editPatients(this.sortedItems[index + 1]);
      this.activerow(this.sortedItems[index + 1]);
    },
    prevPatient() {
      let index = this.sortedItems.findIndex(
        patient => patient._id == this.selectedItem._id
      );
      this.nextDisabled = false;
      this.prevDisabled = false;
      if (index == -1) {
        index = 1;
        this.prevDisabled = true;
      }

      index == 0 ? (this.prevDisabled = true) : "";

      if (index - 1 < 0) {
        this.prevDisabled = true;
        return;
      }

      this.editPatients(this.sortedItems[index - 1]);
      this.activerow(this.sortedItems[index - 1]);
    },
    savePatient() {
      debugger;
      this.selectedItem.EnglishFirstNameParts = [
        this.editedItemParts.EnglishFirstNameParts0,
        this.editedItemParts.EnglishFirstNameParts1,
        this.editedItemParts.EnglishFirstNameParts2
      ].filter(elm => {
        return elm && elm.length > 0;
      });

      this.selectedItem.FarsiFirstNameParts = [
        this.editedItemParts.FarsiFirstNameParts0,
        this.editedItemParts.FarsiFirstNameParts1,
        this.editedItemParts.FarsiFirstNameParts2
      ].filter(elm => {
        return elm && elm.length > 0;
      });

      this.selectedItem.EnglishLastNameParts = [
        this.editedItemParts.EnglishLastNameParts0,
        this.editedItemParts.EnglishLastNameParts1,
        this.editedItemParts.EnglishLastNameParts2
      ].filter(elm => {
        return elm && elm.length > 0;
      });

      this.selectedItem.FarsiLastNameParts = [
        this.editedItemParts.FarsiLastNameParts0,
        this.editedItemParts.FarsiLastNameParts1,
        this.editedItemParts.FarsiLastNameParts2
      ].filter(elm => {
        return elm && elm.length > 0;
      });

      let { selected, ...selectedItemClone } = this.selectedItem;
      debugger;
      this.editLoading = true;
      let self = this;
      Meteor.call("EditworklistItem", selectedItemClone, function(
        error,
        result
      ) {
        self.editLoading = false;
      });
    }
  },
  data: () => ({
    devicemap: "",
    selectedDevice: undefined,
    deviceComboSearch: null,
    selectedId: -1,
    noDataCombo: true,
    toggleAllOrUnknown: 0,
    selectedPatientInTable: undefined,
    sortByTable: undefined,
    sortDescTable: undefined,
    editDialog: false,
    editLoading: false,
    prevDisabled: false,
    nextDisabled: false,
    fetchWorklistLoading: false,
    editedItemParts: {
      EnglishFirstNameParts0: "EnglishFirstNameParts0",
      EnglishFirstNameParts1: "EnglishFirstNameParts1",
      EnglishFirstNameParts2: "EnglishFirstNameParts2",
      FarsiFirstNameParts0: "FarsiFirstNameParts0",
      FarsiFirstNameParts1: "FarsiFirstNameParts1",
      FarsiFirstNameParts2: "FarsiFirstNameParts2",
      EnglishLastNameParts0: "EnglishLastNameParts0",
      EnglishLastNameParts1: "EnglishLastNameParts1",
      EnglishLastNameParts2: "EnglishLastNameParts2",
      FarsiLastNameParts0: "FarsiLastNameParts0",
      FarsiLastNameParts1: "FarsiLastNameParts1",
      FarsiLastNameParts2: "FarsiLastNameParts2"
    },
    selectedItem: undefined,
    sortedItems: undefined
    
  }),
  mounted() {
    Meteor.call("getDeviceCodes");
    // this.selected = [this.desserts[1]];
  },
  computed: {
    deviceCodeItems() {
      // return this.devicecode.map(device => {
      //   return device.GroupName;
      // });
      return this.devicecode;
    },
    headerOfTable() {
      let headers = [];
      if (this.worklist && this.worklist.length > 0) {
        const sampleWorkList = this.worklist[0];

        for (let prop in sampleWorkList) {
          if (
            prop != "_id" &&
            !Array.isArray(sampleWorkList[prop]) &&
            [
              "AdmissionID",
              "EnglishFirstName",
              "EnglishLastName",
              "FarsiFirstName",
              "FarsiLastName",
              "HISID",
              "Modality",
              "PatientAge"
            ].indexOf(prop) >= 0
          )
            headers.push({
              text: prop,
              value: prop,
              class: "text-center"
            });
        }
        // headers.unshift({
        //   text: "Action",
        //   value: "Action",
        //   class: "text-center"
        // });
        return headers;
      }
      return [];
    },
    patientsOfTable() {
      if (this.worklist && this.worklist.length > 0) {
        if (this.toggleAllOrUnknown == 1) {
          return this.worklist.filter(patient => {
            return (
              patient.EnglishFirstName.includes("?") ||
              patient.EnglishLastName.includes("?")
            );
          });
        }
        return this.worklist;
      }
      return [];
    }
  },
  meteor: {
    $subscribe: {
      worklist: function() {
        return [this.devicemap];
      },
      devicecode: []
    },
    worklist() {
      return Worklist.find({}).fetch();
    },
    devicecode() {
      return DeviceCode.find({}).fetch();
    }
  },
  watch: {
    "$subReady.worklist"(ready) {},
    selectedDevice(newDevice, oldDevice) {
      console.log(newDevice);
      if (this.selectedDevice && this.selectedDevice.GroupName) {
        let self = this;
        this.fetchWorklistLoading = true;
        Meteor.call("Fetchworklist", this.selectedDevice.GroupName, function() {
          self.devicemap = self.selectedDevice.GroupName;
          console.log(self.devicemap);
          self.fetchWorklistLoading = false;
        });
      }
      // } else {
      //   alert("لطفا یکی از دستگاه ها را انتخاب نمایید");
      // }
    }
    // selectedPatientInTable(newSelected, oldSelected) {
    //   if (this.sortByTable && this.sortByTable.length > 0) {
    //     const items = this.patientsOfTable.sort((a, b) => {
    //       const sortA = a[this.sortByTable[0]];
    //       const sortB = b[this.sortByTable[0]];

    //       if (this.sortDescTable && this.sortDescTable[0] == true) {
    //         if (sortA < sortB) return 1;
    //         if (sortA > sortB) return -1;
    //         return 0;
    //       } else {
    //         if (sortA < sortB) return -1;
    //         if (sortA > sortB) return 1;
    //         return 0;
    //       }
    //     });
    //     console.log(items);
    //     this.sortedItems = items;
    //   } else {
    //     this.sortedItems = this.patientsOfTable;
    //   }

    //   if (newSelected) {
    //     this.selectedItem = newSelected[0];
    //   }
    // }
  }
};
</script>


<style lang="less" scoped>
.wholeLayout {
  height: calc(~"75vh - 106px");
}
</style>

<style scoped>
.unknownInput >>> .v-text-field__slot input {
  color: red;
}
</style>