<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, watch, reactive, computed } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import type {
  FormData,
  MyObjectInvestigateRef,
} from "@/modules/11_discipline/interface/request/investigateFact";

import config from "@/app.config";
import http from "@/plugins/http";

const $q = useQuasar();
const route = useRoute();
const modalPerson = ref<boolean>(false);
const toggleModal = () => (modalPerson.value = !modalPerson.value);
/**เรียกใช้ store */
const investigateFactStore = useInvestigateFactStore();
const mixin = useCounterMixin();
const { filterFnOptionsType } = investigateFactStore;
const {
  date2Thai,
  dialogConfirm,
  showLoader,
  hideLoader,
  success,
  messageError,
  dialogRemove,
} = mixin;
const investigateDis = useInvestigateDisStore();

// const complaintsOptions = ref<any>([]);
const isUpdate = ref<boolean>(false);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
/** ตัวแปร ref สำหรับแสดง validate */
const complaintRef = ref<Object | null>(null);
const complaintdetailRef = ref<Object | null>(null);
const investigationDescriptionRef = ref<Object | null>(null);
const faultRef = ref<Object | null>(null);
const investigationDetailOtherRef = ref<Object | null>(null);
const fileComplaintRef = ref<Object | null>(null);
const clickTimeRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const dateEndRef = ref<Object | null>(null);
const investigationDetailRef = ref<Object | null>(null);
const daysExtendRef = ref<Object | null>(null);
const investigationStatusResultRef = ref<Object | null>(null);
const investigationCauseTextRef = ref<Object | null>(null);
const resultRef = ref<Object | null>(null);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
  getData: {
    type: Function,
    default: () => "",
  },
});

const filter = ref<string>("");

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
  id: "",
  idComplaint: "",
  complaint: "",
  complaintdetail: "",
  investigationDescription: "",
  fault: "",
  investigationDetailOther: "",
  evidenceFiles: null,
  fileComplaint: null,
  clickTime: false,
  investigationDateStart: null,
  investigationDateEnd: null,
  investigationDetail: "",
  daysExtend: null,
  investigationStatusResult: "",
  investigationCauseText: "",
  complaintStatus: "",
  result: "",
  directors: [],
  disciplineInvestigateDocs: [],
  disciplineInvestigateRelevantDocs: [],
  status: "",
  documentFile: null,
  respondentType: "",
  organizationId: "",
  persons: [],
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectInvestigate: MyObjectInvestigateRef = {
  complaint: complaintRef,
  complaintdetail: complaintdetailRef,
  investigationDescription: investigationDescriptionRef,
  fault: faultRef,
  investigationDetailOther: investigationDetailOtherRef,
  fileComplaint: fileComplaintRef,
  date: dateRef,
  dateEnd: dateEndRef,
  investigationDetail: investigationDetailRef,
  daysExtend: daysExtendRef,
  investigationStatusResult: investigationStatusResultRef,
  investigationCauseText: investigationCauseTextRef,
  result: resultRef,
};

const rows = ref([]);
const statusStep = computed(() => {
  return route.name === "/discipline-disciplinaryEdit" ? true : false;
});
const initialPagination = ref<any>({
  rowsPerPage: 0,
});

/** หัวตาราง */
const columnsPerson = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "idcard",
    align: "left",
    label: "เลขบัตรประชาชน",
    sortable: true,
    field: "idcard",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ - นามสกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "salary",
    align: "left",
    label: "เงินเดือน",
    sortable: true,
    field: "salary",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organization",
    align: "left",
    label: "หน่วยงาน",
    sortable: true,
    field: "organization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** หัวข้อที่เเสดงในตาราง */
