<template>
  <v-container>
    <v-row>
      
      <v-col cols="6"  v-if="role == 1 || role == 2 || role == 3">
        <UserManager ref="UserManager"></UserManager>
      </v-col>

      <v-col cols="6" v-if="role == 1 || role == 2">
        <AccessManager ref="AccessManager" ></AccessManager>
      </v-col>

      <v-col cols="6" v-if="role == 1 || role == 2">
        <ToolsManager ref="ToolsManager"></ToolsManager>
      </v-col>
      
      <v-col cols="6" v-if="role == 1 || role == 2">
        <JobRolesManager ref="JobRolesManager"></JobRolesManager>
      </v-col>

    </v-row>
  </v-container>
</template>


<script>
import { defineAsyncComponent } from "vue";
const UserManager = defineAsyncComponent(() => import("@/components/Home/Cards/UserManager.vue"));
const AccessManager = defineAsyncComponent(() => import("@/components/Home/Cards/AccessManager.vue"));
const ToolsManager = defineAsyncComponent(() => import("@/components/Home/Cards/ToolsManager.vue"));
const JobRolesManager = defineAsyncComponent(() => import("@/components/Home/Cards/JobRolesManager.vue"));
export default {
  components: {
    UserManager,
    AccessManager,
    ToolsManager,
    JobRolesManager
  },
  props: {
    role: {
      type: String,
      required: true
    },
  },

  data: () => ({
  }),

  mounted() {

  },

  methods: {
    getRole(role) {
      if(role == 1) {
        return 'Super Admin';
      }

      if(role == 2) {
        return 'IT';
      }

      if(role == 3) {
        return 'Manager';
      }

      if(role == 4) {
        return 'User';
      }
    }
  },
}
</script>





