<script setup lang="ts">
import { ref, onMounted, reactive, watch, watchEffect } from "vue";
import { useQuasar } from "quasar";
/** import Type */
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import type {
  FormData,
  MyObjectComplaintsRef,
  ArrayFileList,
} from "@/modules/11_discipline/interface/request/complaint";

/** importStroe*/
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
import config from "@/app.config";
import http from "@/plugins/http";

const $q = useQuasar();
const fileDocDataUpload = ref<File[]>([]);

/** เรียกใช้ store */
const mixin = useCounterMixin();
const complainstStore = useComplainstDataStore();
const mainStore = useDisciplineMainStore();

const {
  date2Thai,
  dialogConfirm,
  dialogRemove,
  success,
  messageError,
  hideLoader,
  showLoader,
} = mixin;
const { filterSelector } = complainstStore; // function จาก store complainstStore

/** validateForm */
const respondentTypeRef = ref<Object | null>(null);
const organizationIdRef = ref<Object | null>(null);
const consideredAgencyRef = ref<Object | null>(null);
const titleRef = ref<Object | null>(null);
const descriptionRef = ref<Object | null>(null);
const dateReceivedRef = ref<Object | null>();
const dateConsiderationRef = ref<Object | null>(null);
const offenseDetailsRef = ref<Object | null>(null);
const levelConsiderationRef = ref<Object | null>(null);
const dateNotificationRef = ref<Object | null>(null);
const complaintFromRef = ref<Object | null>(null);
const appellantRef = ref<Object | null>(null);
const resultRef = ref<Object | null>(null);

const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว

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

