<template>
  <q-page class="flex flex-center q-pa-md">
	  <img
      alt="Dasmap logo"
      src="/icons/favicon.png"
      style="width: 100px; height: 100px"
    />
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from "vuex";
import { useQuasar } from 'quasar';

import DataSource from "dasmap/core/DataSource.vue";
import DataView from "dasmap/basic/DataView.vue";

var Asfa = function() {
  
  var Props = function() {
    return {
      
    };
  };
  
  var Data = function() {
    return {
      store : useStore(),
      id : 0,
    };
  };
  
  var Computed = function() {
    
    let baseUrl = function() {
      return DataSource.api.baseUrl;
    };
    
    let darkStatus = function() {
      return this.$q.dark.isActive;
    };
    
    return {
      baseUrl,
      darkStatus,
    };
  };
  
  var Watch = function() {
  
    let $route = function(newVal) {
      let $a = this;
      let id = newVal.query.id;
      $a.id = id;
    };
    
    return {
      $route,
    };
  };
  
  var Methods = function() {
    
    let about = function() {
      console.log("About Asfa");
    };
    
    return {
      about,
    };
  };
  
  var Mounted = function() {
    let $a = this;
    let id = $a.$route.query.id;
    $a.id = id;
  };
  
  var Setup = function(props) {
    
  };
  
  var BeforeUnmount = function() {
    
  };
  
  var Component = function() { 
    
    return {
      // setup this component name
      name : "IndexPage",
      // addition functions here
      
      // setup used components here
      components : {
        //~ DataView,
      },
      props : Props(),
      data : Data,
      computed : Computed(),
      watch : Watch(),
      methods : Methods(),
      mounted : Mounted,
      setup : Setup,
      beforeUnmount : BeforeUnmount,
    }
  };
  
  return Component();
};

export default defineComponent(Asfa());
</script>

<style>
    
</style>
