<template>
  <v-app id="inspire">
    <template v-if="!$vuetify.rtl">
      <v-app-bar app clipped-left color="teal lighten-3" dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
        <router-view name="register_patient"></router-view>
        
        <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" app clipped>
        <v-list nav dense>
          <v-list-item-group v-model="item" color="primary">
            <v-list-item v-for="(item, i) in updatedItems" :key="i" :to="item.url">
              <!-- <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>-->
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </template>

    <template v-if="$vuetify.rtl">
      <v-app-bar app clipped-right color="teal lighten-3" dark>
        
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
        <v-spacer></v-spacer>
        
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" app clipped right>
        <v-list nav dense>
          <v-list-item-group v-model="item" color="primary">
            <v-list-item v-for="(item, i) in updatedItems" :key="i" :to="item.url">
              <!-- <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>-->
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </template>

    <v-content>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
      <!-- <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view name="edit_worklist"></router-view>
        </keep-alive>
      </transition> -->
    </v-content>

    <app-footer></app-footer>
  </v-app>
</template>

<script>
import { Fragment } from "vue-fragment";
import AppFooter from "../components/AppFooter.vue";
import { Meteor } from "meteor/meteor";
import RegisterPatient from "../components/RegisterPatient.vue";
export default {
  components: {
    "app-footer": AppFooter,
    fragment: Fragment,
    RegisterPatient
  },
  props: {
    source: String
  },
  methods:{
    
  },
  computed: {
    // getCurrentRoute(){
    //   debugger
    //  return this.$router.currentRoute.name == "worklist"
    
    // },
    updatedItems() {
      if (
        Meteor.userId() &&
        this.users.length > 0 &&
        Meteor.users.findOne({ _id: Meteor.userId() }).username == "marcoadmin"
      ) {
        if (this.items.findIndex(item => item.text == "Users") < 0)
          this.items.push({ text: "Users", url: "/main/users" });
      }
      return this.items;
    }
  },
  data: () => ({
    drawer: null,
    drawerRight: null,
    right: false,
    left: false,
    item: 0,
    items: [
      { text: "Worklist", url: "/main/worklist", icon: "mdi-folder" },
      { text: "HISLink", url: "/main/hislink", icon: "mdi-account-multiple" },
      { text: "DeviceMap", url: "/main/devicemap", icon: "mdi-star" },
      { text: "Client", url: "/main/client" }
    ]
  }),
  meteor: {
    $subscribe: {
      users: []
    },
    users() {
      return Meteor.users.find({});
    }
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>