<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

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

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const {
  showLoader,
  hideLoader,
  diffDay,
  date2Thai,
  messageError,
  dialogConfirm,
  success,
} = useCounterMixin();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());

const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);
const budgetOp = ref<DataOption[]>([
  {
    id: "REGULATIONBUDGET",
    name: "งบตามข้อบัญญัติ",
  },
  {
    id: "OUTSIDEBUDGET",
    name: "เงินนอกงบประมาณ",
  },
  {
    id: "BANGKOKBUDGET",
    name: "ไม่ใช้งบประมาณ",
  },
]);
const budgetSubOp = ref<DataOption[]>([
  {
    id: "MAINTENANCE",
    name: "เงินบำรุง",
  },
  {
    id: "FUND",
    name: "เงินกองทุน",
  },
  {
    id: "SUBSIDY",
    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();
    });
};

const formData = reactive<FormData>({
  dateStart: null, //วันที่เริ่มต้น
  dateEnd: null, //วันที่สิ้นสุด
  totalDate: null, //รวมระยะเวลา (วัน)
  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
  budgetSub: "",
  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
  issues: "", //ประเด็นความเสี่ยง
  chance: null, //โอกาสที่จะเกิด
  effects: null, //ผลกระทบจากการเกิด
  riskLevel: "", //ระดับความเสี่ยง
  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
});

function fetchData() {
  http
    .get(config.API.developmentMainTab("tab5", projectId.value))
    .then((res) => {
      const data = res.data.result;
      formData.dateStart = data.dateStart;
      formData.dateEnd = data.dateEnd;
      formData.totalDate = data.totalDate;
      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
        address: e.address,
        provinceId: e.provinceId,
      }));
      formData.budget = data.budget;
      formData.accept = data.accept;
      formData.receive = data.receive;
      formData.approved = data.approved;
      formData.budgetPay = data.budgetPay;
      formData.issues = data.issues;
      formData.chance = Number(data.chance);
      formData.effects = Number(data.effects);
      formData.riskLevel = data.riskLevel;
      formData.riskManagement = data.riskManagement;
      formData.expect = data.expect;
      formData.topicAcademic = data.topicAcademic;
      formData.addressAcademic = data.addressAcademic;
      formData.provinceActualId = data.provinceActualId;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

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

function changeDateEnd() {
  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
}

