div
<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 { useRouter, useRoute } from "vue-router";

// import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

import type {
  FormData,
  FormRef,
  DataOption,
  DataOptionRes,
  FileArray,
} from "@/modules/11_discipline/interface/request/result";

const mainStore = useDisciplineMainStore();
const modalPerson = ref<boolean>(false);
const toggleModal = () => (modalPerson.value = !modalPerson.value);
const investigateDis = useInvestigateDisStore();
// const { fecthDirector } = investigateDis;
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const dataStore = useDisciplineResultStore();
const mixin = useCounterMixin();
const { date2Thai, hideLoader, dialogConfirm, success, messageError } = mixin;
const router = useRouter();
const route = useRoute();

const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
const respondentType = ref<string>("");
const organizationId = ref<string>("");
const consideredAgency = ref<string>("");
/** ตัวแปร ref สำหรับแสดง validate */
const detailRef = ref<Object | null>(null);

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

const ArrayFile = reactive<FileArray>({
  id: "",
  fileName: "",
  pathName: "",
});
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
  resultDescription: "",
  disciplineType: "",
  titleType: "",
  oc: "",
  file: null,
  disciplineComplaint_Appeal_Docs: [],
  year: new Date().getFullYear(),
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: FormRef = {
  resultDescription: detailRef,
};

const organizationOption = ref<DataOption[]>([]);

async function addPerson(data: any) {
  await mainStore.fetchData(data);
  console.log(mainStore.rowsAdd);
  toggleModal();
}

function handleSave(returnData: any) {
  addPerson(returnData);
  toggleModal();
}

/** 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);
    });
}

async function selectComplainant(val: string) {
  organizationId.value = "";
  consideredAgency.value = "";
}

/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
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();
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      await http
        .put(config.API.listResultById(id.value), formData)
        .then(() => {
          isSave.value = false;
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(async () => {
          await props.fetchData();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

async function fetchDatadetail() {
  formData.resultDescription = props.data.resultDescription;
}
/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(
  () => props.data,
  async () => {
    respondentType.value = props.data.respondentType;
    formData.oc = props.data.resultOc;
    formData.disciplineType = props.data.resultDisciplineType;
    formData.titleType = props.data.resultTitleType;
    formData.year = props.data.resultYear;
    mainStore.rowsAdd = props.data.persons;
    await fetchDatadetail();
    await fetchOrganization();
  }
);

function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

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

// function deletePerson(id: string) {
//   changeFormData();
//   const dataRow = mainStore.rowsAdd;
//   const updatedRows = dataRow.filter((item: any) => item.id !== id);
//   mainStore.rowsAdd = updatedRows;
// }

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */

function uploadFile() {
  /** uploadFile */
  // const Data = new FormData();
  // Data.append("file", formData.file);
  // showLoader();
  // http
  //   .put(config.API.appealUpLoadFile(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.file = null;
  //   });
}

function downloadFile(link: string) {
  // window.open(link, "_blank");
}

function deleteFile(id: string) {
  // dialogRemove($q, () => confirmDelete(id));
}

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

onMounted(async () => {});
</script>
<template>
  <div class="row q-col-gutter-sm">
    <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">
        <q-card bordered>
          <div class="q-pa-md">
            <div class="row col-12 q-gutter-sm">
              <div class="col-xs-12 col-sm-2">
                <q-select
                  readonly
                  for="SelectrespondentType"
                  v-model="respondentType"
                  ref="respondentTypeRef"
                  dense
                  outlined
                  label="ผู้ถูกร้องเรียน"
                  option-value="id"
                  option-label="name"
                  emit-value
                  use-input
                  map-options
                  hide-bottom-space
                  :options="dataStore.complainantoptions"
                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                  lazy-rules
                  @update:model-value="selectComplainant(respondentType)"
                  @filter="(inputValue: any,
                doneFn: Function) => dataStore.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="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="organizationId"
                  :options="organizationOption"
                  label="เลือกสำนักงาน"
                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                  lazy-rules
                />
              </div>
              <div class="row col-12" v-if="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'">
                              <q-btn
                                size="14px"
                                flat
                                round
                                dense
                                color="info"
                                icon="info"
                                @click="
                                  router.push(`/registry/${props.row.personId}`)
                                "
                                ><q-tooltip
                                  >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
                                ></q-btn
                              >
                            </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.id)"
                          ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
                        >
                      </q-td> -->
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </q-card>
              </div>
              <div class="col-12">
                <q-input
                  :class="inputEdit(isReadonly)"
                  type="textarea"
                  dense
                  outlined
                  ref="detailRef"
                  v-model="formData.resultDescription"
                  for="#detail"
                  label="สรุปผลการพิจารณา"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
                  lazy-rules
                  @update:model-value="changeFormData()"
                />
              </div>
              <div class="col-12">
                <div class="row q-col-gutter-sm">
                  <div class="col-3">
                    <q-input
                      v-model="formData.disciplineType"
                      dense
                      :class="inputEdit(isReadonly)"
                      outlined
                      label="ประเภทวินัย"
                    />
                  </div>
                  <div class="col-3">
                    <q-input
                      v-model="formData.titleType"
                      dense
                      outlined
                      :class="inputEdit(isReadonly)"
                      label="ประเภทของเรื่อง"
                    />
                  </div>
                  <div class="col-4">
                    <q-input
                      v-model="formData.oc"
                      dense
                      outlined
                      :class="inputEdit(isReadonly)"
                      label="หน่วยงาน/ส่วนราชการ"
                    />
                  </div>
                  <div class="col-2">
                    <datepicker
                      menu-class-name="modalfix"
                      v-model="formData.year"
                      class="col-2"
                      :locale="'th'"
                      autoApply
                      year-picker
                      :enableTimePicker="false"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          lazy-rules
                          :class="inputEdit(isReadonly)"
                          outlined
                          :model-value="
                            formData.year === 0
                              ? null
                              : Number(formData.year) + 543
                          "
                          :label="`${'ปีงบประมาณ'}`"
                        >
                          <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>
              </div>
            </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>
        <!-- <DialogAddPersonal
      title="ผู้ถูกร้องเรียน"
      :mainData="mainStore.rowsAdd"
      :modal="modalPerson"
      btn-title="เพิ่มรายชื่อผู้ถูกร้องเรียน"
      :close="toggleModal"
      :save="addPerson"
      @returnData="handleSave"
    /> -->
      </form>
    </div>
    <!-- อัพโหลดไฟล์ -->
    <div class="col-sm-12 col-md-3">
      <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>
        <div class="col-12 q-pa-sm row">
          <q-file
            for="inputFiles"
            class="col-11"
            outlined
            dense
            v-model="formData.file"
            @added="uploadFile"
            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 text-center">
            <q-btn
              v-if="formData.file && isReadonly"
              size="14px"
              flat
              round
              dense
              color="add"
              icon="mdi-upload"
              @click="uploadFile"
              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
            >
          </div>
        </div>
        <div
          v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
          class="col-xs-12 q-pa-sm row"
        >
          <q-list
            v-for="data in formData.disciplineComplaint_Appeal_Docs"
            :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
                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>
</template>