<script setup>
import { ref } from "vue";
import { VDataTable } from "vuetify/lib/labs/VDataTable";

const userData = useCookie("userData");

const project_number = ref("");
const project_name = ref("");
const initial_date = ref("");
const work_duration = ref("");

// Fetch project data
const fetchProjectData = async () => {
  try {
    const response = await $api(`/pdet/project/show`, {
      method: "POST",
      body: JSON.stringify({ project_number: import.meta.env.VITE_PROJECT_NUMBER }),
    });

    project_number.value = response.no;
    project_name.value = response.name;
    initial_date.value = response.expectedBeginAt;
    work_duration.value = response.work_duration;
  } catch (error) {
    console.error("Error fetching project data:", error);
  }
};

const data = ref([]);
const headers = [
  {
    title: "使用者", // 執行操作的使用者
    key: "user",
  },
  {
    title: "專案編號", // 專案編號
    key: "project_number",
  },
  {
    title: "操作類型", // 操作類型
    key: "action_type",
  },
  {
    title: "操作內容", // 操作的詳細內容
    key: "action_content",
  },
  {
    title: "操作結果", // 操作結果
    key: "action_result",
  },
  {
    title: "操作時間", // 操作的時間
    key: "action_timestamp",
  },
];

onMounted(async () => {
  await fetchProjectData(); // 確保在fetchProjectData完成後再執行fetchLogData
  fetchLogData();
});

const fetchLogData = async () => {
  try {
    const response = await $api("/pdet/log/read", {
      method: "POST",
      body: JSON.stringify({ project_number: project_number.value }),
    });
    data.value = response;
  } catch (error) {
    console.error("Error fetching log data:", error);
  }
};

definePage({
  meta: {
    action: "read",
    subject: "pdet",
  },
});
</script>

<template>
  <VDataTable :headers="headers" :items="data" :items-per-page="5" />
</template>
