<script setup lang="ts">
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { QForm, useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
import { useInsigniaReclaimStore } from "@/modules/07_insignia/storeReclaim";
import http from "@/plugins/http";
import config from "@/app.config";

/** impotrType */
import type { PropType } from "vue";
import type { QTableColumn } from "quasar";
import type {
  DataReclaim,
  DataNoteList,
  DataRound,
} from "@/modules/07_insignia/interface/response/Reclaim";

/** impotrComponents */
import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const brrowDataStore = useBrrowDataStore();
const { roundData } = storeToRefs(useInsigniaReclaimStore());
const mixin = useCounterMixin();
const {
  date2Thai,
  dialogConfirm,
  success,
  messageError,
  showLoader,
  hideLoader,
  onSearchDataTable,
} = mixin;

/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const isEdit = defineModel<boolean>("isEdit", { required: true });
const insigniaReclaimId = defineModel<string>("insigniaReclaimId", {
  required: true,
  default: "",
});

const props = defineProps({
  fetchData: { type: Function, required: true },
  insigniaReclaimData: {
    type: Object as PropType<DataReclaim>,
  },
});

const rows = ref<DataNoteList[]>([]);
const rowsMain = ref<DataNoteList[]>([]);
const keyword = ref<string>("");
const selected = ref<DataNoteList[]>([]);
const columns = ref<QTableColumn[]>([
  {
    name: "noNumber",
    align: "left",
    label: "ลำดับ",
    field: "noNumber",
    sortable: false,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "citizenId",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    field: "fullName",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "profileType",
    align: "left",
    label: "ประเภทตำแหน่ง",
    field: "profileType",
    sortable: true,
    format(val, row) {
      return brrowDataStore.profileType(val);
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งประเภท",
    field: "position",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "requestInsignia",
    align: "left",
    label: "เครื่องราชฯ",
    field: "requestInsignia",
    format(val, row) {
      return `${row.requestInsignia ?? ""}
      ${
        row.requestInsigniaShortName ? `(${row.requestInsigniaShortName})` : ""
      }  `;
    },
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateReceive",
    align: "left",
    label: "วันที่ได้รับพระราชทาน",
    field: "dateReceive",
    sortable: true,
    format(val, row) {
      return date2Thai(val);
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "noNumber",
  "citizenId",
  "fullName",
  "profileType",
  "position",
  "requestInsignia",
  "dateReceive",
]);

const insigniaNoteId = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
const insigniaNoteProfileId = ref<string>("");
const cardid = ref<string>(""); //เลขประจำตัวประชาชน
const fullName = ref<string>(""); //ชื่อ-นามสกุล
const insigniaType = ref<string>(""); //เครื่องราชฯ
const receivedate = ref<Date | null>(null); //วันที่ยืม
const reason = ref<string>(""); //หมายเหตุการเรียกคืน

const filterSelectRound = ref<DataRound[]>([]);

/** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/
async function fecthListPerson() {
  rows.value = [];
  rowsMain.value = [];
  if (insigniaNoteId.value !== "" && insigniaNoteId.value !== null) {
    let data = {
      insigniaNoteId: insigniaNoteId.value,
      insigniaId: "",
    };
    showLoader();
    await http
      .post(config.API.noteSearchList(), data)
      .then((res) => {
        rowsMain.value = res.data.result;
        rows.value = res.data.result;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** function บันทึกการเพิ่มข้อมูล*/
async function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const pathAPI = !isEdit.value
      ? config.API.insigniaReclaim
      : config.API.insigniaReclaim + `/${insigniaReclaimId.value}`;

    const method = !isEdit.value ? "post" : "put";

    await http[method](pathAPI, {
      insigniaNoteProfileId: !isEdit.value
        ? insigniaNoteProfileId.value
        : undefined,
      reclaimDate: receivedate.value,
      reclaimNote: reason.value,
    })
      .then(async () => {
        await props.fetchData?.();
        closeDialog();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** function closePopup*/
function closeDialog() {
  modal.value = false;
  selected.value = [];
  fullName.value = "";
  cardid.value = "";
  insigniaType.value = "";
  receivedate.value = null;
  reason.value = "";
  keyword.value = "";
}

/** function ค้นหาข้อมูลใน Table*/
function serchDataTable() {
  rows.value = onSearchDataTable(
    keyword.value,
    rowsMain.value,
    columns.value ? columns.value : []
  );
}

watch(selected, () => {
  if (modal.value) {
    const data = selected.value[0];
    insigniaNoteProfileId.value = data ? data.id : "";
    fullName.value = data ? data.fullName : "";
    cardid.value = data ? data.citizenId : "";
    insigniaType.value = data
      ? `${data.requestInsignia} (${data.requestInsigniaShortName})`
      : "";
  }
});

/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
watch(modal, (val) => {
  if (val) {
    filterSelectRound.value = roundData.value?.filter((e) => e.id !== "all");
    insigniaNoteId.value = filterSelectRound.value[0].id;

    if (isEdit.value) {
      const data = props.insigniaReclaimData;
      fullName.value = data ? data?.fullName : "";
      cardid.value = data ? data.citizenId : "";
      insigniaType.value = data
        ? `${data.requestInsignia} (${data.requestInsigniaShortName})`
        : "";
      receivedate.value = data ? data.reclaimDate : null;
      reason.value = data ? data.reclaimReason : "";
    } else {
      fecthListPerson();
    }
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card :style="!isEdit ? 'min-width: 80vw' : 'min-width: 30vw'">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`${!isEdit ? 'บันทึก' : 'แก้ไข'}การเรียกคืนเครื่องราชฯ`"
          :close="closeDialog"
        />
        <q-separator />
        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
          <div class="row col-12">
            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isEdit">
              <div class="col-12">
                <div class="row col-12 q-col-gutter-sm">
                  <q-space />
                  <div class="row q-col-gutter-sm">
                    <q-input
                      standout
                      dense
                      v-model="keyword"
                      outlined
                      placeholder="ค้นหา"
                      @keydown.enter.prevent="serchDataTable"
                    >
                      <template v-slot:append>
                        <q-icon name="search" />
                      </template>
                    </q-input>

                    <q-select
                      v-model="visibleColumns"
                      multiple
                      outlined
                      dense
                      options-dense
                      :display-value="$q.lang.table.columns"
                      emit-value
                      map-options
                      :options="columns"
                      option-value="name"
                      style="min-width: 140px"
                    />
                  </div>
                </div>
              </div>
              <div class="col-12 q-pt-sm">
                <d-table
                  ref="table"
                  :columns="columns"
                  :rows="rows"
                  row-key="id"
                  flat
                  bordered
                  :paging="true"
                  dense
                  :rows-per-page-options="[10, 25, 50, 100]"
                  selection="single"
                  v-model:selected="selected"
                  :visible-columns="visibleColumns"
                >
                  <template v-slot:header="props">
                    <q-tr :props="props">
                      <q-th auto-width></q-th>
                      <q-th
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                      >
                        <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>
                        <q-checkbox
                          keep-color
                          color="primary"
                          dense
                          v-model="props.selected"
                        />
                      </q-td>
                      <q-td
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                      >
                        <div v-if="col.name === 'noNumber'">
                          {{ props.rowIndex + 1 }}
                        </div>
                        <div v-else>
                          {{ col.value ? col.value : "-" }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                </d-table>
              </div>
            </div>
            <q-separator vertical />
            <div class="q-pa-md col">
              <div class="row q-col-gutter-sm">
                <div class="col-12" v-if="!isEdit">
                  <q-select
                    :class="!isEdit ? 'inputgreen' : ''"
                    v-model="insigniaNoteId"
                    :readonly="isEdit"
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    :label="`${'รอบการขอเครื่องราชฯ'}`"
                    emit-value
                    map-options
                    use-input
                    option-label="name"
                    :options="filterSelectRound"
                    option-value="id"
                    :borderless="false"
                    style="min-width: 150px"
                    :rules="[(val:string) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                    @update:model-value="fecthListPerson()"
                  />
                </div>
                <div class="col-12 q-mt-md text-weight-bold text-grey-7">
                  ข้อมูลผู้ถูกเรียกคืน
                </div>
                <div class="col-xs-12 col-sm-6">
                  <q-input
                    hide-bottom-space
                    outlined
                    readonly
                    v-model="cardid"
                    dense
                    lazy-rules
                    label="เลขประจำตัวประชาชน"
                    maxlength="13"
                    mask="#############"
                  />
                </div>
                <div class="col-xs-6 col-sm-6">
                  <q-input
                    readonly
                    hide-bottom-space
                    outlined
                    dense
                    lazy-rules
                    borderless
                    v-model="fullName"
                    :label="`${'ชื่อ-นามสกุล'}`"
                  />
                </div>

                <div class="col-12 q-mt-md text-weight-bold text-grey-7">
                  รายละเอียดการเรียกคืนเครื่องราชฯ
                </div>
                <div class="col-xs-12 col-sm-6">
                  <q-input
                    v-model="insigniaType"
                    readonly
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    :label="`${'เครื่องราชฯ'}`"
                  />
                </div>

                <div class="col-xs-12 col-sm-6">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="receivedate"
                    :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
                        class="inputgreen"
                        dense
                        borderless
                        outlined
                        :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่เรียกคืน']"
                        hide-bottom-space
                        :model-value="
                          receivedate != null
                            ? date2Thai(receivedate)
                            : undefined
                        "
                        :label="`${'วันที่เรียกคืน'}`"
                      >
                        <template v-if="receivedate" v-slot:append>
                          <q-icon
                            name="cancel"
                            @click.stop.prevent="receivedate = null"
                            class="cursor-pointer"
                          />
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-12">
                  <q-input
                    class="inputgreen"
                    v-model="reason"
                    dense
                    outlined
                    lazy-rules
                    hide-bottom-space
                    :label="`${'หมายเหตุการเรียกคืน'}`"
                    type="textarea"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            label="บันทึก"
            type="submit"
            color="public"
            :disable="selected.length === 0 && !isEdit"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
