<script setup>
import Swal from "sweetalert2";

defineProps(['objects']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

const parseCustomerName = (user) => {
  if (user.customer_name) {
    return user.customer_name;
  } else {
    return "-";
  }
}

import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { showEditNumberPlateScannerForm } from "@/components/forms/superUser/editNumberPlateScannerForm.vue";

const redirect = (path) => {
  window.location = path;
}
const showApiKey = (apiKey) => {
  Swal.fire({
    title: 'API Key',
    text: apiKey
  });
};

</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th>Id</th>
      <th>Afdeling</th>
      <th>Navn</th>
      <th>Noter</th>
      <th>Handlinger</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="scanner in objects" :key="scanner.id">
      <td>{{ scanner.id }}</td>
      <td>{{ scanner.department_id }}</td>
      <td>{{ scanner.name }}</td>
      <td>{{ scanner.notes }}</td>
      <td>
        <div class="buttons">
          <button class="button is-small is-dark" @click="showEditNumberPlateScannerForm(scanner.id, scanner.department_id, scanner.name, scanner.notes)">Rediger</button>
          <button class="button is-small is-darker" @click="showApiKey(scanner.api_key)">API KEY</button>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<style scoped>

</style>