<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

/**import type*/
import type { QTableProps } from "quasar";
import type {
  FormData,
  DisciplinaryRef,
  Persons,
  Director,
} from "@/modules/11_discipline/interface/request/disciplinary";
import type {
  DataOption,
  FileLists,
  responseType,
  directorType,
} from "@/modules/11_discipline/interface/index/Main";
import type { DataOptionRes } from "@/modules/11_discipline/interface/response/Main";

/** import components*/
import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";

/** import store*/
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

const complainstStore = useComplainstDataStore();
const investigateDis = useInvestigateDisStore();
const { filterSelector } = complainstStore; // function จาก store complainstStore
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader, dialogConfirm, messageError } =
  mixin;

const route = useRoute();
const $q = useQuasar();

const id = ref<string>(route.params.id as string);
const type = ref<string>("");
const modal = ref<boolean>(false);
const rows = ref<Director[]>([]);
const modalPerson = ref<boolean>(false);
/**  search data table*/
const filter = ref<string>("");

function toggleModal() {
  modalPerson.value = !modalPerson.value;
}

/** หัวตาราง */
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",
  },
]);

/** formData*/
const formData = reactive<FormData>({
  respondentType: "",
  organizationId: "",
  consideredAgency: "",
  disciplinaryDateAllegation: null, //*วันที่รับทราบข้อกล่าวหา
  disciplinaryDateEvident: null, //*วันที่สรุปพยานหลักฐาน
  disciplinaryCaseFault: "", // กรณีความผิด
  disciplinaryInvestigateAt: "", // สอบสวนที่
  disciplinaryFaultLevel: "", // ระดับโทษความผิด
  disciplinaryRefLaw: "", // อ้างอิงมาตราตามกฎหมาย
  disciplinarySummaryEvidence: "", // สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา
  disciplinaryRecordAccuser: "", // บันทึกถ้อยคำของผู้กล่าวหา
  disciplinaryWitnesses: "", // พยานและบันทึกถ้อยคำพยาน
  result: "", // ผลการสอบสวน
  directors: [],
  persons: [],
  // detailComplaint: "",
  // whereInvestigate: "",
  // trueDetail: "",
  // evidence: "",
  // recordAccuser: "",
  // witnesses: "",
  // InvestResults: "",
  // complaintStatus: "",
  // filesEvidence: null,
  // filesRecordAccuser: null,
  // filesWitnesses: null,
  // filesEtc: null,
  // organizationId: "",
  // consideredAgency: "",
});
const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
const disciplineDisciplinary_DocRecordAccusers = ref<FileLists[]>([]);
const disciplineDisciplinary_DocWitnessess = ref<FileLists[]>([]);
const disciplineDisciplinary_DocOthers = ref<FileLists[]>([]);

/** ตัวแปร ref สำหรับแสดง validate */
const respondentTypeRef = ref<Object | null>(null);
const organizationIdRef = ref<Object | null>(null);
const consideredAgencyRef = ref<Object | null>(null);
const disciplinaryDateAllegationRef = ref<Object | null>(null);
const disciplinaryDateEvidentRef = ref<Object | null>(null);
const disciplinaryCaseFaultRef = ref<Object | null>(null);
const disciplinaryInvestigateAtRef = ref<Object | null>(null);
const disciplinaryFaultLevelRef = ref<Object | null>(null);
const disciplinaryRefLawRef = ref<Object | null>(null);
const disciplinarySummaryEvidenceRef = ref<Object | null>(null);
const disciplinaryRecordAccuserRef = ref<Object | null>(null);
const disciplinaryWitnessesRef = ref<Object | null>(null);
const resultRef = ref<Object | null>(null);

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: DisciplinaryRef = {
  respondentType: respondentTypeRef,
  organizationId: organizationIdRef,
  consideredAgency: consideredAgencyRef,
  disciplinaryDateAllegation: disciplinaryDateAllegationRef,
  disciplinaryDateEvident: disciplinaryDateEvidentRef,
  disciplinaryCaseFault: disciplinaryCaseFaultRef,
  disciplinaryInvestigateAt: disciplinaryInvestigateAtRef,
  disciplinaryFaultLevel: disciplinaryFaultLevelRef,
  disciplinaryRefLaw: disciplinaryRefLawRef,
  disciplinarySummaryEvidence: disciplinarySummaryEvidenceRef,
  disciplinaryRecordAccuser: disciplinaryRecordAccuserRef,
  disciplinaryWitnesses: disciplinaryWitnessesRef,
  result: resultRef,
};

const initialPagination = ref<any>({
  rowsPerPage: 0,
});

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

