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

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

/** import Type */
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";

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

/** use */
const $q = useQuasar();
const myForm = ref<QForm>();
const DataStore = useResultDataStore();
const mixin = useCounterMixin();
const {
  date2Thai,
  dialogConfirm,
  success,
  messageError,
  showLoader,
  hideLoader,
  notifyError,
} = mixin;

/**
 * Props
 */
const props = defineProps({
  modal: Boolean,

  close: {
    type: Function,
  },
  roundId: {
    type: String,
  },
  action: {
    type: String,
  },
  personId: {
    type: String,
  },
  profileType: {
    type: String,
  },
  fecthlistInsignia: { type: Function, required: true },
});

/**
 * ตัวแปร
 */
const status = ref<string>("");
const Advertise = ref<string>(""); //หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์
const issue = ref<string>(""); //ทะเบียนฐานันดร
const brand = ref<string>(""); //ชั้นตราเครื่องราชอิสริยาภรณ์
const cardid = ref<string>(""); //เลขประจำตัวประชาชน
const fullName = ref<string>(""); //ชื่อ-นามสกุล
const volume = ref<string>(""); //เล่มที่
const episode = ref<string>(""); //ตอนที่
const duty = ref<string>(""); //หน้าที่
const announced = ref<string>(""); //ลำดับที่
const position = ref<string>(""); //ตำเเหน่ง
const payment = ref<string>(""); //รูปแบบการจ่าย
const addressPayment = ref<string | null>(null); //ที่อยู่ที่จ่าย
const affiliationRequest = ref<string>(""); //สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์
const affiliationReceived = ref<string>(""); //สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์
const receivedate = ref<Date | null>(); //วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์
const announceDate = ref<Date | null>(); //วันที่
const invoiceDate = ref<Date | null>(null); //วันที่จ่ายใบกำกับ
const filterinsigniaOp2 = ref<OptionData[]>([]); //ตัวเลือกเครื่องราชอิสริยาภรณ์
const employeeClass = ref<string>(""); //ขรก.สามัญ/ลูกจ้างประจำ
//ประเภท ขรก.สามัญ/ลูกจ้างประจำ
const employeeClassOps = ref<OptionData[]>([
  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
  { id: "employee", name: "ลูกจ้างประจำ" },
]);
//ประเภทรูปแบบการจ่าย
const paymentOp = [
  { label: "จัดส่งทางไปรษณีย์", value: "จัดส่งทางไปรษณีย์" },
  { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
];
const formFilter = reactive({
  page: 1,
  pageSize: 10,
  searchField: "citizenId",
  searchKeyword: "",
});

/**
 * function  reset วันที่จ่ายใบกำกับ
 */
function clearDateInvoiceDate() {
  invoiceDate.value = null;
}

/**
 * disbleStatus
 */
const disbleStatus = computed(() => {
  if (employeeClass.value !== "") {
    return false;
  } else return true;
});

/**
 * function เลือกประเภทลูกจ้าง
 */
function selectType() {
  cardid.value = "";
  fullName.value = "";
  position.value = "";
  Advertise.value = "";
  brand.value = "";
  receivedate.value = null;
  issue.value = "";
  affiliationRequest.value = "";
  affiliationReceived.value = "";
  announceDate.value = null;
  volume.value = "";
  episode.value = "";
  duty.value = "";
  announced.value = "";
  invoiceDate.value = null;
  payment.value = "";
}

/**
 *  function เรียกรายชื่อลูกจ้างตาม id หน่วยงาน
 * @param id id หน่วยงาน
 */
function findlist(id: string = "", idCard: string) {
  formFilter.searchKeyword = idCard;
  http
    .get(
      config.API.registryNew(
        employeeClass.value === "officer" ? "" : "-employee"
      ),
      {
        params: formFilter,
      }
    )
    .then((res) => {
      const data = res.data.result.data[0];
      if (data) {
        fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`; // ชื่อ;
        position.value = data.position; // ตำแหน่ง
      } else {
        notifyError($q, "ไม่พบข้อมูลเลขประจำตัวประชาชนนี้");
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เรียกข้อมูลบันทึกผลตาม id
 * @param id personId
 */
function fectDataByid(id: string) {
  showLoader();
  if (props.profileType !== undefined) {
    employeeClass.value = "officer";
  }
  http
    .get(config.API.noteByid(id))
    .then((res) => {
      let data = res.data.result;
      cardid.value = data.citizenId;
      fullName.value = data.fullName;
      position.value = data.position;
      Advertise.value = data.number;
      brand.value = data.requestInsigniaId;
      receivedate.value = data.dateReceive;
      issue.value = data.issue;
      affiliationRequest.value = data.organizationOrganizationSend;
      affiliationReceived.value = data.organizationOrganizationReceive;
      announceDate.value = data.date;
      volume.value = data.volumeNo;
      episode.value = data.section;
      duty.value = data.page;
      announced.value = data.no;
      invoiceDate.value = data.datePayment;
      payment.value = data.typePayment;
      addressPayment.value = data.address;
      status.value = data.status;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function บักทึกผล
 */
function onSubmit() {
  dialogConfirm($q, () => {
    if (props.roundId !== undefined) {
      showLoader();
      let body = {
        citizanId: cardid.value, // เลขประจำตัวประชาชน
        insigniaId: brand.value, // insigniaID
        number: Advertise.value,
        issue: issue.value,
        dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
        organizationOrganizationSend: affiliationRequest.value,
        organizationOrganizationReceive: affiliationReceived.value,
        date: announceDate.value, // วันที่กิจนุเบก
        volumeNo: volume.value, // เล่ม
        section: episode.value, //ตอนที่
        page: duty.value, //หน้าที่
        no: announced.value,
        datePayment: invoiceDate.value, //วันที่จ่าย
        typePayment: payment.value, // รูปแบบการจ่าย
        address: addressPayment.value, //ที่อยู่
      };
      http
        .put(config.API.noteAdd(props.roundId), body)
        .then(async () => {
          await props.fecthlistInsignia?.();
          await props.close?.();
          await success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
}

/**
 * function หาเลขประจำตัวประชาชน
 */
function searchcardid() {
  if (cardid.value.length === 13) {
    findlist("", cardid.value);
  }
}

/**
 * function ค้นหาข้อมูล option
 * @param val คำค้นหา
 * @param update function
 * @param name ชื่อ selec
 */
function filterSelector(val: string, update: Function, name: string) {
  update(() => {
    const needle = val.toLowerCase();
    if (name === "insigniaOp2") {
      brand.value = val ? "" : brand.value;
      filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
      );
    }
  });
}

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * callback function จำทำงานเมื่อ props.modal = true เปิด popup เพิ่มรายชื่อบันทึกผล
 */
watch(props, () => {
  if (props.modal === true) {
    filterinsigniaOp2.value = DataStore.insigniaOp2;
    employeeClass.value = "";
    cardid.value = "";
    fullName.value = "";
    position.value = "";
    Advertise.value = "";
    brand.value = "";
    receivedate.value = null;
    issue.value = "";
    affiliationRequest.value = "";
    affiliationReceived.value = "";
    announceDate.value = null;
    volume.value = "";
    episode.value = "";
    duty.value = "";
    announced.value = "";
    invoiceDate.value = null;
    payment.value = "";
    if (props.personId !== undefined) {
      if (props.action === "editData") {
        fectDataByid(props.personId); // เมือแก้ไข เรียกข้อมูลบันทึกผล
      }
    }
  } else {
    status.value = "";
    selectType();
  }
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 900px">
      <q-form
        ref="myForm"
        greedy
        @submit.prevent
        @validation-success="onSubmit"
      >
        <DialogHeader tittle="บันทึกผล" :close="props.close" />
        <q-separator />
        <q-card-section>
          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
            <div class="col-4">
              <q-select
                :rules="[
                  (val:string) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
                ]"
                hide-bottom-space
                :options="employeeClassOps"
                dense
                borderless
                option-label="name"
                option-value="id"
                emit-value
                map-options
                outlined
                v-model="employeeClass"
                :label="`ขรก.สามัญ/ลูกจ้างประจำ`"
                @update:model-value="selectType"
                :class="classInput(status !== '')"
                :readonly="status !== ''"
                lazy-rules
              />
            </div>
            <div class="col-12 text-weight-bold text-grey">
              รายละเอียดข้อมูล
            </div>
            <div class="col-xs-12 col-sm-4">
              <q-input
                :readonly="
                  disbleStatus || status == 'DONE' || status == 'PENDING'
                "
                :class="
                  classInput(
                    disbleStatus || status == 'DONE' || status == 'PENDING'
                  )
                "
                :disable="employeeClass == ''"
                hide-bottom-space
                outlined
                v-model="cardid"
                dense
                lazy-rules
                :rules="[
              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
              (val:string) =>
                val.length >= 13 ||
                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
            ]"
                label="เลขประจำตัวประชาชน"
                maxlength="13"
                mask="#############"
                @keyup="searchcardid"
              />
            </div>

            <div class="col-xs-6 col-sm-4">
              <q-input
                :disable="employeeClass == ''"
                readonly
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="fullName"
                :label="`${'ชื่อ-นามสกุล'}`"
              />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-input
                :disable="employeeClass == ''"
                readonly
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="position"
                :label="`ตำเเหน่ง`"
              />
            </div>

            <div class="col-6"></div>

            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
            <div class="col-12 text-weight-bold text-grey">
              รายละเอียดตำเเหน่ง
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                :rules="disbleStatus || status == 'DONE' ? [] : [
                  (val:string) =>
                    !!val ||
                    'กรุณากรอกหมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์',
                ]"
                hide-bottom-space
                dense
                borderless
                outlined
                v-model="Advertise"
                lazy-rules
                label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-select
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                v-model="brand"
                dense
                outlined
                lazy-rules
                hide-bottom-space
                :label="`${'ชั้นตราเครื่องราชอิสริยาภรณ์'}`"
                emit-value
                map-options
                option-label="name"
                :options="filterinsigniaOp2"
                option-value="id"
                use-input
                :borderless="false"
                style="min-width: 150px"
                :rules="disbleStatus || status == 'DONE' ? [] :[
                  (val:string) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
                ]"
                @filter="(inputValue:string,doneFn:Function) => 
                filterSelector(inputValue, doneFn,'insigniaOp2') "
              />
            </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"
                :readonly="disbleStatus || status == 'DONE'"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :readonly="disbleStatus || status == 'DONE'"
                    :class="classInput(disbleStatus || status == 'DONE')"
                    :disable="employeeClass == ''"
                    dense
                    borderless
                    outlined
                    :rules="disbleStatus || status == 'DONE' ? [] :[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                    hide-bottom-space
                    :model-value="
                      receivedate != null ? date2Thai(receivedate) : undefined
                    "
                    :label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
                  >
                    <template v-if="receivedate" v-slot:append>
                      <q-icon
                        v-if="!disbleStatus && status !== 'DONE'"
                        name="cancel"
                        @click.stop.prevent="receivedate = null"
                        class="cursor-pointer"
                      />
                    </template>
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        color="primary"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                :rules="disbleStatus || status == 'DONE' ? [] : [(val:string) => !!val || 'กรุณากรอกทะเบียนฐานันดร']"
                hide-bottom-space
                dense
                borderless
                outlined
                v-model="issue"
                label="ทะเบียนฐานันดร"
                lazy-rules
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="
                  disbleStatus || status == 'DONE' || status == 'PENDING'
                "
                :class="
                  classInput(
                    disbleStatus || status == 'DONE' || status == 'PENDING'
                  )
                "
                :disable="employeeClass == ''"
                :rules="disbleStatus || status == 'DONE' || status == 'PENDING' ? [] :[(val:string) => !!val || 'กรุณากรอกสังกัด']"
                class="inputgreen"
                hide-bottom-space
                dense
                lazy-rules
                borderless
                outlined
                v-model="affiliationRequest"
                label="สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์"
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="
                  disbleStatus || status == 'DONE' || status == 'PENDING'
                "
                :class="
                  classInput(
                    disbleStatus || status == 'DONE' || status == 'PENDING'
                  )
                "
                :disable="employeeClass == ''"
                :rules="disbleStatus || status == 'DONE' || status == 'PENDING' ? [] :[(val:string) => !!val || 'กรุณากรอกสังกัด']"
                hide-bottom-space
                dense
                borderless
                outlined
                v-model="affiliationReceived"
                label="สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์"
                lazy-rules
              />
            </div>
            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
            <div class="col-12 text-weight-bold text-grey">
              ประกาศราชกิจจานุเบกษา
            </div>
            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="announceDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :readonly="disbleStatus || status == 'DONE'"
                    :class="classInput(disbleStatus || status == 'DONE')"
                    :disable="employeeClass == ''"
                    dense
                    borderless
                    outlined
                    :rules="disbleStatus || status == 'DONE' ? []:[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                    hide-bottom-space
                    :model-value="
                      announceDate != null ? date2Thai(announceDate) : undefined
                    "
                    :label="`${'วันที่'}`"
                  >
                    <template v-if="announceDate" v-slot:append>
                      <q-icon
                        v-if="!disbleStatus && status !== 'DONE'"
                        name="cancel"
                        @click.stop.prevent="announceDate = null"
                        class="cursor-pointer"
                      />
                    </template>
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        color="primary"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-xs-12 col-sm-4">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="volume"
                :label="`เล่มที่`"
                :rules="disbleStatus || status == 'DONE' ? []:[(val:string) => !!val || 'กรุณากรอกเล่มที่']"
              />
            </div>
            <div class="col-xs-12 col-sm-4">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="episode"
                :label="`ตอนที่`"
                :rules="disbleStatus || status == 'DONE' ? []:[(val:string) => !!val || 'กรุณากรอกตอนที่']"
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="duty"
                :label="`หน้าที่`"
                :rules="disbleStatus || status == 'DONE' ? []:[(val:string) => !!val || 'กรุณากรอกหน้าที่']"
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                :readonly="disbleStatus || status == 'DONE'"
                :class="classInput(disbleStatus || status == 'DONE')"
                :disable="employeeClass == ''"
                hide-bottom-space
                outlined
                dense
                lazy-rules
                borderless
                v-model="announced"
                :label="`ลำดับที่`"
                :rules="disbleStatus || status == 'DONE' ? []:[(val:string) => !!val || 'กรุณากรอกลำดับที่']"
              />
            </div>
            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
            <div class="col-12 text-weight-bold text-grey">
              ผลการจ่ายใบกำกับ
            </div>
            <div class="col-xs-12 col-sm-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="invoiceDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :readonly="disbleStatus"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    :disable="disbleStatus"
                    :readonly="disbleStatus"
                    :class="classInput(disbleStatus)"
                    dense
                    borderless
                    outlined
                    hide-bottom-space
                    :model-value="
                      invoiceDate != null ? date2Thai(invoiceDate) : undefined
                    "
                    :label="`${'วันที่จ่ายใบกำกับ'}`"
                    clearable
                    @clear="clearDateInvoiceDate"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        color="primary"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-select
                :disable="disbleStatus"
                :readonly="disbleStatus"
                :class="classInput(disbleStatus)"
                hide-bottom-space
                :options="paymentOp"
                dense
                borderless
                option-label="label"
                option-value="value"
                outlined
                emit-value
                lazy-rules
                map-options
                v-model="payment"
                :label="`เลือกรูปแบบการจ่าย`"
              />
            </div>
            <div v-if="payment === 'จัดส่งทางไปรษณีย์'" class="col-12">
              <q-input
                :disable="disbleStatus"
                :readonly="disbleStatus"
                :class="classInput(disbleStatus)"
                label="ที่อยู่ที่จ่าย"
                dense
                lazy-rules
                borderless
                outlined
                v-model="addressPayment"
                type="textarea"
              />
            </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>
