<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
import { setDepartment, department, departmentId, getDepartmentPrice, editDepartmentPrice } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import SuperUserDashboardDepartmentStripeNavigation
  from "@/views/dashboards/superUserDashboard/department/stripe/SuperUserDashboardDepartmentStripeNavigation.vue";
import { parseError, getError } from "@/components/request/HandleGlobalError.vue";
import ShowErrorField from "@/components/global/ShowErrorField.vue";

// Set the random unique id
const uniqueId = Math.random().toString(36).substring(7);

// Get the department from the route
const router = useRouter()
setDepartment(router.currentRoute.value.params.departmentId);

// Set the terminals
const terminals = ref([]);

// Get the terminals
const getTerminals = async () => {
  const response = await SessionUser.superUser.modules.stripe.departments.terminals.readers.list(departmentId.value).then((response) => {
    console.log(response.data.data.data);
    terminals.value = response.data.data.data;
  })
      .catch((error) => {
        parseError(error, uniqueId);
      });
}

getTerminals();
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <DepartmentSubPageWrapper>
      <template #title>
        <PageTitle title="Department" subtitle="Payment terminals">
          <template #buttons>
          </template>
        </PageTitle>
      </template>
      <div>
        <SuperUserDashboardDepartmentStripeNavigation />
        <show-error-field :error="uniqueId" />
        <table class="is-fullwidth table table-striped is-hoverable is-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Type</th>
              <th>Label</th>
              <th>Last seen</th>
              <th>Serial number</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="terminal in terminals" :key="terminal.id">
              <td>{{ terminal.id }}</td>
              <td>{{ terminal.device_type }}</td>
              <td>{{ terminal.label }}</td>
              <td>{{ new Date(terminal.last_seen_at).toLocaleString() }}</td>
              <td>{{ terminal.serial_number }}</td>
              <td>{{ terminal.status }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </DepartmentSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>