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

import http from "@/plugins/http";
import config from "@/app.config";

import type { FormFollowOther } from "@/modules/15_development/interface/request/Main";
import type { DataOption } from "@/modules/15_development/interface/index/Main";

import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";

const $q = useQuasar();
const store = useDevelopmentDataStore();
const {
  showLoader,
  hideLoader,
  calculateDurationYmd,
  date2Thai,
  messageError,
} = useCounterMixin();

const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);
const budgetOp = ref<DataOption[]>([
  {
    id: "REGULATIONBUDGET",
    name: "งบตามข้อบัญญัติ",
  },
  {
    id: "BANGKOKBUDGET",
    name: "งบประมาณกรุงเทพมหานคร",
  },
  {
    id: "OUTSIDEBUDGET",
    name: "เงินนอกงบประมาณ",
  },
]);

const getProvince = async () => {
  showLoader();
  http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result;

      provinceOp.value = data.map((item: DataOption) => ({
        id: item.id,
        name: item.name,
      }));
      provinceOpMain.value = provinceOp.value;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

function changeDateStart() {
  if (
    store.formAddProject.dateStart !== null &&
    store.formAddProject.dateEnd !== null
  ) {
    const startDate = new Date(store.formAddProject.dateStart);
    const endDate = new Date(store.formAddProject.dateEnd);
    if (startDate > endDate) {
      store.formAddProject.dateEnd = null;
      store.formAddProject.totalDate = null;
    } else {
      daysBetweenDates(
        store.formAddProject.dateStart,
        store.formAddProject.dateEnd
      );
    }
  }
}

function changeDateEnd() {
  daysBetweenDates(
    store.formAddProject.dateStart,
    store.formAddProject.dateEnd
  );
}

async function daysBetweenDates(date1: any, date2: any) {
  const newStartDate = resetTimeToMidnight(new Date(date1));
  const newEndDate = resetTimeToMidnight(new Date(date2));

  const differenceInMilliseconds =
    newEndDate.getTime() - newStartDate.getTime();

  const differenceInDays = Math.floor(
    differenceInMilliseconds / (1000 * 60 * 60 * 24)
  );

  store.formAddProject.totalDate = differenceInDays + 1;
}

function resetTimeToMidnight(date: Date): Date {
  const newDate = new Date(date);
  newDate.setHours(0);
  newDate.setMinutes(0);
  newDate.setSeconds(0);
  newDate.setMilliseconds(0);
  return newDate;
}

/**
 * Fuction Filter จังหวัด
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: string, update: Function) => {
  update(() => {
    provinceOp.value = provinceOpMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
};

onMounted(() => {
  getProvince();
});
</script>
<template>
  <div class="row q-pa-md q-col-gutter-sm">
    <div class="col-12">
      <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <datepicker
        menu-class-name="modalfix"
        v-model="store.formAddProject.dateStart"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        @update:model-value="changeDateStart()"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            class="inputgreen"
            dense
            outlined
            :model-value="
              store.formAddProject.dateStart
                ? date2Thai(store.formAddProject.dateStart)
                : null
            "
            :label="`${'วันที่เริ่มต้น'}`"
          >
            <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-12 col-sm-6 col-md-3">
      <datepicker
        menu-class-name="modalfix"
        v-model="store.formAddProject.dateEnd"
        :locale="'th'"
        autoApply
        :enableTimePicker="false"
        week-start="0"
        :min-date="store.formAddProject.dateStart"
        @update:model-value="changeDateEnd()"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            class="inputgreen"
            :model-value="
              store.formAddProject.dateEnd
                ? date2Thai(store.formAddProject.dateEnd)
                : null
            "
            :label="`${'วันที่สิ้นสุด'}`"
          >
            <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-12 col-sm-6 col-md-3">
      <q-input
        dense
        outlined
        class="inputgreen"
        label="รวมระยะเวลา (วัน)"
        v-model="store.formAddProject.totalDate"
        mask="#"
        reverse-fill-mask
      />
    </div>

    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
    </div>
    <div class="col-8">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.address"
        label="ที่อยู่"
      />
    </div>
    <div class="col-4">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.provinceId"
        label="จังหวัด"
        :options="provinceOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
        class="inputgreen"
        use-input
        @filter="
        (inputValue:string, doneFn:Function) =>
          filterSelector(inputValue, doneFn, )
      "
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">งบประมาณ</span>
    </div>
    <div class="col-4">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.budget"
        label="ประเภทงบประมาณ"
        :options="budgetOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
        class="inputgreen"
      />
    </div>
    <div class="col-12">
      <div class="row q-col-gutter-x-sm">
        <div class="col-3">
          <q-input
            outlined
            dense
            class="inputgreen"
            v-model="store.formAddProject.accept"
            label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
            mask="###,###,###,###,###"
            reverse-fill-mask
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            class="inputgreen"
            v-model="store.formAddProject.receive"
            mask="###,###,###,###,###"
            reverse-fill-mask
            label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            class="inputgreen"
            v-model="store.formAddProject.approved"
            hide-bottom-space
            mask="###,###,###,###,###"
            label="จํานวนงบประมาณที่ได้รับอนุมัติ"
            reverse-fill-mask
          />
        </div>
        <div class="col-3">
          <q-input
            outlined
            dense
            class="inputgreen"
            v-model="store.formAddProject.budgetPay"
            mask="###,###,###,###,###"
            reverse-fill-mask
            label="จํานวนงบประมาณที่จ่ายจริง"
          />
        </div>
      </div>
    </div>

    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
    </div>

    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.issues"
        label="ประเด็นความเสี่ยง"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.chance"
        label="โอกาสที่จะเกิด"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.effects"
        label="ผลกระทบจากการเกิด"
        type="textarea"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.riskLevel"
        label="ระดับความเสี่ยง"
      />
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.riskManagement"
        label="เเนวทางการบริหารความเสี่ยง"
        type="textarea"
      />
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1"
        >ประโยชน์ที่คาดว่าจะได้รับ</span
      >
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.expect"
        label="ประโยชน์ที่คาดว่าจะได้รับ"
        type="textarea"
      />
    </div>
    <div class="col-12 q-mt-md">
      <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
    </div>
    <div class="col-12">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.topicAcademic"
        label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
      />
    </div>
    <div class="col-9">
      <q-input
        outlined
        dense
        class="inputgreen"
        v-model="store.formAddProject.addressAcademic"
        label="สถานที่ฝึกอบรม ศึกษาดูงาน"
      />
    </div>
    <div class="col-3">
      <q-select
        outlined
        dense
        v-model="store.formAddProject.provinceActualId"
        label="จังหวัด"
        :options="provinceOp"
        option-label="name"
        option-value="id"
        emit-value
        map-options
        class="inputgreen"
        use-input
        @filter="
        (inputValue:string, doneFn:Function) =>
          filterSelector(inputValue, doneFn, )
      "
        ><template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
          </q-item>
        </template></q-select
      >
    </div>
  </div>
</template>

<style scoped></style>
