<template>
  <v-container fluid>
    <v-row justify="center" dense class="flex-wrap">
      <v-col md="6" cols="12">
        <v-card>
          <v-card>
            <v-card-actions>
              <v-combobox
                v-model="model"
                :items="items"
                :search-input.sync="search"
                hide-selected
                label="please select a machine"
                persistent-hint
                small-chips
                clearable
              >
                <template v-if="noData" v-slot:no-data>
                  <v-list-item>
                    <v-list-item-content>
                      <v-list-item-title>
                        No results matching "
                        <strong>{{ search }}</strong>". Press
                        <kbd>enter</kbd> to create a new one
                      </v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </template>
              </v-combobox>
              <v-btn text color="deep-purple accent-4">Search</v-btn>
            </v-card-actions>
          </v-card>
          <v-card-actions class="d-flex flex-wrap justify-center">
            <v-btn-toggle v-model="toggle_exclusive" mandatory>
              <v-btn class="green">
                <v-icon left v-if="toggle_exclusive==0">done</v-icon>
                <strong>All</strong>
              </v-btn>
              <v-btn class="green" style="margin-left:0px;margin-right:0px">
                <v-icon left v-if="toggle_exclusive==1">done</v-icon>
                <strong>unknown</strong>
              </v-btn>
            </v-btn-toggle>

            <v-btn class="ma-3" rounded>
              <strong>Export To Excel</strong>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
    <v-row justify="center" dense class="flex-wrap">
      <v-col cols="12">
        <v-data-table
          v-model="selected"
          :headers="headers"
          :items="desserts"
          single-select
          item-key="name"
          show-select
          hide-default-footer
          class="elevation-1"
          disable-pagination
          style="width:100%"
        ></v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Worklist from "../../imports/api/collections/worklist.js";
import { Tracker } from "meteor/tracker";
export default {
  data: () => ({
    devicemap: "ratio",
    items: ["Gaming", "Programming", "Vue", "Vuetify"],
    model: ["Vuetify"],
    search: null,
    chips: true,
    multiple: true,
    hideSelected: true,
    noData: true,
    clearable: false,
    toggle_exclusive: 0,
    selected: [],
    headers: [
      {
        text: "Dessert (100g serving)",
        align: "left",
        sortable: false,
        value: "name"
      },
      { text: "Calories", value: "calories" },
      { text: "Fat (g)", value: "fat" },
      { text: "Carbs (g)", value: "carbs" },
      { text: "Protein (g)", value: "protein" },
      { text: "Iron (%)", value: "iron" }
    ],
    desserts: [
      {
        name: "Frozen Yogurt",
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: "1%"
      },
      {
        name: "Ice cream sandwich",
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: "1%"
      },
      {
        name: "Eclair",
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: "7%"
      },
      {
        name: "Cupcake",
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: "8%"
      },
      {
        name: "Gingerbread",
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: "16%"
      },
      {
        name: "Jelly bean",
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: "0%"
      },
      {
        name: "Lollipop",
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: "2%"
      },
      {
        name: "Honeycomb",
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: "45%"
      },
      {
        name: "Donut",
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: "22%"
      },
      {
        name: "KitKat",
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: "6%"
      }
    ]
  }),
  mounted() {
    Meteor.setTimeout(() => {
      this.devicemap = "ct";
    }, 5000);
    Meteor.setTimeout(() => {
      this.devicemap = "ratio";
    }, 10000);
  },
  meteor: {
    $subscribe: {
      worklist: function() {
        return [this.devicemap];
      }
    },
    worklist() {
      return Worklist.find({});
    }
  },
  watch: {
    worklist: (newWorklist, oldWorklist) => {
      console.log(newWorklist);
    },
    "$subReady.worklist": ready => {
      console.log(ready);
    }
  }
};
</script>