<template>
  <v-dialog v-model="HisWorklistDialog" max-width="900px">
    <v-card>
      <v-progress-linear
        :active="HisWorklistLoading"
        :indeterminate="HisWorklistLoading"
        absolute
        top
        color="cyan lighten-2"
      ></v-progress-linear>
      <v-card-title>
        <v-icon class="mr-1" @click="internalCloseDialog">close</v-icon>
        <span>{{$t("HisWorklist.title")}}</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 cols="9">
                <v-autocomplete :items="itemsOfBrands" label="Brand" v-model="selectedBrand"></v-autocomplete>
              </v-col>
            </v-row>-->
            <v-row dense>
              <v-data-table
                :headers="headerOfTable"
                :items="itemsOfTable"
                item-key="_id"
                class="elevation-1"
                style="width:100%"
                fixed-header
                disable-sort
                height="600px"
              ></v-data-table>
            </v-row>
          </v-card>
        </v-container>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>
<script>
import Brands from "../../imports/api/collections/brands.js";
import BrandCollections from "../../imports/api/collections/worklist4hislink.js";
import { Mongo } from "meteor/mongo";
export default {
  props: ["HisWorklistDialogProp", "closeDialog", "selectedBrand"],
  data: () => ({
    HisWorklistLoading: false,
    HisWorklistDialog: false
    // selectedBrand: null
  }),
  computed: {
    itemsOfBrands() {
      if (this.brands && this.brands.length > 0) {
        return this.brands.map(brand => {
          return brand.Name;
        });
      }
      return [];
    },
    itemsOfTable() {
      if (this.worklist4hislink && this.worklist4hislink.length > 0) {
        let worklistArray = [];
        for (let worklist of this.worklist4hislink) {
          let tempWorklist = {};
          for (let prop in worklist) {
            tempWorklist[prop] = JSON.stringify(worklist[prop]);
          }
          worklistArray.push(tempWorklist);
        }
        return worklistArray;
      }
      return [];
    },
    headerOfTable() {
      if (this.worklist4hislink && this.worklist4hislink.length > 0) {
        let headerNames = [];
        let worklist = this.worklist4hislink[0];
        for (let prop in worklist) {
          headerNames.push({
            text: prop,
            value: prop,
            class: "text-center",
            width: 180
          });
        }
        return headerNames;
      }
      return [];
    }
  },
  watch: {
    "$subReady.worklist4hislink"(ready) {
      this.HisWorklistLoading = false;
    },
    HisWorklistDialog(newvalue, oldvalue) {
      if (newvalue == false) {
        this.closeDialog();
      } else {
        this.HisWorklistLoading = true;
      }
    },
    HisWorklistDialogProp(newvalue, oldvalue) {
      this.HisWorklistDialog = newvalue;
    }
  },
  methods: {
    internalCloseDialog() {
      this.HisWorklistDialog = false;
    }
  },
  meteor: {
    $subscribe: {
      // brands: [],
      worklist4hislink: function() {
        return [this.selectedBrand];
      }
    },
    // brands() {
    //   return Brands.find({}).fetch();
    // },
    worklist4hislink() {
      if (this.selectedBrand == null) return [];
      return BrandCollections[this.selectedBrand].find({}).fetch();
    }
  }
};
</script>
<style scoped>
</style>