const visibleColumnsPerson = ref<string[]>([
  "no",
  "idcard",
  "name",
  "posNo",
  "position",
  "positionLevel",
  "salary",
  "organization",
]);
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectInvestigate) {
    if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
      const property = objectInvestigate[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }

  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
    console.log("ไม่ผ่าน ");
    console.log(hasError);
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      if (investigateFactStore.rowsAdd) {
        formData.persons = investigateFactStore.rowsAdd;
        props.onSubmit(formData);
      } else props.onSubmit(formData);
      // props.onSubmit(formData);
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

/**
 * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสืบสวน
 * @param val จำนวนวันที่ต้องการขยาย
 */
function calEndDate(val: string) {
  const date = new Date(props.data.investigationDateEnd);
  const dateNew = new Date();
  formData.investigationDateEnd = new Date(
    dateNew.setDate(date.getDate() + Number(val))
  );
}

const modal = ref<boolean>(false);
const filterKeyword2 = ref<string>("");
const type = ref<string>("");
/** เปิด dialog */
function onClickOpenPopup() {
  modal.value = true;
  filterKeyword2.value = "";
}
/** ฟังชั่นปิด dialog */
function clickClose() {
  modal.value = false;
}

/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(props.data, async () => {
  if (props.data !== null) {
    isUpdate.value = true;
    formData.id = props.data.id;
    formData.complaint = props.data.complaint;
    formData.respondentType = props.data.respondentType;
    formData.complaintdetail = props.data.complaintdetail;
    formData.investigationDescription = props.data.investigationDescription;
    formData.fault = props.data.fault;
    formData.investigationDetailOther = props.data.investigationDetailOther;
    formData.fileComplaint = props.data.fileComplaint;
    formData.clickTime = props.data.clickTime;
    formData.investigationDateStart = props.data.investigationDateStart;
    formData.investigationDateEnd = props.data.investigationDateEnd;
    formData.investigationDetail = props.data.investigationDetail;
    formData.daysExtend = props.data.daysExtend;
    formData.investigationStatusResult = props.data.investigationStatusResult;
    formData.investigationCauseText = props.data.investigationCauseText;
    formData.result = props.data.result;
    formData.disciplineInvestigateDocs = props.data.disciplineInvestigateDocs;
    formData.disciplineInvestigateRelevantDocs =
      props.data.disciplineInvestigateRelevantDocs;
    formData.status = props.data.status;

    investigateFactStore.rowsAdd = props.data.persons;

    const dataMap = props.data.directors.map((item: any) => ({
      id: item.id,
      name: `${item.prefix}${item.firstName} ${item.lastName}`,
      prefix: item.prefix,
      firstName: item.firstName,
      lastName: item.lastName,
      position: item.position,
      email: item.email,
      phone: item.phone,
    }));
    rows.value = dataMap;
  }
});

function uploadFileRelevant() {
  const Data = new FormData();
  Data.append("file", formData.evidenceFiles);
  showLoader();
  http
    .put(config.API.investigateRelevantUploadFile(formData.id), Data)
    .then((res) => {
      console.log(res);
      success($q, "อัปโหลดไฟล์สำเร็จ");
      props.getData();
      // router.push(`/discipline/complaints`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      formData.evidenceFiles = null;
    });
}

function uploadFile() {
  const Data = new FormData();
  Data.append("file", formData.documentFile);
  showLoader();
  http
    .put(config.API.investigateUploadFile(formData.id), Data)
    .then((res) => {
      console.log(res);
      success($q, "อัปโหลดไฟล์สำเร็จ");
      props.getData();
      // router.push(`/discipline/complaints`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      formData.documentFile = null;
    });
}

/**
 * เปิดลิงค์ไฟล์
 * @param link รับมาเป็น https ลิงค์
 */
function downloadFile(link: string) {
  window.open(link, "_blank");
}

/**
 * เปิดลิงค์ไฟล์
 * @param link รับมาเป็น https ลิงค์
 */
function downloadFileRelevant(link: string) {
  window.open(link, "_blank");
}

/**
 * ลบไฟล์
 * @param id id file
 */
function deleteFileRelevant(id: string) {
  dialogRemove($q, () => confirmDeleteRelevant(id));
}

/**
 * ยืนยัน ลบ ไฟล์
 * @param id id file
 */
function confirmDeleteRelevant(id: string) {
  showLoader();
  http
    .delete(config.API.investigateRelevantFileDelete(formData.id, id))
    .then((res) => {
      success($q, `ลบไฟล์สำเร็จ`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      props.getData();
    });
}

/**
 * ลบไฟล์
 * @param id id file
 */
function deleteFile(id: string) {
  dialogRemove($q, () => confirmDelete(id));
}

/**
 * ยืนยัน ลบ ไฟล์
 * @param id id file
 */
function confirmDelete(id: string) {
  showLoader();
  http
    .delete(config.API.investigateFileDelete(formData.id, id))
    .then((res) => {
      success($q, `ลบไฟล์สำเร็จ`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      props.getData();
    });
}
async function addPerson(data: any) {
  await investigateFactStore.fetchInvestigateAdd(data);
  toggleModal();
}

/**
 * ฟังชั่น รับค่าจาก คอมโพเเนน
 * @param returnData ค่าที่ได้คืนมา
 */
function handleSave(returnData: any) {
  addPerson(returnData);
  toggleModal();
}

function getOc() {
  http.get(config.API.typeOc()).then((res) => {
    const data = res.data.result;
    investigateFactStore.ocListFn(data);
  });
}

async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
  rowsPerPage.value = rowPerpage;
  page.value = pageCurrent;
  await getList();
}

async function getList() {
  showLoader();
  await http
    .get(
      config.API.directorList(
        page.value,
        rowsPerPage.value,
        filterKeyword.value
      )
    )
    //
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
      const data = res.data.result.data;
      investigateDis.fecthDirector(data);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function returnDirector(data: any) {
  clickClose();
  const dataList = data.map((item: any) => item.id);
  console.log(data);
  formData.directors = dataList;
  rows.value = data;
}

function deletePerson(id: string) {
  dialogRemove($q, () => remove(id));
}

function remove(id: string) {
  const dataRow = investigateFactStore.rowsAdd;
  const updatedRows = dataRow.filter((item: any) => item.id !== id);
  investigateFactStore.rowsAdd = updatedRows;
}

function deleteDirector(id: string) {
  dialogRemove($q, () => removePerson(id));
}

function removePerson(id: string) {
  const dataRow = rows.value;
  const updatedRows = dataRow.filter((item: any) => item.id !== id);
  rows.value = updatedRows;
}
onMounted(async () => {
  console.log(route.name);
  getOc();
  investigateFactStore.columnsPerson = columnsPerson.value;
  investigateFactStore.visibleColumnsPerson = visibleColumnsPerson.value;
});
</script>
<template>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-9">
      <q-card flat bordered class="q-mb-md">
        <form @submit.prevent="validateForm">
          <div class="q-pa-md q-col-gutter-md">
            <div class="col-xs-12 row items-start q-col-gutter-md">
              <!-- <div class="col-6">
            <q-select
              for="#fault"
              outlined
              dense
              ref="complaintRef"
              v-model="formData.complaint"
              :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
              :options="complaintsOptions"
              label="เรื่องร้องเรียน"
              emit-value
              map-options
              hide-bottom-space
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div> -->

              <!-- <div class="col-3">
            <q-select
              for="#fault"
              outlined
              dense
              ref="faultRef"
              v-model="formData.fault"
              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
              :options="investigateFactStore.faultOp"
              label="ลักษณะความผิด"
              emit-value
              hide-bottom-space
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div> -->
              <div class="col-xs-12 col-sm-3">
                <q-select
                  for="SelectrespondentType"
                  v-model="formData.respondentType"
                  ref="respondentTypeRef"
                  dense
                  outlined
                  :readonly="formData.status !== 'NEW'"
                  label="ผู้ถูกร้องเรียน"
                  option-value="id"
                  option-label="name"
                  emit-value
                  use-input
                  map-options
                  hide-bottom-space
                  :options="investigateFactStore.respondentTypeOps"
                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                  lazy-rules
                  @filter="(inputValue: any,
                doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
                )"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-grey">
                        ไม่มีข้อมูล
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>

              <div
                class="col-xs-12 col-sm-3"
                v-if="formData.respondentType === 'ORGANIZATION'"
                id="organizationId"
              >
                <q-select
                  for="inputOffice"
                  name="organizationId"
                  ref="organizationIdRef"
                  dense
                  hide-bottom-space
                  :readonly="formData.status !== 'NEW'"
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.organizationId"
                  :options="investigateFactStore.organizationIdOp"
                  label="เลือกสำนักงาน"
                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                  lazy-rules
                />
              </div>

              <div
                class="row col-12"
                v-if="formData.respondentType === 'PERSON'"
              >
                <q-card
                  bordered
                  class="row col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ผู้ถูกร้องเรียน
                    <q-btn
                      v-if="formData.status === 'NEW'"
                      size="12px"
                      flat
                      round
                      dense
                      color="add"
                      class="q-ml-sm"
                      @click="toggleModal"
                      icon="mdi-plus"
                    >
                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
                    </q-btn>
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-xs-12 q-pa-sm">
                    <d-table
                      ref="table"
                      :columns="investigateFactStore.columnsPerson"
                      :rows="investigateFactStore.rowsAdd"
                      row-key="idcard"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="
                        investigateFactStore.visibleColumnsPerson
                      "
                    >
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            style="color: #000000; font-weight: 500"
                          >
                            <span class="text-weight-medium">{{
                              col.label
                            }}</span>
                          </q-th>
                          <q-th auto-width></q-th>
                        </q-tr>
                      </template>
                      <template v-slot:body="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'">
                              {{ props.rowIndex + 1 }}
                            </div>
                            <div>
                              {{ col.value }}
                            </div>
                          </q-td>
                          <!-- v-if="formData.status === 'NEW'" -->
                          <q-td auto-width>
                            <q-btn
                              v-if="formData.status === 'NEW'"
                              size="12px"
                              flat
                              round
                              dense
                              color="red"
                              class="q-ml-sm"
                              icon="mdi-delete-outline"
                              @click="deletePerson(props.row.id)"
                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
                            >
                          </q-td>
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </q-card>
              </div>
              <div class="col-xs-12 col-sm-3">
                <q-select
                  :readonly="formData.status !== 'NEW'"
                  for="#investigationDetail"
                  outlined
                  hide-bottom-space
                  dense
                  lazy-rules
                  ref="investigationDetailRef"
                  :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
                  v-model="formData.investigationDetail"
                  :options="investigateFactStore.investigationDetailOp"
                  label="ลักษณะการสืบสวน"
                  emit-value
                  map-options
                  option-label="name"
                  option-value="id"
                  use-input
                  @filter="(inputValue: any,
        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
        )"
                  ><template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-grey">
                        ไม่มีข้อมูล
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
            </div>
            <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
              <q-input
                for="#investigationDetailOther"
                class="full-width cursor-pointer"
                outlined
                ref="investigationDetailOtherRef"
                dense
                borderless
                v-model="formData.investigationDetailOther"
                hide-bottom-space
                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
                type="textarea"
                :rules="[
                  (val) =>
                    formData.investigationDetail === 'OTHER'
                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                      : true,
                ]"
              />
            </div>

            <div class="row">
              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
                  วันที่สืบสวน
                  <q-checkbox
                    v-if="
                      props.data.investigationDateStart != null &&
                      props.data.investigationDateEnd != null
                    "
                    for="#clickTime"
                    size="md"
                    v-model="formData.clickTime"
                    label="ขยายเวลา"
                    color="primary"
                    dense
                    class="text-weight-medium q-ml-sm"
                    keep-color
                  />
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="q-pa-sm">
                  <div class="q-col-gutter-sm row">
                    <div class="col-3" v-if="!formData.clickTime">
                      <datepicker
                        menu-class-name="modalfix"
                        :readonly="isUpdate && statusStep"
                        v-model="formData.investigationDateStart"
                        :locale="'th'"
                        autoApply
                        :enableTimePicker="false"
                        week-start="0"
                      >
                        <template #year="{ year }">{{ year + 543 }}</template>
                        <template #year-overlay-value="{ value }">{{
                          parseInt(value + 543)
                        }}</template>
                        <template #trigger>
                          <q-input
                            for="#date"
                            class="full-width cursor-pointer"
                            ref="dateRef"
                            :readonly="statusStep && isUpdate"
                            outlined
                            dense
                            lazy-rules
                            borderless
                            hide-bottom-space
                            :model-value="
                              formData.investigationDateStart
                                ? date2Thai(formData.investigationDateStart)
                                : null
                            "
                            :rules="[
                              (val) =>
                                !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
                            ]"
                            :label="`${'วันที่เริ่มการสืบสวน'}`"
                          >
                            <template v-slot:prepend>
                              <q-icon
                                name="event"
                                class="cursor-pointer"
                                color="primary"
                              >
                              </q-icon>
                            </template>
                          </q-input>
                        </template>
                      </datepicker>
                    </div>

                    <div class="col-3" v-if="formData.clickTime">
                      <q-select
                        for="#daysExtend"
                        outlined
                        dense
                        lazy-rules
                        ref="daysExtendRef"
                        v-model="formData.daysExtend"
                        :options="investigateFactStore.daysExtendOp"
                        label="จำนวนวันที่ต้องการขยาย"
                        emit-value
                        hide-bottom-space
                        map-options
                        :rules="[
                          (val) =>
                            formData.clickTime
                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                              : true,
                        ]"
                        option-label="name"
                        option-value="id"
                        use-input
                        @update:model-value="calEndDate"
                        ><template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-grey">
                              ไม่มีข้อมูล
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>

                    <div class="col-3">
                      <datepicker
                        menu-class-name="modalfix"
                        v-model="formData.investigationDateEnd"
                        :readonly="statusStep && isUpdate"
                        :locale="'th'"
                        autoApply
                        :enableTimePicker="false"
                        week-start="0"
                      >
                        <template #year="{ year }">{{ year + 543 }}</template>
                        <template #year-overlay-value="{ value }">{{
                          parseInt(value + 543)
                        }}</template>
                        <template #trigger>
                          <q-input
                            for="#dateEnd"
                            ref="dateEndRef"
                            class="full-width cursor-pointer"
                            :readonly="statusStep && isUpdate"
                            outlined
                            dense
                            lazy-rules
                            hide-bottom-space
                            borderless
                            :model-value="
                              formData.investigationDateEnd
                                ? date2Thai(formData.investigationDateEnd)
                                : null
                            "
                            :rules="[
                              (val) =>
                                !!val ||
                                `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
                            ]"
                            :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
                          >
                            <template v-slot:prepend>
                              <q-icon
                                name="event"
                                class="cursor-pointer"
                                color="primary"
                              >
                              </q-icon>
                            </template>
                          </q-input>
                        </template>
                      </datepicker>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="row col-12">
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  กรรมการ
                  <q-btn
                    size="12px"
                    flat
                    round
                    dense
                    color="add"
                    class="q-ml-sm"
                    icon="mdi-plus"
                    @click="onClickOpenPopup"
                  >
                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="col-xs-12 q-pa-sm row">
                  <Table
                    class="col-12"
                    style="max-height: 80vh"
                    :rows="rows"
                    :columns="investigateDis.columnsDirector"
                    :filter="filter"
                    :visible-columns="investigateDis.visibleColumnsDirector"
                    v-model:inputfilter="filter"
                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
                    :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"
                            icon="mdi-delete-outline"
                            @click="deleteDirector(props.row.id)"
                          >
                            <q-tooltip>ลบข้อมูล</q-tooltip>
                          </q-btn>
                        </q-td>
                      </q-tr>
                    </template>
                  </Table>
                </div>
              </q-card>
            </div>

            <!-- <div class="col-12">
          <q-input
            for="#complaintdetail"
            class="full-width cursor-pointer"
            outlined
            ref="complaintdetailRef"
            dense
            lazy-rules
            borderless
            v-model="formData.complaintdetail"
            :rules="[
              (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
            ]"
            hide-bottom-space
            :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
            type="textarea"
          />
        </div> -->

            <!-- <div class="col-12">
          <q-file
            for="#fileComplaint"
            outlined
            ref="fileComplaintRef"
            dense
            v-model="formData.fileComplaint"
            label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
            lazy-rules
            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
            hide-bottom-space
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" color="primary" />
            </template>
          </q-file>
        </div> -->

            <div class="col-12">
              <q-input
                for="#investigationDescription"
                class="full-width cursor-pointer"
                outlined
                ref="investigationDescriptionRef"
                dense
                lazy-rules
                borderless
                v-model="formData.investigationDescription"
                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                hide-bottom-space
                :label="`${'รายละเอียด'}`"
                type="textarea"
              />
            </div>

            <div class="row col-12">
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  ผลการสืบสวน
                </div>

                <div class="col-12"><q-separator /></div>

                <div class="col-xs-12 q-pa-sm row">
                  <div class="row col-12 q-col-gutter-md">
                    <div class="col-3">
                      <q-select
                        for="#fault"
                        outlined
                        dense
                        :readonly="statusStep"
                        lazy-rules
                        ref="investigationStatusResultRef"
                        v-model="formData.investigationStatusResult"
                        :rules="[
                          (val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
                        ]"
                        :options="
                          investigateFactStore.investigationStatusResultOptions
                        "
                        label="ผลการสืบสวน"
                        emit-value
                        map-options
                        option-label="name"
                        option-value="id"
                        use-input
                        @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
                        ><template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-grey">
                              ไม่มีข้อมูล
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>

                    <div
                      v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
                      class="col-3"
                    >
                      <q-select
                        for="#fault"
                        outlined
                        dense
                        ref="investigationCauseTextRef"
                        v-model="formData.investigationCauseText"
                        :rules="[
                          (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
                        ]"
                        :options="
                          investigateFactStore.investigationCauseTextOptions
                        "
                        label="ร้ายแรง/ไม่ร้ายแรง"
                        emit-value
                        map-options
                        option-label="name"
                        option-value="id"
                        use-input
                        ><template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-grey">
                              ไม่มีข้อมูล
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>
                  </div>

                  <div class="row col-12">
                    <q-input
                      class="full-width cursor-pointer"
                      outlined
                      ref="resultRef"
                      dense
                      lazy-rules
                      borderless
                      v-model="formData.result"
                      :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                      hide-bottom-space
                      :label="`${'เหตุผล'}`"
                      type="textarea"
                    />
                  </div>
                </div>
              </q-card>
            </div>
          </div>

          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
              ><q-tooltip>บันทึก</q-tooltip></q-btn
            >
          </div>
        </form>
      </q-card>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3">
      <q-card flat bordered class="q-pa-md q-mb-sm">
        <div class="col-xs-12 q-mb-sm">
          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
              อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
            </div>
            <div class="col-12"><q-separator /></div>
            <q-file
              class="col-10 q-pa-sm"
              for="#evidenceFiles"
              outlined
              dense
              v-model="formData.evidenceFiles"
              label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
            <div class="col-2 self-center">
              <q-btn
                v-if="formData.evidenceFiles"
                size="14px"
                flat
                round
                dense
                color="add"
                class="q-ml-sm"
                icon="mdi-upload"
                @click="uploadFileRelevant"
                ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
              >
            </div>
            <div
              class="col-12"
              v-if="
                formData.disciplineInvestigateRelevantDocs &&
                formData.disciplineInvestigateRelevantDocs.length === 0
              "
            >
              <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
            </div>
            <q-list separator class="full-width q-mt-md" v-if="props.data.disciplineInvestigateRelevantDocs.length >0">
              <q-item
                clickable
                v-ripple
                v-for="(file, index) in props.data
                  .disciplineInvestigateRelevantDocs"
                :key="index"
              >
                <q-item-section>{{ file.fileName }}</q-item-section>
                <q-item-section avatar>
                  <div class="row">
                    <div>
                      <q-btn
                        dense
                        flat
                        round
                        size="12px"
                        color="blue"
                        icon="mdi-download-outline"
                        @click="downloadFileRelevant(file.pathName)"
                      >
                        <q-tooltip>ดาวน์โหลด</q-tooltip>
                      </q-btn>
                    </div>
                    <div>
                      <q-btn
                        dense
                        flat
                        round
                        size="12px"
                        color="red"
                        icon="mdi-delete-outline"
                        @click="deleteFileRelevant(file.id)"
                        ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
        <div class="col-xs-12">
            <q-card
              bordered
              class="row col-12"
              style="border: 1px solid #d6dee1"
            >
              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                อัปโหลดไฟล์เอกสารหลักฐาน
              </div>
              <div class="col-12"><q-separator /></div>  
                <q-file
                  v-if="formData.status === 'NEW'"
                  class="col-10 q-pa-sm"
                  for="#documentFile"
                  outlined
                  dense
                  v-model="formData.documentFile"
                  label="ไฟล์เอกสารหลักฐาน"
                  hide-bottom-space
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" color="primary" />
                  </template>
                </q-file>
                
                <div class="col-2 self-center">
                  <q-btn
                    v-if="formData.documentFile"
                    size="14px"
                    flat
                    round
                    dense
                    color="add"
                    icon="mdi-upload"
                    @click="uploadFile"
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </div>
                <div
                  v-if="formData.disciplineInvestigateDocs.length === 0"
                  class="col-12"
                >
                  <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
                </div>

              <div class="col-xs-12 q-pa-sm row" v-if="props.data.disciplineInvestigateDocs.length >0">
                <q-list separator class="full-width">
                  <q-item
                    clickable
                    v-ripple
                    v-for="file in props.data.disciplineInvestigateDocs"
                    :key="file.id"
                  >
                    <q-item-section>{{ file.fileName }}</q-item-section>
                    <q-item-section avatar>
                      <div class="row">
                        <div>
                          <q-btn
                            dense
                            flat
                            round
                            size="12px"
                            color="blue"
                            icon="mdi-download-outline"
                            @click="downloadFile(file.pathName)"
                          >
                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
                          </q-btn>
                        </div>
                        <div>
                          <q-btn
                            v-if="formData.status === 'NEW'"
                            dense
                            flat
                            round
                            size="12px"
                            color="red"
                            icon="mdi-delete-outline"
                            @click="deleteFile(file.id)"
                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                          >
                        </div>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>
            </q-card>
      
        </div>
      </q-card>
    </div>
  </div>

  <DialogAddPersonal
    title="ผู้ถูกร้องเรียน"
    :checkId="investigateFactStore.rowsAdd"
    :modal="modalPerson"
    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
    :close="toggleModal"
    :save="addPerson"
    @returnData="handleSave"
  />

  <Dialogbody
    :get-list="getList"
    v-model:Modal="modal"
    :clickClose="clickClose"
    :rows2="investigateDis.rows2"
    v-model:filterKeyword2="filterKeyword2"
    v-model:type="type"
    :filterTable="filterTable"
    :rowsPerPage="rowsPerPage"
    :page="page"
    :maxPage="maxPage"
    @update:pagination="updatePagingProp"
    @returnDirector="returnDirector"
  />
</template>
