<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/director.vue";

const visibleColumns = ref<String[]>([
  "no",
  "subject",
  "beingInvestigated",
  "fault",
  "penaltyLevel",
  "caseFault",
]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "subject",
    align: "left",
    label: "ชื่อ - นามสกุล",
    sortable: true,
    field: "subject",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "beingInvestigated",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "beingInvestigated",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fault",
    align: "left",
    label: "หน้าที่",
    sortable: true,
    field: "fault",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "penaltyLevel",
    align: "left",
    label: "อีเมล",
    sortable: true,
    field: "penaltyLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "caseFault",
    align: "left",
    label: "เบอร์โทรศัพท์",
    sortable: true,
    field: "caseFault",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const clickAdd = () => {
  console.log("clickadd");
};

const popup = () => {
  modal.value = true;
  filterKeyword2.value = "";
};

const mixin = useCounterMixin();
const {
  date2Thai,
  dateToISO,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  success,
  dialogMessageNotify,
} = mixin;

const initialPagination = ref<any>({
  rowsPerPage: 0,
});
const router = useRouter();
const route = useRoute();
const rows = ref<any[]>([]);
const modal = ref<boolean>(false);
const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateInvestigate = ref<Date>(new Date());
const dateAllegation = ref<Date>(new Date());
const dateEvident = ref<Date>(new Date());
const filterKeyword2 = ref<string>("");
const typefault = ref<string>("");
const faultLevel = ref<string>("");
const type = ref<string>("");
const rows2 = ref<any[]>([]);
const Complaint = ref<string>("");
const trueDetail = ref<string>("");
const evidence = ref<string>("");
const recordAccuser = ref<string>("");
const witnesses = ref<string>("");
const InvestResults = ref<string>("");
const files = ref<any>();
const filesEvidence = ref<any>();
const filesRecordAccuser = ref<any>();
const filesWitnesses = ref<any>();
const filesEtc = ref<any>();
const fileDocDataUpload = ref<File[]>([]);
const refRaw = ref<string>("");
const casefault = ref<string>("");
const whereInvestigate = ref<string>("");
const optionsTypefault = ref([
  { label: "ไม่ระบุ", value: 1 },
  { label: "ร้ายแรง ", value: 2 },
  { label: "ไม่ร้ายแรง", value: 3 },
]);
const optionsfaultLevel = ref([
  { label: "ไม่ร้ายแรง", value: 1 },
  { label: "ภาคทัณฑ์ ", value: 2 },
  { label: "ตัดเงินเดือน", value: 3 },
  { label: "ลดขั้นเงินเดือน", value: 4 },
  { label: "ร้ายแรง", value: 5 },
  { label: "ปลดออก", value: 6 },
  { label: "ไล่ออก", value: 7 },
]);

const routeName = router.currentRoute.value.name;

const clickClose = () => {
  modal.value = false;
};

onMounted(async () => {
  //   if (route.params.id) {
  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
  //     await fetchData();
  //   }
});
// เรียกข้อมูลของรอบการเสนอขอ
const fetchData = async () => {
  //   edit.value = true;
  //   showLoader();
  //   await http
  //     .get(config.API.getRoundInsignia(id.value))
  //     .then((res) => {
  //       const data = res.data.result;
  //       id.value = data.period_id;
  //       roundInsig.value =
  //         options.value.filter((r: any) => r.value == data.period_round).length >
  //         0
  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
  //           : null;
  //       yearly.value = data.period_year;
  //       datelast.value = data.period_amount;
  //       dateInvestigate.value = new Date(data.period_start);
  //       dateAllegation.value = new Date(data.period_end);
  //       files.value = data.period_doc;
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
};

const deleteData = async (id: string) => {
  //   showLoader();
  //   await http
  //     .delete(config.API.periodExamId(id))
  //     .then((res) => {
  //       success($q, "ลบข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       hideLoader();
  //     });
};

const filter = ref<string>(""); //search data table

const fileUploadDoc = async (files: any) => {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
};

// แก้ไขข้อมูล

// คลิกบันทึก
const checkSave = () => {
  //   if (myForm.value !== null) {
  //     myForm.value.validate().then(async (success) => {
  //       if (success) {
  //         dialogConfirm($q, () => SaveData());
  //       } else if (Number(datelast.value) !== 0) {
  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
  //       }
  //     });
  //   }
};
// บันทึกข้อมูล
const SaveData = async () => {
  //   if (edit.value) {
  //     await editData(id.value);
  //   } else {
  //     await addData();
  //     clickBack();
  //   }
};
// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
const addData = async () => {
  //   const formData = new FormData();
  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
  //     roundInsig.value.value
  //   }  ปี ${yearly.value + 543} `;
  //   formData.append("name", name);
  //   formData.append("year", yearly.value.toString());
  //   formData.append("amount", datelast.value.toString());
  //   formData.append("round", roundInsig.value.value);
  //   if (dateInvestigate.value !== null) {
  //     formData.append("startDate", dateToISO(dateInvestigate.value));
  //   }
  //   if (dateAllegation.value !== null) {
  //     formData.append("endDate", dateToISO(dateAllegation.value));
  //   }
  //   formData.append("file", files.value);
  //   showLoader();
  //   await http
  //     .post(config.API.listRoundInsignia(), formData)
  //     .then(() => {
  //       success($q, "บันทึกข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       hideLoader();
  //     });
};
// แก้ไขข้อมูล
const editData = async (id: string) => {
  //   const formData = new FormData();
  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
  //     roundInsig.value.value
  //   } ปี ${yearly.value + 543}`;
  //   formData.append("name", name);
  //   formData.append("year", yearly.value.toString());
  //   formData.append("amount", datelast.value.toString());
  //   formData.append("round", roundInsig.value.value);
  //   if (dateInvestigate.value !== null) {
  //     formData.append("startDate", dateToISO(dateInvestigate.value));
  //   }
  //   if (dateAllegation.value !== null) {
  //     formData.append("endDate", dateToISO(dateAllegation.value));
  //   }
  //   formData.append("file", files.value);
  //   showLoader();
  //   await http
  //     .put(config.API.editRoundInsignia(id), formData)
  //     .then(() => {
  //       success($q, "แก้ไขข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       hideLoader();
  //       clickBack();
  //     });
};

const clickBack = () => {
  router.push(`/discipline/disciplinary`);
};
</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="clickBack"
      />
      {{ edit ? "การสอบสวนความผิดทางวินัย" : "เพิ่มการสอบสวนความผิดทางวินัย" }}
    </div>
    <q-form ref="myForm">
      <div class="col-12">
        <q-card bordered>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12 row">
              <q-separator />
              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="Complaint"
                  label="เรื่องร้องเรียน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
                />
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateInvestigate"
                  :locale="'th'"
                  autoApply
                  class="col-xs-12 col-sm-4"
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="full-width datepicker"
                      :model-value="
                        dateInvestigate != null
                          ? date2Thai(dateInvestigate)
                          : null
                      "
                      :label="`${'วันที่สอบสวน'}`"
                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateAllegation"
                  class="col-xs-12 col-sm-4"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="col-xs-12 col-sm-4"
                      :model-value="
                        dateAllegation != null
                          ? date2Thai(dateAllegation)
                          : null
                      "
                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
                      :rules="[
                        (val) =>
                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateEvident"
                  :locale="'th'"
                  autoApply
                  class="col-xs-12 col-sm-4"
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="full-width datepicker"
                      :model-value="
                        dateEvident != null ? date2Thai(dateEvident) : null
                      "
                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
                      :rules="[
                        (val) =>
                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <div class="col-xs-12 col-sm-12 text-bold">
                  กรรมการ
                  <q-btn
                    size="12px"
                    flat
                    round
                    color="add"
                    @click="popup()"
                    icon="mdi-plus"
                  >
                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-xs-12 col-sm-12 q-pb-md">
                  <Table
                    style="max-height: 80vh"
                    :rows="rows"
                    :columns="columns"
                    :filter="filter"
                    :visible-columns="visibleColumns"
                    v-model:inputfilter="filter"
                    v-model:inputvisible="visibleColumns"
                    :pagination="initialPagination"
                    :nornmalData="true"
                    :paging="true"
                    :titleText="''"
                  >
                    <template #columns="props">
                      <q-tr :props="props" class="cursor-pointer">
                        <q-td
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <div v-if="col.name == 'no'" class="table_ellipsis2">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else class="table_ellipsis2">
                            {{ col.value }}
                          </div>
                        </q-td>
                        <q-td>
                          <q-btn
                            dense
                            size="12px"
                            flat
                            round
                            color="red"
                            @click="deleteData(props.row.id)"
                            icon="mdi-delete"
                          >
                            <q-tooltip>ลบข้อมูล</q-tooltip>
                          </q-btn>
                        </q-td>
                      </q-tr>
                    </template>
                  </Table>
                </div>

                <q-input
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="casefault"
                  label="กรณีมีความผิด"
                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                  lazy-rules
                />
                <q-input
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="whereInvestigate"
                  label="สอบสวนที่"
                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                  lazy-rules
                />
                <q-select
                  dense
                  class="col-xs-12 col-sm-3"
                  outlined
                  v-model="typefault"
                  :options="optionsTypefault"
                  label="ลักษณะความผิด"
                />
                <q-select
                  dense
                  class="col-xs-12 col-sm-3"
                  outlined
                  v-model="faultLevel"
                  :options="optionsfaultLevel"
                  label="ระดับโทษความผิด"
                />
                <q-input
                  class="col-xs-12 col-sm-6 q-pb-md"
                  dense
                  outlined
                  v-model="refRaw"
                  label="อ้างอิงมาตราตามกฎหมาย"
                  :rules="[
                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
                  ]"
                  lazy-rules
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="Complaint"
                  label="รายละเอียดเรื่องร้องเรียน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="trueDetail"
                  label="รายละเอียดสืบสวนข้อเท็จจริง"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="evidence"
                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesEvidence"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="recordAccuser"
                  label="บันทึกถ้อยคำของผู้กล่าวหา"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesRecordAccuser"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="witnesses"
                  label="พยานและการบันทึกถ้อยคำ"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesWitnesses"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="InvestResults"
                  label="ผลการสอบสวน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
                />
                <q-file
                  class="col-12"
                  outlined
                  dense
                  v-model="filesEtc"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
            </div>
          </div>
          <q-separator />
          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn
              flat
              round
              color="public"
              @click="checkSave"
              icon="mdi-content-save-outline"
            >
              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
            </q-btn>
          </div>
        </q-card>
      </div>
    </q-form>
  </div>
  <Dialogbody
    v-model:Modal="modal"
    :clickClose="clickClose"
    :rows2="rows2"
    v-model:filterKeyword2="filterKeyword2"
    v-model:type="type"
  />
  <!-- :fecthlistappointment="fecthlistappointment" -->
</template>
