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

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 http from "@/plugins/http";
import config from "@/app.config";

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

const formData = reactive<FormFollowOther>({
  dateStart: null,
  dateEnd: null,
  totalDate: 0,
  address: "",
  province: "",
  budget: "",
  accept: null,
  receive: null,
  approved: null,
  budgetPay: null,
  issues:''
});

const provinceOp = ref<DataOption[]>([]);
const budgetOp = ref<DataOption[]>([
  {
    id: "id1",
    name: "งบ1",
  },
  {
    id: "id2",
    name: "งบ2",
  },
  {
    id: "id3",
    name: "งบ3",
  },
]);

const options = ref<any>([
  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
]);
function onSubmit() {
  dialogConfirm($q, () => {});
}

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,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

onMounted(() => {
  getProvince();
});
</script>
<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <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="formData.dateStart"
          :locale="'th'"
          autoApply
          :enableTimePicker="false"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
            parseInt(value + 543)
          }}</template>
          <template #trigger>
            <q-input
              dense
              outlined
              :model-value="
                formData.dateStart ? date2Thai(formData.dateStart) : null
              "
              :label="`${'วันที่เริ่มรับสมัคร'}`"
              hide-bottom-space
              :rules="[
            (val:string) =>
              !!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-12 col-sm-6 col-md-3">
        <datepicker
          menu-class-name="modalfix"
          v-model="formData.dateEnd"
          :locale="'th'"
          autoApply
          :enableTimePicker="false"
        >
          <template #year="{ year }">{{ year + 543 }}</template>
          <template #year-overlay-value="{ value }">{{
            parseInt(value + 543)
          }}</template>
          <template #trigger>
            <q-input
              dense
              outlined
              :model-value="
                formData.dateEnd ? date2Thai(formData.dateEnd) : null
              "
              :label="`${'วันที่สิ้นสุดรับสมัคร'}`"
              hide-bottom-space
              :rules="[
            (val:string) =>
              !!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-12 col-sm-6 col-md-3">
        <q-input
          dense
          outlined
          label="รวมระยะเวลา (วัน)"
          v-model="formData.totalDate"
        />
      </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
          v-model="formData.address"
          hide-bottom-space
          label="ที่อยู่"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกที่อยู่'}`,
          ]"
        />
      </div>
      <div class="col-4">
        <q-select
          outlined
          dense
          v-model="formData.province"
          hide-bottom-space
          label="จังหวัด"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกจังหวัด'}`,
          ]"
          :options="provinceOp"
          option-label="name"
          option-value="id"
          emit-value
          map-options
        />
      </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="formData.budget"
          hide-bottom-space
          label="ประเภทงบประมาณ"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณาเลือกประเภทงบประมาณ'}`,
          ]"
          :options="budgetOp"
          option-label="name"
          option-value="id"
          emit-value
          map-options
        />
      </div>
      <div class="col-12">
        <div class="row q-col-gutter-x-sm">
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.accept"
              hide-bottom-space
              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ขอรับการจัดสรรฯ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.receive"
              hide-bottom-space
              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับการจัดสรรฯ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.approved"
              hide-bottom-space
              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับอนุมัติ'}`,
          ]"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              v-model="formData.budgetPay"
              hide-bottom-space
              label="จํานวนงบประมาณที่จ่ายจริง"
              :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจํานวนงบประมาณที่จ่ายจริง'}`,
          ]"
            />
          </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
          v-model="formData.issues"
          hide-bottom-space
          label="ประเด็นความเสี่ยง"
          type="textarea"
          :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
          ]"
        />
      </div>
    </div>

    <q-separator />
    <div class="text-right q-pa-sm">
      <q-btn
        dense
        unelevated
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-px-md"
      >
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
    </div>
  </q-form>
</template>

<style scoped></style>
