<script setup lang="ts">
import { api, axios } from 'boot/axios';
import { ref } from 'vue';

const deviceInfo = ref();

async function fetchDeviceInfo(): Promise<void> {
  try {
    const res = await api.get('/device_info');
    console.log('DeviceInfo fetched successfully:', res.data);
    deviceInfo.value = res.data;
  } catch (error) {
    console.error('Error fetching device info:', error);
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    }
  }
}
await fetchDeviceInfo();
</script>

<template>
  <q-page class="row items-center justify-evenly">
    <div style="width: 70vw; white-space: normal">
      <h3>Device Info:</h3>
      <ul>
        <li v-for="(value, key) in deviceInfo" :key="key">
          <strong>{{ key }}:</strong>
          <span v-if="typeof value === 'object' && value !== null">
            <ul>
              <li v-for="(subValue, subKey) in value" :key="subKey">
                <strong>{{ subKey }}:</strong>
                <span v-if="typeof subValue === 'object' && subValue !== null">
                  <ul>
                    <li v-for="(subSubValue, subSubKey) in subValue" :key="subSubKey">
                      <strong>{{ subSubKey }}:</strong>
                      <span v-if="typeof subSubValue === 'object' && subSubValue !== null">
                        <ul>
                          <li v-for="(subSubSubValue, subSubSubKey) in subSubValue" :key="subSubSubKey">
                            <strong>{{ subSubSubKey }}:</strong> {{ subSubSubValue }}
                          </li>
                        </ul>
                        </span>
                      <span v-else>{{ subSubValue }}</span>
                    </li>
                  </ul>
                </span>
                <span v-else>{{ subValue }}</span>
              </li>
            </ul>
          </span>
          <span v-else>{{ value }}</span>
          </li>
        </ul>
    </div>
  </q-page>
</template>

<style scoped></style>