/**
 * 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
    );
  });
};

async function calRiskLevel() {
  if (formData.chance && formData.effects) {
    const riskLevel =
      (await Number(formData.chance)) * Number(formData.effects);
    formData.riskLevel =
      riskLevel == 1
        ? "น้อยมาก"
        : riskLevel == 2
        ? "น้อย"
        : riskLevel == 3 || riskLevel == 4 || riskLevel == 6
        ? "ปานกลาง"
        : riskLevel == 5 || riskLevel == 8 || riskLevel == 9 || riskLevel == 10
        ? "สูง"
        : riskLevel == 12 ||
          riskLevel == 15 ||
          riskLevel == 16 ||
          riskLevel == 20 ||
          riskLevel == 25
        ? "สูงมาก"
        : "";
  }
}

function onClickAddLocation() {
  const data = {
    address: "",
    provinceId: "",
  };
  formData.developmentAddresss.push(data);
}

function onClickDeleteLocation(index: number) {
  formData.developmentAddresss.splice(index, 1);
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    formData.totalDate = Number(formData.totalDate);
    formData.accept =
      typeof formData.accept === "string"
        ? Number(formData.accept.replace(/,/g, ""))
        : formData.accept;
    formData.receive =
      typeof formData.receive === "string"
        ? Number(formData.receive.replace(/,/g, ""))
        : formData.receive;
    formData.approved =
      typeof formData.approved === "string"
        ? Number(formData.approved.replace(/,/g, ""))
        : formData.approved;
    formData.budgetPay =
      typeof formData.budgetPay === "string"
        ? Number(formData.budgetPay.replace(/,/g, ""))
        : formData.budgetPay;

    http
      .put(config.API.developmentMainTab("tab5", projectId.value), formData)
      .then(() => {
        fetchData();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

onMounted(() => {
  fetchData();
  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"
          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="
                formData.dateStart ? date2Thai(formData.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="formData.dateEnd"
          :locale="'th'"
          autoApply
          :enableTimePicker="false"
          week-start="0"
          :min-date="formData.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="
                formData.dateEnd ? date2Thai(formData.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="formData.totalDate"
          mask="#"
          reverse-fill-mask
        />
      </div>

      <div class="col-12 q-mt-md">
        <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
        <q-btn
          dense
          flat
          round
          color="primary"
          icon="add"
          @click="onClickAddLocation"
        >
          <q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
        </q-btn>
      </div>
      <div class="col-12" v-for="(item, index) in formData.developmentAddresss">
        <div class="row q-col-gutter-sm">
          <div class="col-8">
            <q-input
              outlined
              dense
              class="inputgreen"
              v-model="formData.developmentAddresss[index].address"
              label="ที่อยู่"
            />
          </div>
          <div class="col-3">
            <q-select
              outlined
              dense
              v-model="formData.developmentAddresss[index].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-1 text-center">
            <q-btn
              v-if="index !== 0"
              dense
              flat
              round
              color="red"
              icon="delete"
              @click="onClickDeleteLocation(index)"
            >
              <q-tooltip>ลบ</q-tooltip></q-btn
            >
          </div>
        </div>
      </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"
          label="ประเภทงบประมาณ"
          :options="budgetOp"
          option-label="name"
          option-value="id"
          emit-value
          map-options
          class="inputgreen"
        />
      </div>
      <div class="col-2">
        <q-select
          v-if="formData.budget === 'OUTSIDEBUDGET'"
          outlined
          dense
          v-model="formData.budgetSub"
          label="ประเภทย่อย"
          :options="budgetSubOp"
          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="formData.accept"
              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
              mask="###,###,###,###,###"
              reverse-fill-mask
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              class="inputgreen"
              v-model="formData.receive"
              mask="###,###,###,###,###"
              reverse-fill-mask
              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              class="inputgreen"
              v-model="formData.approved"
              hide-bottom-space
              mask="###,###,###,###,###"
              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
              reverse-fill-mask
            />
          </div>
          <div class="col-3">
            <q-input
              outlined
              dense
              class="inputgreen"
              v-model="formData.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="formData.issues"
          label="ประเด็นความเสี่ยง"
          type="textarea"
        />
      </div>
      <div class="col-3">
        <q-select
          outlined
          dense
          class="inputgreen"
          v-model="formData.chance"
          label="โอกาสที่จะเกิด"
          :options="[1, 2, 3, 4]"
          @update:model-value="calRiskLevel"
        ></q-select>
      </div>
      <div class="col-3">
        <q-select
          outlined
          dense
          class="inputgreen"
          v-model="formData.effects"
          label="ผลกระทบจากการเกิด"
          :options="[1, 2, 3, 4]"
          @update:model-value="calRiskLevel"
        >
        </q-select>
      </div>
      <div class="col-6">
        <q-input
          readonly
          outlined
          dense
          class="inputgreen"
          v-model="formData.riskLevel"
          label="ระดับความเสี่ยง"
        />
      </div>
      <div class="col-12">
        <q-input
          outlined
          dense
          class="inputgreen"
          v-model="formData.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="formData.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="formData.topicAcademic"
          label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
        />
      </div>
      <div class="col-9">
        <q-input
          outlined
          dense
          class="inputgreen"
          v-model="formData.addressAcademic"
          label="สถานที่ฝึกอบรม ศึกษาดูงาน"
        />
      </div>
      <div class="col-3">
        <q-select
          outlined
          dense
          v-model="formData.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>
    <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>
