<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";

const showDialog = defineModel<boolean>("modal", { default: false });
const formQuery = defineModel<{
  citizenId: string;
  guarantorCitizenId: string;
}>("formQuery", { default: () => ({ citizenId: "", guarantorCitizenId: "" }) });

const props = defineProps({
  onSearchData: Function,
});

function handleSearch() {
  props?.onSearchData?.();
  handleCloseDialog();
}

function handleCloseDialog() {
  showDialog.value = false;
}
</script>

<template>
  <q-dialog v-model="showDialog" persistent>
    <q-card style="max-width: 400px">
      <q-form @submit.prevent="handleSearch">
        <DialogHeader tittle="ค้นหาขั้นสูง" :close="handleCloseDialog" />
        <q-separator />
        <q-card-section>
          <div class="col-12 row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                v-model="formQuery.citizenId"
                dense
                outlined
                label="เลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุน"
                maxlength="13"
                mask="#############"
                hide-bottom-space
                :rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุนให้ครบ']"
                clearable
                @clear="formQuery.citizenId = ''"
              />
            </div>

            <div class="col-12">
              <q-input
                v-model="formQuery.guarantorCitizenId"
                dense
                outlined
                label="เลขประจำตัวประชาชนผู้ค้ำประกัน"
                maxlength="13"
                mask="#############"
                hide-bottom-space
                :rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนผู้ค้ำประกันให้ครบ']"
                clearable
                @clear="formQuery.guarantorCitizenId = ''"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="ค้นหา" color="secondary" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
