<script setup>
import { computed, inject, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { selectedDeviceCog } = inject("system_selectedDevice");
const tableData = ref({});

watch(
  selectedDeviceCog,
  (newValue) => {
    if (newValue) {
      tableData.value = newValue;
    } else {
      tableData.value = {};
    }
  },
  { immediate: true }
);
</script>

<template>
  <table class="table">
    <tbody>
      <tr>
        <td>{{ $t("assetManagement.device_number") }}</td>
        <td>{{ tableData.device_number }}</td>
      </tr>
      <tr>
        <td>{{ $t("assetManagement.device_name") }}</td>
        <td>{{ tableData.full_name }}</td>
      </tr>
      <tr>
        <td>{{ $t("assetManagement.floor") }}</td>
        <td>{{ tableData.floor }}</td>
      </tr>
      <tr>
        <td>{{ $t("assetManagement.device_coordinate") }}</td>
        <td>{{ tableData.device_coordinate }}</td>
      </tr>
      <tr>
        <td>{{ $t("assetManagement.brand_and_modal") }}</td>
        <td>{{ tableData.brand }} / {{ tableData.device_model }}</td>
      </tr>
      <tr>
        <td>{{ t("assetManagement.company_and_contact") }}</td>
        <td>
          {{ tableData.company?.name }} /
          {{ tableData.company?.contact_person }}
        </td>
      </tr>
      <tr>
        <td>{{ t("assetManagement.buying_date") }}</td>
        <td>{{ tableData.buying_date }}</td>
      </tr>
      <tr>
        <td>{{ t("assetManagement.created_at") }}</td>
        <td>{{ tableData.created_at }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
td {
  border: 1px solid #ddd
}

td:first-child {
  font-weight: bold; 
}
</style>
