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

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,
} 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: () => "",
  },
});

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
  resultDescription: "",
});

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

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

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();
  } else {
    console.log(hasError);
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      await http
        .put(config.API.listResultById(id.value), formData)
        .then(() => {
          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 () => {
    console.log(props.data);
    respondentType.value = props.data.respondentType;
    await fetchDatadetail();
    await fetchOrganization();
  }
);

/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
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
 */
onMounted(async () => {});
</script>
<template>
  <form @submit.prevent="validateForm">
    <q-card>
      <div class="q-pa-md">
        <div class="row col-12 q-gutter-sm">
          <div class="col-xs-12 col-sm-2">
            <q-select
              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>
          <q-input
            type="textarea"
            class="col-12"
            dense
            outlined
            ref="detailRef"
            v-model="formData.resultDescription"
            for="#detail"
            label="สรุปผลการพิจารณา"
            hide-bottom-space
            :rules="[(val) => !!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>
  </form>
</template>