<script setup>
import { ref, computed, inject, watch } from "vue";
import { useI18n } from "vue-i18n";
import dayjs from "dayjs";

const { t } = useI18n();
const { selectedDevice, selectedDeviceRealtime } = inject(
  "system_selectedDevice"
);

const groupedData = computed(() => {
  const grouped = {};

  if (selectedDeviceRealtime?.value) {
    selectedDeviceRealtime.value.forEach((record) => {
      const { ori_device_number, time } = record;

      if (!grouped[ori_device_number]) {
        grouped[ori_device_number] = {
          time,
          data: [],
        };
      }

      selectedDevice.value.value.points.forEach((d) => {
        if (record.point === d.points) {
          grouped[ori_device_number].data.push({
            ...d,
            value: record.value,
          });
        }
      });
    });
  }

  return grouped;
});
</script>

<template>
  <div v-if="selectedDeviceRealtime">
    <div v-for="(group, oriDeviceNumber) in groupedData" :key="oriDeviceNumber">
      <p class="mt-5 text-info">
        {{ $t("operation.updated_time") }} : {{ group.time }}
      </p>
      <table class="table mt-2">
        <thead>
          <tr>
            <th
              class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
            >
              {{ $t("system.attribute") }}
            </th>
            <th
              class="border text-white text-lg text-center bg-cyan-600 bg-opacity-30"
            >
              {{ $t("system.value") }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(group, index) in group.data" :key="index">
            <td class="border text-white text-lg text-center">
              {{ group.full_name }}
            </td>
            <td class="border text-white text-lg text-center">
              {{ group.value }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <p class="text-2xl text-center my-6" v-else>{{$t("table.no_data")}}</p>
</template>

<style lang="scss" scoped></style>