/** เปิด dialog */
function popup() {
  modal.value = true;
  filterKeyword2.value = "";
}

/** ฟังชั่นปิด dialog */
function clickClose() {
  modal.value = false;
}

/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function validateForm() {
  const hasError = [];
  for (const key in objectdisciplinary) {
    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
      const property = objectdisciplinary[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("ไม่ผ่าน ");
  }
}

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

/** ฟังชั่น delect */
async function deleteData(id: string) {
  console.log("delete");
}

/** เรียกข้อมูลรายละเอียด*/
async function fetchDatadetail() {
  if (props.data) {
    formData.respondentType = props.data.respondentType;
    formData.organizationId = props.data.organizationId;
    formData.consideredAgency = props.data.consideredAgency;
    formData.disciplinaryDateAllegation = props.data.disciplinaryDateAllegation;
    formData.disciplinaryDateEvident = props.data.disciplinaryDateEvident;
    formData.disciplinaryCaseFault = props.data.disciplinaryCaseFault;
    formData.disciplinaryInvestigateAt = props.data.disciplinaryInvestigateAt;
    formData.disciplinaryFaultLevel = props.data.disciplinaryFaultLevel;
    formData.disciplinaryRefLaw = props.data.disciplinaryRefLaw;
    formData.disciplinarySummaryEvidence =
      props.data.disciplinarySummaryEvidence;
    formData.disciplinaryRecordAccuser = props.data.disciplinaryRecordAccuser;
    formData.disciplinaryWitnesses = props.data.disciplinaryWitnesses;
    formData.result = props.data.result;
    formData.directors = props.data.director ?? [];
    formData.persons = props.data.persons ?? [];
    disciplineDisciplinary_DocSummaryEvidences.value =
      props.data.disciplineDisciplinary_DocSummaryEvidences;
    disciplineDisciplinary_DocRecordAccusers.value =
      props.data.disciplineDisciplinary_DocRecordAccusers;
    disciplineDisciplinary_DocWitnessess.value =
      props.data.disciplineDisciplinary_DocWitnessess;
    disciplineDisciplinary_DocOthers.value =
      props.data.disciplineDisciplinary_DocOthers;

    /** MAP รายชื่อกรรมการ หน้าหลัก */
    let datalistDirector: responseType[] = formData.directors.map(
      (e: directorType) => ({
        id: e.id,
        directorId: e.directorId,
        name: `${e.prefix}${e.firstName} ${e.lastName}`,
        prefix: e.prefix,
        firstName: e.firstName,
        lastName: e.lastName,
        position: e.position ? e.position : "-",
        email: e.email ? e.email : "-",
        phone: e.phone ? e.phone : "-",
        total: e.total ?? "-",
        duty: e.duty ? e.duty : "-",
      })
    );
    rows.value = datalistDirector;
  }
}

/**
 * function add ผู้ถูกร้องเรียนใน table
 * @param data รายชื่อ ผู้ถูกร้องเรียน
 */
async function addPerson(data: Persons[]) {
  if (!data) {
    return;
  }
  const newPerson: Persons[] = Array.from(data).map((e) => ({
    personId: e.personId, //id อ้างอิง profile
    idcard: e.idcard, //รหัสบัตรประชาชน
    prefix: e.prefix, //คำนำหน้า
    firstName: e.firstName, //ชื่อ
    lastName: e.lastName, //นามสกุล
    posNo: e.posNo, //เลขที่ตำแหน่ง
    position: e.position, //ตำแหน่ง
    positionLevel: e.positionLevel, //ระดับ
    salary: e.salary, //เงินเดือน
    organization: e.organization, //สังกัด
    name: `${e.prefix}${e.firstName}  ${e.lastName}`,
  }));
  const mergedArray = [...formData.persons, ...newPerson];
  formData.persons = mergedArray;
  toggleModal();
}

/** function รับข้อมูลรายชื่อผู้ถูกร้องเรียน*/
function handleSave(returnData: any) {
  addPerson(returnData);
}

/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(
  () => props.data,
  async () => {
    await fetchDatadetail();
  }
);

const organizationOption = ref<DataOption[]>([]);
/** function เรียกรายชื่อหน่วยงาน*/
async function fetchOrganization() {
  await http
    .get(config.API.typeOc())
    .then((res) => {
      const data = res.data.result;
      organizationOption.value = data.map((e: DataOptionRes) => ({
        id: e.organizationId,
        name: e.organizationName,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** query string*/
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const maxPage = ref<number>(1);
const filterKeyword2 = ref<string>("");
const listDirector = ref<any>([]);
/** function เรียกรายชื่อกรรมการ*/
async function fetchDListDirector() {
  showLoader();
  await http
    .get(
      config.API.disciplineDirector() +
        `?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filterKeyword2.value}`
    )
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
      const data = res.data.result.data;
      let datalistDirector: responseType[] = data.map((e: directorType) => ({
        id: e.id,
        directorId: e.directorId,
        name: `${e.prefix}${e.firstName} ${e.lastName}`,
        prefix: e.prefix,
        firstName: e.firstName,
        lastName: e.lastName,
        position: e.position,
        email: e.email,
        phone: e.phone,
        total: e.total,
        duty: e.duty,
      }));

      /** หารานชื่อกรรมการที่ไม่ซ้ำ*/
      listDirector.value = datalistDirector.filter(
        (i) => !rows.value.some((e) => e.directorId === i.id)
      );
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function อัดเดท Paging กรรมการ
 * @param rpp ต่อหน้า
 * @param p หน้า
 */
async function updatePaging(rpp: number, p: number) {
  page.value = p;
  rowsPerPage.value = rpp;
}

/**
 * function return รายชื่อกรรมการที่เลือก
 * @param data รายชื่อกรรมการที่เลือก
 */
async function returnDirector(data: any) {
  const dataList = data.map((item: any) => item.id);
  formData.directors = dataList;
  rows.value = data;
  clickClose();
}

async function selectComplainant(val: string) {
  formData.organizationId = "";
  formData.consideredAgency = "";
  // if (val === "0") {
  //   await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
  // } else if (val === "1") {
  //   await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
  // }
}

/** Hook */
onMounted(async () => {
  await fetchOrganization();
});
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <form @submit.prevent="validateForm">
      <div class="col-12">
        <q-card>
          <div class="col-12 row q-pa-md">
            <div class="col-12 row q-col-gutter-md">
              <div class="col-xs-12 col-sm-3">
                <q-select
                  for="SelectrespondentType"
                  v-model="formData.respondentType"
                  ref="respondentTypeRef"
                  dense
                  outlined
                  label="ผู้ถูกร้องเรียน"
                  option-value="id"
                  option-label="name"
                  emit-value
                  use-input
                  map-options
                  hide-bottom-space
                  :options="complainstStore.complainantoptions"
                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                  lazy-rules
                  @update:model-value="
                    selectComplainant(formData.respondentType)
                  "
                  @filter="(inputValue: any,
                doneFn: Function) => 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
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.organizationId"
                  :options="organizationOption"
                  label="เลือกสำนักงาน"
                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                  lazy-rules
                />
              </div>
              <div class="col-xs-12 col-sm-3" id="consideredAgency">
                <!-- <q-select
                  ref="consideredAgencyRef"
                  for="selectAgency"
                  dense
                  outlined
                  v-model="formData.consideredAgency"
                  :options="organizationOption"
                  label="หน่วยงานที่พิจารณา"
                  option-value="id"
                  option-label="name"
                  hide-bottom-space
                  emit-value
                  map-options
                  :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
                  lazy-rules
                  use-input
                  @filter="(inputValue: any,
                  doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
                  )"
                >
                  <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.respondentType !== 'ORGANIZATION'"
                class="col-6"
              ></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
                      size="12px"
                      flat
                      round
                      dense
                      color="add"
                      class="q-ml-sm"
                      icon="mdi-plus"
                      @click="toggleModal"
                    >
                      <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="columnsPerson"
                      :rows="formData.persons"
                      row-key="personId"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                    >
                      <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-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>
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </q-card>
              </div>

              <datepicker
                menu-class-name="modalfix"
                for="#dateAllegation"
                v-model="formData.disciplinaryDateAllegation"
                class="col-xs-12 col-sm-6"
                :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
                    ref="disciplinaryDateAllegationRef"
                    outlined
                    dense
                    class="col-xs-12 col-sm-4"
                    hide-bottom-space
                    :model-value="
                      formData.disciplinaryDateAllegation != null
                        ? date2Thai(formData.disciplinaryDateAllegation)
                        : null
                    "
                    :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
                    :rules="[
                      (val) =>
                        !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
                    ]"
                    lazy-rules
                  >
                    <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"
                for="#dateEvident"
                v-model="formData.disciplinaryDateEvident"
                :locale="'th'"
                autoApply
                class="col-xs-12 col-sm-6"
                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
                    ref="disciplinaryDateEvidentRef"
                    outlined
                    dense
                    class="full-width datepicker"
                    hide-bottom-space
                    :model-value="
                      formData.disciplinaryDateEvident != null
                        ? date2Thai(formData.disciplinaryDateEvident)
                        : null
                    "
                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
                    ]"
                    lazy-rules
                  >
                    <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="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"
                      @click="popup()"
                      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 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"
                              @click="deleteData(props.row.id)"
                              icon="mdi-delete"
                            >
                              <q-tooltip>ลบข้อมูล</q-tooltip>
                            </q-btn>
                          </q-td>
                        </q-tr>
                      </template>
                    </Table>
                  </div>
                </q-card>
              </div>
              <q-input
                class="col-xs-12 col-sm-3"
                dense
                outlined
                ref="disciplinaryCaseFaultRef"
                v-model="formData.disciplinaryCaseFault"
                for="#casefault"
                label="กรณีมีความผิด"
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                lazy-rules
              />

              <q-input
                class="col-xs-12 col-sm-3"
                dense
                hide-bottom-space
                outlined
                for="#whereInvestigate"
                ref="disciplinaryInvestigateAtRef"
                v-model="formData.disciplinaryInvestigateAt"
                label="สอบสวนที่"
                :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                lazy-rules
              />

              <q-select
                dense
                class="col-xs-12 col-sm-3"
                outlined
                for="#faultLevel"
                ref="disciplinaryFaultLevelRef"
                v-model="formData.disciplinaryFaultLevel"
                option-label="name"
                option-value="id"
                emit-value
                map-options
                hide-bottom-space
                :options="investigateDis.optionsfaultLevel"
                label="ระดับโทษความผิด"
                :rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]"
                lazy-rules
                group-label="group"
                group-values="options"
              >
              </q-select>

              <q-input
                class="col-xs-12 col-sm-3"
                dense
                for="#refLaw"
                hide-bottom-space
                outlined
                ref="disciplinaryRefLawRef"
                v-model="formData.disciplinaryRefLaw"
                label="อ้างอิงมาตราตามกฎหมาย"
                :rules="[
                  (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
                ]"
                lazy-rules
              />

              <q-input
                class="col-xs-12 col-sm-6"
                dense
                outlined
                for="#evidence"
                ref="disciplinarySummaryEvidenceRef"
                hide-bottom-space
                v-model="formData.disciplinarySummaryEvidence"
                label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
                lazy-rules
              />

              <q-input
                class="col-xs-12 col-sm-6"
                dense
                outlined
                ref="disciplinaryRecordAccuserRef"
                for="#recordAccuser"
                v-model="formData.disciplinaryRecordAccuser"
                label="บันทึกถ้อยคำของผู้กล่าวหา"
                hide-bottom-space
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
                lazy-rules
              />

              <q-input
                class="col-xs-12 col-sm-6"
                dense
                outlined
                for="#witnesses"
                ref="disciplinaryWitnessesRef"
                v-model="formData.disciplinaryWitnesses"
                label="พยานและการบันทึกถ้อยคำ"
                hide-bottom-space
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
                lazy-rules
              />

              <q-input
                class="col-xs-12 col-sm-6"
                dense
                outlined
                for="#InvestResults"
                ref="resultRef"
                v-model="formData.result"
                label="ผลการสอบสวน"
                hide-bottom-space
                type="textarea"
                :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
                lazy-rules
              />
            </div>
          </div>
          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn
              for="ButtonOnSubmit"
              id="formSubmit"
              color="secondary"
              label="บันทึก"
              type="submit"
              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
            >
          </div>
        </q-card>

        <UploadFile
          title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
          label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
          :files="disciplineDisciplinary_DocSummaryEvidences"
          :id="id"
          type="summaryEvidence"
          :fetchData="props.fetchData"
        />
        <UploadFile
          title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
          label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
          :files="disciplineDisciplinary_DocRecordAccusers"
          :id="id"
          type="recordAccuser"
          :fetchData="props.fetchData"
        />
        <UploadFile
          title="อัปโหลดพยานและการบันทึกถ้อยคำ"
          label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
          :files="disciplineDisciplinary_DocWitnessess"
          :id="id"
          type="witnesses"
          :fetchData="props.fetchData"
        />
        <UploadFile
          title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
          label="ไฟล์เอกสารหลักฐานอื่น ๆ"
          :files="disciplineDisciplinary_DocOthers"
          :id="id"
          type="other"
          :fetchData="props.fetchData"
        />
      </div>
    </form>
  </div>

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

  <Dialogbody
    v-model:Modal="modal"
    :clickClose="clickClose"
    :rows2="listDirector"
    v-model:filterKeyword2="filterKeyword2"
    v-model:type="type"
    :get-list="fetchDListDirector"
    :rowsPerPage="rowsPerPage"
    :page="page"
    :maxPage="maxPage"
    @update:pagination="updatePaging"
    @returnDirector="returnDirector"
  />
  <!-- :fecthlistappointment="fecthlistappointment" -->
</template>