const formData = reactive<FormData>({
  id: "",
  respondentType: "",
  organizationId: null,
  consideredAgency: "",
  title: "",
  description: "",
  dateReceived: null,
  dateConsideration: null,
  offenseDetails: "",
  levelConsideration: "",
  dateNotification: null,
  complaintFrom: "",
  appellant: "",
  documentFile: null,
  status: "",
  result: "",
  persons: [],
  disciplineComplaintDocs: fileList.value ?? null,
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectComplaintsRef: MyObjectComplaintsRef = {
  respondentType: respondentTypeRef,
  organizationId: organizationIdRef,
  consideredAgency: consideredAgencyRef,
  title: titleRef,
  description: descriptionRef,
  dateReceived: dateReceivedRef,
  dateConsideration: dateConsiderationRef,
  offenseDetails: offenseDetailsRef,
  levelConsideration: levelConsiderationRef,
  dateNotification: dateNotificationRef,
  complaintFrom: complaintFromRef,
  appellant: appellantRef,
  result: resultRef,
};

// /**
//  * รับค่าผู้ถูกร้องเรียน
//  * @param val บุคคล หน่วยงาน กทม
//  */
// async function selectComplainant(val: string) {
//   formData.organizationId = "";
//   formData.consideredAgency = "";

//   if (val === "1") {
//     await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
//   }
// }

// /** เรียกโครงสร้างสำนักงาน */
// async function fetchOffice() {}

/**
 * ฟังชั่นอัปโหลดไฟล์
 * @param documentFile ไฟล์ที่รับมา
 */
async function fileUploadDoc(documentFile: any) {
  documentFile.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
}

/**
 * เลือกระดับการพิจารณา
 * @param val รับตัวเลข ในรูปแบบ string
 */
function selectLevel(val: string) {
  let dayNum = 0;
  if (val == "VERY_URGENT") {
    dayNum = 15; // ด่วนมาก
  } else if (val == "URGENT") {
    dayNum = 30; // ด่วน
  } else {
    dayNum = 45; // ปกติ
  }
  // วันแจ้งเตือนล่วงหน้า
  if (formData.dateReceived) {
    const currentDate = new Date(formData.dateReceived);
    const newDate = new Date(
      currentDate.getTime() + dayNum * 24 * 60 * 60 * 1000
    );
    formData.dateConsideration = newDate;
  }
}

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

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      if (mainStore.rowsAdd) {
        formData.persons = await mainStore.rowsAdd;
      } 
      await props.onSubmit(formData);
      isSave.value = false;
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

/**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
const modal = ref<boolean>(false);
const toggleModal = () => (modal.value = !modal.value);

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

/**
 * ลบไฟล์
 * @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.complaintFileDelete(formData.id, id))
    .then((res) => {
      success($q, `ลบไฟล์สำเร็จ`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      props.getData();
    });
}

/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(props.data, async () => {
  if (props.data !== null) {
    isReadonly.value = props.data.status != "NEW" ?? true;
    isSave.value = false;

    fileList.value = props.data.disciplineComplaintDocs;
    mainStore.fetchData(props.data.persons);

    formData.id = props.data.id;
    formData.respondentType = props.data.respondentType;
    formData.organizationId = props.data.organizationId;
    formData.consideredAgency = props.data.consideredAgency;
    formData.title = props.data.title;
    formData.description = props.data.description;
    formData.dateReceived = props.data.dateReceived;
    formData.dateConsideration = props.data.dateConsideration;
    formData.offenseDetails = props.data.offenseDetails;
    formData.levelConsideration = props.data.levelConsideration;
    formData.dateNotification = props.data.dateNotification;
    formData.complaintFrom = props.data.complaintFrom;
    formData.appellant = props.data.appellant;
    formData.status = props.data.status;
    formData.result = props.data.result;
    formData.persons = mainStore.rowsAdd;
  }
});

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

/**
 * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
function upLoadFileDoc() {
  const Data = new FormData();
  Data.append("file", formData.documentFile);
  showLoader();
  http
    .put(config.API.complaintFileUpload(formData.id), Data)
    .then((res) => {
      success($q, "อัพโหลดไฟล์สำเร็จ");
      props.getData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      formData.documentFile = null;
    });
}

/**
 * ฟังก์ชั่นเพิ่มรายชื่อผู้ถูกสอบสวนจาก popup มายังรายการผู้ถูกสอบสวนหน้าหลัก
 * @param data ข้อมูลรายชื่อผู้ถูกสอบสวนเป็น array
 */
async function addPerson(data: any) {
  toggleModal();
  changeFormData();
  await mainStore.fetchData(data);
}

/** ดึงข้อมูลหน่วยงานจาก api */
function getOc() {
  http.get(config.API.typeOc()).then((res) => {
    const data = res.data.result;
    complainstStore.ocListFn(data);
  });
}

/**
 * ฟังก์ชั่นลบผู้ถูกร้องเรียนออกจากรายการ
 * @param id id ของผู้ถูกร้อง
 */
function deletePerson(id: string) {
  // dialogRemove($q, () => {
  const dataRow = mainStore.rowsAdd;
  const updatedRows = dataRow.filter((item: any) => item.personId !== id);
  mainStore.rowsAdd = updatedRows;
  changeFormData();
  // });
}

/** ช่องทางการร้องเรียน และฟังก์ชั่นการดึงข้อมูลช่องทางการร้องเรียนมาจาก api*/
const channelOptions = ref<DataOption[]>([]);
function getListChannel() {
  http.get(config.API.complaintListOp()).then((res) => {
    channelOptions.value = res.data.result.data;
  });
}

/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
function changeFormData() {
  isSave.value = props.data != null ?? true;
}

onMounted(() => {
  mainStore.rowsAdd = [];
  getListChannel();
  getOc();
});
</script>

<template>
  <div class="row col-12 bg-white">
    <div class="col-sm-12 col-md-9">
      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
        <q-banner
          inline-actions
          bordered
          class="bg-red-1 text-red border-orange"
        >
          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
          ยังไม่ได้บันทึกข้อมูล
        </q-banner>
      </div>

      <form @submit.prevent="validateForm">
        <div class="col-12">
          <q-card bordered>
            <div class="col-12 row q-pa-md">
              <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-4" id="respondentType">
                  <q-select
                    for="SelectrespondentType"
                    v-model="formData.respondentType"
                    ref="respondentTypeRef"
                    dense
                    outlined
                    :readonly="isReadonly"
                    label="ผู้ถูกร้องเรียน"
                    option-value="id"
                    option-label="name"
                    emit-value
                    use-input
                    map-options
                    hide-bottom-space
                    :options="complainstStore.complainantoptions"
                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                    lazy-rules
                    @filter="(inputValue: any,
                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
                )"
                    @update:model-value="changeFormData()"
                  >
                    <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-4"
                  v-if="formData.respondentType === 'ORGANIZATION'"
                  id="organizationId"
                >
                  <q-select
                    for="inputOffice"
                    name="organizationId"
                    ref="organizationIdRef"
                    dense
                    hide-bottom-space
                    :readonly="isReadonly"
                    outlined
                    option-label="name"
                    option-value="id"
                    emit-value
                    map-options
                    v-model="formData.organizationId"
                    :options="complainstStore.organizationIdOp"
                    label="เลือกสำนักงาน"
                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                    lazy-rules
                    @update:model-value="changeFormData()"
                  />
                </div>

                <div class="col-xs-12 col-sm-4" id="consideredAgency">
                  <q-select
                    ref="consideredAgencyRef"
                    for="selectAgency"
                    dense
                    outlined
                    v-model="formData.consideredAgency"
                    :options="complainstStore.consideredAgencytoptions"
                    label="หน่วยงานที่พิจารณา"
                    option-value="id"
                    option-label="name"
                    :readonly="isReadonly"
                    hide-bottom-space
                    emit-value
                    map-options
                    :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
                    lazy-rules
                    use-input
                    @filter="(inputValue: any,
                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
                )"
                    @update:model-value="changeFormData()"
                  >
                    <template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                </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="!isReadonly"
                        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="mainStore.columnsRespondent"
                        :rows="mainStore.rowsAdd"
                        row-key="idcard"
                        flat
                        bordered
                        :paging="true"
                        dense
                        class="custom-header-table"
                        :visible-columns="mainStore.visibleColumnsRespondent"
                      >
                        <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 v-else-if="col.name == 'info'">
                                <router-link
                                  :to="`/registry/${props.row.personId}`"
                                  ><q-icon name="info" color="info" size="sm"
                                    ><q-tooltip
                                      >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
                                    >
                                  </q-icon></router-link
                                >
                                {{ col.value }}
                              </div>
                              <div
                                v-else-if="col.name === 'organization'"
                                class="table_ellipsis"
                              >
                                {{ props.row.organization }}
                              </div>
                              <div v-else>
                                {{ col.value }}
                              </div>
                            </q-td>
                            <q-td auto-width>
                              <q-btn
                                v-if="!isReadonly"
                                size="12px"
                                flat
                                round
                                dense
                                color="red"
                                class="q-ml-sm"
                                icon="mdi-delete-outline"
                                @click="deletePerson(props.row.personId)"
                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
                              >
                            </q-td>
                          </q-tr>
                        </template>
                      </d-table>
                    </div>
                  </q-card>
                </div>
                <div class="col-xs-12 col-sm-12" id="title">
                  <q-input
                    for="inputTopicComplaint"
                    ref="titleRef"
                    dense
                    outlined
                    :readonly="isReadonly"
                    hide-bottom-space
                    v-model="formData.title"
                    :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                    lazy-rules
                    label="เรื่องร้องเรียน"
                    type="textarea"
                    rows="5"
                    @update:model-value="changeFormData()"
                  />
                </div>

                <div class="col-xs-12 col-sm-12" id="description">
                  <q-input
                    for="inputDetail"
                    ref="descriptionRef"
                    dense
                    outlined
                    :readonly="isReadonly"
                    hide-bottom-space
                    v-model="formData.description"
                    :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
                    lazy-rules
                    label="รายละเอียดเรื่องร้องเรียน"
                    type="textarea"
                    rows="5"
                    @update:model-value="changeFormData()"
                  />
                </div>

                <div class="col-xs-12 col-sm-3" id="dateReceived">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="formData.dateReceived"
                    :locale="'th'"
                    autoApply
                    borderless
                    :readonly="isReadonly"
                    :enableTimePicker="false"
                    week-start="0"
                    @update:model-value="changeFormData()"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        for="inputDatereceive"
                        ref="dateReceivedRef"
                        outlined
                        dense
                        :readonly="isReadonly"
                        hide-bottom-space
                        class="full-width datepicker"
                        :model-value="
                          formData.dateReceived != null
                            ? date2Thai(formData.dateReceived)
                            : 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>

                <div class="col-xs-12 col-sm-3" id="levelConsideration">
                  <q-select
                    for="selectConsiderationLevel"
                    ref="levelConsiderationRef"
                    dense
                    outlined
                    :readonly="isReadonly"
                    v-model="formData.levelConsideration"
                    :options="complainstStore.levelConsiderationtOptions"
                    label="ระดับการพิจารณา"
                    option-value="id"
                    option-label="name"
                    emit-value
                    hide-bottom-space
                    map-options
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`,
                    ]"
                    lazy-rules
                    @update:model-value="
                      selectLevel(formData.levelConsideration);
                      changeFormData();
                    "
                  />
                </div>

                <div class="col-xs-12 col-sm-3" id="dateConsideration">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="formData.dateConsideration"
                    @update:model-value="changeFormData()"
                    :locale="'th'"
                    :readonly="isReadonly"
                    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
                        for="inputDateconsideration"
                        ref="dateConsiderationRef"
                        outlined
                        dense
                        class="full-width datepicker"
                        :model-value="
                          formData.dateConsideration != null
                            ? date2Thai(formData.dateConsideration)
                            : null
                        "
                        :readonly="isReadonly"
                        label="วันที่กำหนดวันพิจารณา"
                        hide-bottom-space
                        :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>

                <div class="col-xs-12 col-sm-3" id="offenseDetails">
                  <q-select
                    for="selectOffenseDescription"
                    ref="offenseDetailsRef"
                    dense
                    outlined
                    :readonly="isReadonly"
                    v-model="formData.offenseDetails"
                    :options="mainStore.offenseDetailstOptions"
                    label="ลักษณะความผิด"
                    option-value="id"
                    option-label="name"
                    emit-value
                    hide-bottom-space
                    map-options
                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
                    lazy-rules
                    @update:model-value="changeFormData()"
                  />
                </div>

                <div class="col-xs-12 col-sm-3" id="dateNotification">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="formData.dateNotification"
                    :locale="'th'"
                    autoApply
                    :readonly="isReadonly"
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                    @update:model-value="changeFormData()"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        for="inputDatewarn"
                        ref="dateNotificationRef"
                        outlined
                        dense
                        :readonly="isReadonly"
                        hide-bottom-space
                        class="full-width datepicker"
                        :model-value="
                          formData.dateNotification != null
                            ? date2Thai(formData.dateNotification)
                            : 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>

                <div class="col-xs-12 col-sm-3" id="complaintFrom">
                  <q-select
                    for="selectReceivecomplaints"
                    ref="complaintFromRef"
                    dense
                    :readonly="isReadonly"
                    outlined
                    v-model="formData.complaintFrom"
                    :options="channelOptions"
                    label="รับเรื่องร้องเรียน"
                    option-value="id"
                    option-label="name"
                    hide-bottom-space
                    emit-value
                    map-options
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`,
                    ]"
                    lazy-rules
                    @update:model-value="changeFormData()"
                  />
                </div>

                <div class="col-xs-12 col-sm-12" id="appellant">
                  <q-input
                    for="inputPetitioner"
                    ref="appellantRef"
                    dense
                    outlined
                    v-model="formData.appellant"
                    :readonly="isReadonly"
                    label="ผู้ร้องเรียน"
                    :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
                    lazy-rules
                    hide-bottom-space
                    type="textarea"
                    rows="5"
                    @update:model-value="changeFormData()"
                  />
                </div>
                <div class="col-xs-12 col-sm-12">
                  <q-input
                    :readonly="isReadonly"
                    for="result"
                    ref="resultRef"
                    dense
                    outlined
                    hide-bottom-space
                    v-model="formData.result"
                    :rules="[
                      (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
                    ]"
                    lazy-rules
                    label="ผลการตรวจสอบเรื่องร้องเรียน"
                    type="textarea"
                    rows="5"
                    @update:model-value="changeFormData()"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>

        <q-separator />
        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
          <q-space />
          <q-btn
            for="ButtonOnSubmit"
            id="onSubmit"
            color="secondary"
            label="บันทึก"
            type="submit"
            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
          >
        </div>
      </form>
    </div>
    <!-- อัพโหลดไฟล์ -->
    <div class="col-sm-12 col-md-3">
      <q-card flat class="q-pa-md" bordered>
        <div class="col-12 row q-col-gutter-md">
          <div class="row col-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">
                {{
                  !isReadonly ? "อัปโหลดไฟล์เอกสารหลักฐาน" : "ไฟล์เอกสารหลักฐาน"
                }}
              </div>
              <div class="col-12"><q-separator /></div>

              <div
                v-if="!isReadonly && formData.id !== ''"
                class="col-12 q-pa-sm row"
              >
                <q-file
                  for="inputFiles"
                  class="col-11"
                  outlined
                  dense
                  v-model="formData.documentFile"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารหลักฐาน"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                  clearable
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" color="primary" />
                  </template>
                </q-file>

                <div class="col-1 self-center" v-if="formData.documentFile">
                  <q-btn
                    size="14px"
                    flat
                    round
                    dense
                    color="add"
                    icon="mdi-upload"
                    @click="upLoadFileDoc()"
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </div>
              </div>

              <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
                <q-list
                  v-for="data in fileList"
                  :key="data.id"
                  class="full-width"
                  bordered
                  separator
                >
                  <q-item clickable v-ripple>
                    <q-item-section>{{ data.fileName }}</q-item-section>
                    <q-space />
                    <q-btn
                      size="12px"
                      flat
                      round
                      dense
                      color="blue"
                      icon="mdi-download"
                      @click="downloadFile(data.pathName)"
                      ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                    >
                    <q-btn
                      v-if="!isReadonly"
                      size="12px"
                      flat
                      round
                      dense
                      color="red"
                      class="q-ml-sm"
                      icon="mdi-delete-outline"
                      @click="deleteFile(data.id)"
                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                    >
                  </q-item>
                </q-list>
              </div>

              <div class="col-12 q-pa-sm" v-else>
                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
              </div>
            </q-card>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <!-- Popup ผู้ถูกร้องเรียน -->
  <DialogAddPersonal
    title="ผู้ถูกร้องเรียน"
    :modal="modal"
    btn-title="เพิ่มรายชื่อผู้ถูกร้องเรียน"
    :close="toggleModal"
    :save="addPerson"
    :selected-data="mainStore.rowsAdd"
    @returnData="handleSave"
  />
</template>

<style scoped>
.q-banner {
  min-height: 25px;
}
</style>
@/modules/11_discipline/store/store