<script setup>
import HistorySidebar from "./components/HistorySidebar.vue";
import HistorySearch from "./components/HistorySearch.vue";
import HistoryTable from "./components/HistoryTable.vue";
import HistoryModal from "./components/HistoryModal.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 openModal = () => {
  history_modal.showModal();
};

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

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

<template>
  <h1 class="text-2xl font-extrabold mb-2">歷史資料</h1>
  <div class="grid grid-cols-12 gap-2">
    <div class="col-span-2 pe-5">
      <HistorySidebar />
    </div>
    <div class="col-span-10">
      <HistoryModal />
      <HistorySearch />
      <HistoryTable />
    </div>
  </div>
</template>

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