<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
onMounted(() => {
  fetchData();
});

// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
const data = reactive<FormData>({
  complaint: "",
  complaintdetail: "",
  detail: "",
  fault: "",
  results: "",
  other: "",
  evidenceFiles: null,
  fileComplaint: null,
  clickTime: false,
  date: null,
  dateEnd: null,
  investigation: "",
  daysExtend: "",
});
const fetchData = async () => {
  // ดึงค่าจาก api
  data.complaint = "เรื่องที่ 1";
  data.complaintdetail = "รายละเอียด";
  data.detail = "รายละเอียด";
  data.fault = "001";
  data.results = "test";
  data.other = "";
  data.evidenceFiles = null;
  data.fileComplaint = null;
  data.clickTime = false;
  data.date = new Date("2023-11-07T14:58:00");
  data.dateEnd = new Date("2023-11-08T14:58:00");
  data.investigation = "002";
  data.daysExtend = "";
};

// แก้ไขข้อมูล
const onSubmit = async (id: string) => {
  // put
  console.log("edit");
  router.push(`/discipline/investigatefacts`);
};
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="$router.push(`/discipline/investigatefacts`)"
      />
      แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
    </div>

    <Form :on-submit="onSubmit" :data="data" />
  </div>
</template>
