<template>
  <v-container fluid>
    <div style="overflow-y:hidden" class="d-flex flex-column justify-space-around wholeLayout">
      <div class="ma-1">
        <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="8" 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="Text"
                      item-value="Value"
                    >
                      <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>" یافت نشد
                            </v-list-item-title>
                          </v-list-item-content>
                        </v-list-item>
                      </template>
                    </v-combobox>
                    <v-btn
                      color="rgb(94, 181, 177,.85)"
                      class="white--text"
                      @click="searchPatients()"
                      :disabled="btnDisabled"
                    >{{$t('WorkList.seachBtn')}}</v-btn>
                  </v-col>
                  <v-col cols="12" sm="4" class="d-flex justify-space-around align-center">
                    <v-btn color="success" text @click="toggleAllOrUnknown=0">
                      <v-icon left v-if="toggleAllOrUnknown==0">done</v-icon>
                      <strong>All</strong>
                    </v-btn>
                    <v-btn color="success" text @click="toggleAllOrUnknown=1">
                      <v-icon left v-if="toggleAllOrUnknown==1">done</v-icon>
                      <strong>Unknown</strong>
                    </v-btn>
                  </v-col>
                </v-row>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </div>
      <div class="d-flex flex-grow-1 ma-1" style="overflow:auto;flex-basis:50%">
        <div v-if="worklist && worklist.length > 0">
          <v-data-table
            ref="patientsDatatable"
            v-model="selectedPatientInTable"
            :headers="headerOfTable"
            :items="patientsOfTable"
            single-select
            item-key="name"
            class="elevation-1"
            style="width:100%"
            show-select
            hide-default-footer
            disable-pagination
            :sort-by.sync="sortByTable"
            :sort-desc.sync="sortDescTable"
          >
            <template v-slot:top>
              <v-toolbar flat color="white">
                <v-toolbar-title>{{devicemap==""?'no device':devicemap}}</v-toolbar-title>

                <v-divider class="mx-4" inset vertical></v-divider>
              </v-toolbar>
            </template>
            <template v-slot:item.action="{ item }">
              <v-icon small>edit</v-icon>
            </template>
          </v-data-table>
        </div>

        <v-data-table
          v-else
          ref="patientsDatatable"
          v-model="selectedPatientInTable"
          :headers="headerOfTable"
          :items="patientsOfTable"
          single-select
          item-key="name"
          class="elevation-1"
          style="width:100%"
          show-select
          hide-default-footer
          disable-pagination
          :sort-by.sync="sortByTable"
          :sort-desc.sync="sortDescTable"
        >
          <template v-slot:top>
            <v-toolbar flat color="white">
              <v-toolbar-title>{{devicemap==""?'no device':devicemap}}</v-toolbar-title>

              <v-divider class="mx-4" inset vertical></v-divider>
            </v-toolbar>
          </template>
          <template v-slot:item.action="{ item }">
            <v-icon small>edit</v-icon>
          </template>
        </v-data-table>
      </div>
    </div>
  </v-container>
</template>

<script>
import Worklist from "../../imports/api/collections/worklist.js";
import DeviceCode from "../../imports/api/collections/devicecode.js";
import { Tracker } from "meteor/tracker";
export default {
  methods: {
    searchPatients() {
      if (this.selectedDevice && this.devicemap != this.selectedDevice.Value) {
        Meteor.call("Fetchworklist", this.devicemap);
        this.devicemap = this.selectedDevice.Value;
      }

      if (this.selectedDevice == undefined || this.selectedDevice == null) {
        alert("لطفا یک مقدار را انتخاب نمایید");
      }
    }
  },
  data: () => ({
    devicemap: "",
    selectedDevice: undefined,
    deviceComboSearch: null,
    btnDisabled: false,
    noDataCombo: true,
    toggleAllOrUnknown: 0,
    selectedPatientInTable: undefined,
    sortByTable: undefined,
    sortDescTable: undefined
  }),
  mounted() {
    // Meteor.setTimeout(() => {
    //   this.devicemap = "ct";
    // }, 5000);
    // Meteor.setTimeout(() => {
    //   this.devicemap = "ratio";
    // }, 10000);
    Meteor.call("getDeviceCodes");
    // this.selected = [this.desserts[1]];
  },
  computed: {
    deviceCodeItems() {
      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]))
            headers.push({
              text: prop,
              value: prop,
              class: "text-center"
            });
        }
        return headers;
      }
      return [];
    },
    patientsOfTable() {
      if (this.worklist && this.worklist.length > 0) {
        return this.worklist;
      }
      return [];
    }
  },
  meteor: {
    $subscribe: {
      worklist: function() {
        return [this.devicemap];
      },
      devicecode: []
    },
    worklist() {
      return Worklist.find({}).fetch();
    },
    devicecode() {
      return DeviceCode.find({}).fetch();
    }
  },
  watch: {
    worklist: (newWorklist, oldWorklist) => {
      console.log(newWorklist);
    },
    "$subReady.worklist"(ready) {
      this.btnDisabled = !ready;
    },
    selectedPatientInTable(newSelected, oldSelected) {
      // console.log(this.desserts);
      // console.log(this.sortByTable);
      // console.log(this.sortDescTable);
      // console.log(newSelected);

      if (this.sortByTable && this.sortByTable.length > 0) {
        const items = this.desserts.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);
      }
    }
  }
};
</script>


<style lang="less" scoped>
.wholeLayout {
  height: calc(~"98vh - 106px");
}
td,
th {
  width: 50px !important;
}
</style>