<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";

const mixin = useCounterMixin();
const dataStore = useLeaveStore()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
  mixin;
const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();
const routeName = router.currentRoute.value.name;
const id = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const files = ref<any>();
const locationAbsence = ref<string>("");
const levelStudy = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const educational = ref<string>("");
const studyPeriod = ref<string>("");
const country = ref<string>("");
const capital = ref<string>("");
const tel = ref<number>();
const detail = ref<string>();
const Writeat = ref<string>();
const dateLeaveStart = ref<Date>(new Date());
const dateLeaveEnd = ref<Date>(new Date());
const dateTotal = ref<number>();
const noteReason = ref("");
const nameFile = ref<string>("");
const model = ref(null);
const modelSpecific = ref(null);
const options = ref([
  {id:'0',name:"ลาป่วย"},
  {id:'1',name:"ลากิจส่วนตัว"},
  {id:'2',name:"ลาคลอดบุตร"},
  {id:'3',name:"ลาไปช่วยเหลือภริยาที่คลอดบุตร"},
  {id:'4',name:"ลาพักผ่อน"},
  {id:'5',name:"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"},
  {id:'6',name:"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"},
  {id:'7',name:"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"},
  {id:'8',name:"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"},
  {id:'9',name:"ลาติดตามคู่สมรส"},
  {id:'10',name:"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"},
]);

const optionsSpecific = ref([
  {id:'0',name:"ลาไปศึกษา"},
  {id:'1',name:"ฝึกอบรม"},
  {id:'2',name:"ปฎิบัติการวิจัย"},
  {id:'3',name:"ดูงาน"},
]);

const dataDetail = ref<any>({
  datetext: "",
  activeDate: new Date(),
  createdAt: new Date(),
  firstName: "",
  id: "",
  isActive: true,
  lastName: "",
  location: "",
  organizationPositionOld: "",
  positionLevelOld: "",
  positionNumberOld: "",
  positionTypeOld: "",
  prefix: "",
  profileId: "",
  reason: "",
  salary: 0,
  sendDate: new Date(),
  status: "",
  statustext: "",
  fullname: "",
});

const clickBack = () => {
  router.push(`/leave`);
};

onMounted(() => {});

