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

const { t, locale } = useI18n();

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

const data = computed(() => {

  return selectedDevice.value?.value?.points?.map((d) => ({
    ...d,
    value: selectedDeviceRealtime?.value?.find(({ point }) => point === d.points)?.value || "無資料"
  })) || []
})

const columns = [{
  title: t("system.attribute"),
  key: "full_name"
},
{
  title: t("system.value"),
  key: "value"
}]

</script>

<template>
  <Table :loading="loading" :columns="columns" :dataSource="data || []" :withStyle="false">
  </Table>
</template>

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