<script setup>
import HistorySidebar from "./components/HistorySidebar.vue";
import HistorySearch from "./components/HistorySearch.vue";
import HistoryTable from "./components/HistoryTable.vue";
import dayjs from "dayjs";
import { ref, provide } from "vue";

const tableData = ref([]);
const loading = ref(false);
const updateTableData = (data) => {
  tableData.value = data.items.map((d) => ({
    ...d,
    key: `${d.device_number}_${d.points}_${dayjs(d.timestamp).format("x")}`,
  }));
};

const updateLoading = () => {
  loading.value = !loading.value;
};

provide("history_table_data", { tableData, updateTableData, loading, updateLoading });
</script>

<template>
  <h1 class="text-2xl font-extrabold mb-2">{{ $t('history.title') }}</h1>
  <div class="grid grid-cols-10 gap-2">
    <div class="col-span-2 ">
      <HistorySidebar />
    </div>
    <div class="col-span-8 ">
      <HistorySearch />
      <HistoryTable />
    </div>
  </div>
</template>

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