const saveAbsence = () => {
  $q.dialog({
    title: "ยืนยันการยื่นข้อมูลลาออก",
    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(() => {
      // createFormresign()
      if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
        console.log(1);
      } else if (
        model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
      ) {
        console.log(2);
      }
      router.push(`/leave`);
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};
</script>
<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="clickBack"
        />
        <div>ยื่นใบลา</div>
      </div>
      <q-form ref="myform" class="col-12">
        <q-card bordered>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12">
              <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
              <div class="q-pl-sm text-weight-bold text-dark">
                เลือกประเภทการลา
              </div>
              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                <q-select
                  dense
                  class="q-ml-lg col-6"
                  outlined
                  v-model="model"
                  :options="dataStore.optionsSpecific"
                  prefix="ประเภทใบลา :"
                />
                <div class="col-6 row q-pa-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" >
                  <q-select
                    dense
                    class="q-ml-lg col-6"
                    outlined
                    v-model="modelSpecific"
                    :options="optionsSpecific"
                    prefix="ประเภทใบลา :"
                  />
                </div>
              </div>
              <q-icon
                name="mdi-numeric-2-circle"
                size="20px"
                color="primary"
                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
              />
              <div
                class="q-pl-sm text-weight-bold text-dark"
                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
              >
                เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
              </div>
              <div
                class="col-12 row q-pa-sm q-col-gutter-sm"
                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
              >
                <q-select
                  dense
                  class="q-ml-lg col-6"
                  outlined
                  v-model="modelSpecific"
                  :options="optionsSpecific"
                  prefix="ประเภทใบลา :"
                />
              </div>
              <q-icon
                name="mdi-numeric-2-circle"
                size="20px"
                color="primary"
                v-else
              />
              <q-icon
                name="mdi-numeric-3-circle"
                size="20px"
                color="primary"
                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
              />
              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
              <q-card bordered class="q-pa-md bg-grey-1">
                <div class="col-12 row q-pa-sm q-col-gutter-sm">
                  <datepicker
                    class="col-2"
                    menu-class-name="modalfix"
                    v-model="dateLeaveStart"
                    :locale="'th'"
                    autoApply
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                    :readonly="routeName != 'addAbsence'"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        dense
                        hide-bottom-space
                        :readonly="routeName != 'addAbsence'"
                        class="full-width datepicker"
                        :model-value="
                          dateLeaveStart != null
                            ? date2Thai(dateLeaveStart)
                            : 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>
                  <datepicker
                    class="col-2"
                    menu-class-name="modalfix"
                    v-model="dateLeaveEnd"
                    :locale="'th'"
                    autoApply
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                    :readonly="routeName != 'addAbsence'"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        dense
                        hide-bottom-space
                        :readonly="routeName != 'addAbsence'"
                        class="full-width datepicker"
                        :model-value="
                          dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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>
                  <q-input
                    class="col-2"
                    dense
                    outlined
                    type="number"
                    v-model="dateTotal"
                    label="จำนวนวัน(บันทึกลง ก.พ.7)"
                    :readonly="routeName != 'addAbsence'"
                    :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
                  />
                  <q-input
                    class="col-3"
                    dense
                    outlined
                    v-model="Writeat"
                    label="เขียนที่"
                    :readonly="routeName != 'addAbsence'"
                    :rules="[(val) => !!val || `${'เขียนที่'}`]"
                  />
                  <q-input
                    class="col-3"
                    dense
                    outlined
                    v-model="tel"
                    mask="(###)-###-####"
                    unmasked-value
                    label="หมายเลขโทรศัพท์ที่ติดต่อได้"
                    :readonly="routeName != 'addAbsence'"
                    :rules="[
                      (val) =>
                        !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
                    ]"
                  />
                  <q-input
                    class="col-6"
                    dense
                    outlined
                    v-model="detail"
                    label="รายละเอียด"
                    :readonly="routeName != 'addAbsence'"
                    :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                  />
                  <q-input
                    class="col-6"
                    dense
                    outlined
                    v-model="locationAbsence"
                    label="สถาที่ติดต่อขณะลา"
                    :readonly="routeName != 'addAbsence'"
                    :rules="[
                      (val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
                    ]"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="levelStudy"
                    label="ระดับที่ขอลาศึกษา"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="degree"
                    label="ชื่อปริญญา/ประกาศนียบัตร"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="major"
                    label="สาขาวิชาเอก/หลักสูตร/วิชา"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="educational"
                    label="ณ สถานศึกษา"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="studyPeriod"
                    label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="country"
                    label="ประเทศ"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-4"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="capital"
                    label="ด้วยทุน"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-input
                    class="col-8"
                    v-if="
                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
                    "
                    dense
                    outlined
                    v-model="noteReason"
                    label="ที่มาของหลักสูตร"
                    :readonly="routeName != 'addAbsence'"
                  />

                  <q-file
                    v-model="files"
                    dense
                    label="เอกสารประกอบ"
                    outlined
                    use-chips
                    multiple
                    class="q-pl-sm col-6"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" color="primary" />
                    </template>
                  </q-file>

                  <div class="col-12 row" v-if="routeName != 'addAbsence'">
                    <div
                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                    >
                      <div class="q-pl-sm text-weight-bold text-dark">
                        เอกสารเพิ่มเติม
                      </div>
                    </div>
                    <q-card bordered flat class="full-width">
                      <q-list separator>
                        <q-item
                          v-for="file in files"
                          :key="file.key"
                          class="q-my-xs"
                        >
                          <q-item-section>
                            <q-item-label class="full-width ellipsis">
                              {{ file.fileName }}
                            </q-item-label>

                            <q-item-label caption> </q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-card>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <q-separator />
          <div class="row col-12 q-pa-md">
            <q-space />
            <q-btn
              unelevated
              dense
              class="q-px-md items-center btnBlue"
              label="บันทึก"
              @click="saveAbsence"
            />
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btnBlue {
  background-color: #016987;
  color: #fff;
}
</style>
