<template>
  <div style="max-height: 68vh; overflow-y: scroll">
    <q-form ref="myForm" class="q-pa-md">
      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
        <div class="col-xs-12 col-md-6">
          <selector
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="typeOrder"
            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
            hide-bottom-space
            :label="`${'ประเภทคำสั่ง'}`"
            @update:modelValue="clickEditRow"
            emit-value
            map-options
            option-label="name"
            :options="typeOrderOption"
            option-value="id"
            use-input
            input-debounce="0"
            @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
                      ) "
          />
        </div>

        <div class="col-xs-12 col-md-6">
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameOrder"
            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
            :label="`${'คำสั่งเรื่อง'}`"
            @update:modelValue="clickEditRow"
            hide-bottom-space
          />
        </div>

        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
          <div class="col-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="command"
              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
              :label="`${'คำสั่ง'}`"
              @update:modelValue="clickEditRow"
              hide-bottom-space
              type="number"
            />
          </div>
          <label class="col-1 flex justify-center items-center text-bold"
            >/</label
          >
          <div class="col-5">
            <datepicker
              v-model="dateYear"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
              @update:modelValue="clickEditRow"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  :model-value="dateYear + 543"
                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                  :label="`${'พ.ศ.'}`"
                  dense
                  outlined
                >
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
        <div class="col-xs-5 col-md-3">
          <datepicker
            menu-class-name="modalfix"
            v-model="dateCommand"
            :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
                outlined
                dense
                class="full-width datepicker"
                :model-value="
                  dateCommand != null ? date2Thai(dateCommand) : null
                "
                :label="`${'วันที่มีผลออกคำสั่ง'}`"
                :rules="[
                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
                ]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>

        <div class="col-xs-12 col-md-6">
          <selector
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="byOrder"
            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
            hide-bottom-space
            :label="`${'คำสั่งโดย'}`"
            @update:modelValue="clickEditRow"
            emit-value
            map-options
            option-label="name"
            :options="byOrderOption"
            option-value="id"
            use-input
            input-debounce="0"
            @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
                      ) "
          />
        </div>
        <div class="col-xs-12 col-md-6">
          <!-- :readonly="!edit"
                :borderless="!edit" -->
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
            :label="`${'ผู้มีอำนาจลงนาม'}`"
            @update:modelValue="clickEditRow"
            hide-bottom-space
          />
        </div>
        <div class="col-xs-12 col-md-6">
          <!-- :readonly="!edit"
                :borderless="!edit" -->
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="positionCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
            @update:modelValue="clickEditRow"
            hide-bottom-space
          />
        </div>
        <div class="col-12">
          <q-separator />
        </div>
        <div class="col-xs-12 col-md-6">
          <selector
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="test"
            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
            hide-bottom-space
            :label="`${'ชื่อ-นามสกุล'}`"
            @update:modelValue="clickEditRow"
            emit-value
            map-options
            option-label="name"
            :options="testOption"
            option-value="id"
            use-input
            input-debounce="0"
            @filter="(inputValue:string,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
                      ) "
          />
        </div>
      </div>
    </q-form>
  </div>
  <q-separator />
  <div class="flex justify-end q-pa-sm q-gutter-sm">
    <q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";

const mixin = useCounterMixin();
const { date2Thai } = mixin;

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();
const previous = () => props.previous();

const myForm = ref<QForm>();

const editRow = ref<boolean>(false);

const nameOrder = ref<string>("");
const nameCommand = ref<string>("");
const positionCommand = ref<string>("");
const dateYear = ref<number>(new Date().getFullYear());
const command = ref<string>("");
const dateCommand = ref<Date>(new Date());
// const dateRegister = ref<Date>(new Date());
// const dateAnnounce = ref<Date>(new Date());

const typeOrder = ref<string>("ช่วยราชการ");
const typeOrderOption = ref<DataOption[]>(['ส่งตัวกลับ',"ส่งตัวกลับ"]);
const typeOrderOptionFilter = ref<DataOption[]>([]);

const byOrder = ref<string>("");
const byOrderOption = ref<DataOption[]>([]);
const byOrderOptionFilter = ref<DataOption[]>([]);

// const register = ref<string>("");
const registerOption = ref<DataOption[]>([]);
const registerOptionFilter = ref<DataOption[]>([]);

// const announce = ref<string>("");
const announceOption = ref<DataOption[]>([]);
const announceOptionFilter = ref<DataOption[]>([]);

// const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);

const test = ref<string>("นายก ข");
const testOption = ref<DataOption[]>([]);
const testOptionFilter = ref<DataOption[]>([]);

const clickEditRow = () => (editRow.value = true);

const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "typeOrderOption":
      update(() => {
        typeOrderOption.value = typeOrderOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;
    case "byOrderOption":
      update(() => {
        byOrderOption.value = byOrderOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;

    case "registerOption":
      update(() => {
        registerOption.value = registerOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;

    case "announceOption":
      update(() => {
        announceOption.value = announceOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;

    case "positionOption":
      update(() => {
        positionOption.value = positionOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;
    case "testOption":
      update(() => {
        testOption.value = testOptionFilter.value.filter(
          (v: DataOption) => v.name!.indexOf(val) > -1
        );
      });
      break;
    default:
      break;
  }
};

const submit = async () => {
  next();
  //   await myForm.value!.validate().then((result: boolean) => {
  //     if (result) {
  //       next();
  //     }
  //   });
};

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<style>
.q-field--with-bottom {
  padding-bottom: 0px;
}
</style>
