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

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

/** impotrType */
import type { QTableColumn } from "quasar";

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

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

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

const props = defineProps({});

const rows = ref<any[]>([]);
const rowsMain = ref<any[]>([]);
const keyword = ref<string>("");
const selected = ref<any[]>([]);
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",
  },

  // {
  //   name: "date",
  //   align: "left",
  //   label: "วันที่ในราชกิจนุเบกษา",
  //   field: "date",
  //   sortable: true,
  //   format(val, row) {
  //     return date2Thai(val);
  //   },
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "volumeNo",
  //   align: "left",
  //   label: "เล่มที่ในราชกิจนุเบกษา",
  //   field: "volumeNo",
  //   sortable: true,
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "section",
  //   align: "left",
  //   label: "ตอนที่ในราชกิจนุเบกษา",
  //   field: "section",
  //   sortable: true,
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "page",
  //   align: "left",
  //   label: "หน้าในราชกิจนุเบกษา",
  //   field: "page",
  //   sortable: true,
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "no",
  //   align: "left",
  //   label: "ลำดับที่ในราชกิจจานุเบกษา",
  //   field: "no",
  //   sortable: true,
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "number",
  //   align: "left",
  //   label: "หมายเลขใบกำกับ",
  //   field: "number",
  //   sortable: true,
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
]);
const visibleColumns = ref<string[]>([
  "noNumber",
  "citizenId",
  "fullName",
  "profileType",
  "position",
  "requestInsignia",
  "dateReceive",
  // "date",
  // "volumeNo",
  // "section",
  // "page",
  // "no",
  // "number",
]);

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

const filterSelectRound = ref<any>();

/** function เคลียร์ข้อมูลในฟอร์ม*/
function clearData() {}

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

/**
 * function บันทึกการเพิ่มข้อมูล
 */
async function onSubmit() {
  dialogConfirm($q, async () => {});
}

/** function closePopup*/
function closeDialog() {
  modal.value = false;
}

function serchDataTable() {
  rows.value = onSearchDataTable(
    keyword.value,
    rowsMain.value,
    columns.value ? columns.value : []
  );
}

/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
watch(modal, () => {});
</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.pervent="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"
                >
                  <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">
                  <q-select
                    :class="!isEdit ? 'inputgreen' : ''"
                    v-model="roundNo"
                    :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
                    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">
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
