<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

/**importType*/
import type {
  DataOptionTechnique,
  FormProjectDetail,
} from "@/modules/15_development/interface/index/Main";
import type { DataStrategic } from "@/modules/15_development/interface/response/Main";

import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import http from "@/plugins/http";
import config from "@/app.config";

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

const projectTypeOp = ref<String[]>([
  "โครงการตามยุทธศาสตร์",
  "โครงการตามภารกิจประจำของหน่วยงาน",
  "โครงการใหม่",
  "โครงการต่อเนื่อง",
]);

const projectTechniquesOp = ref<DataOptionTechnique[]>([
  { value: "การอบรม", label: "การอบรม" },
  { value: "การประชุม", label: "การประชุม" },
  { value: "การสัมมนา", label: "การสัมมนา" },
  { value: "การศึกษาดูงาน", label: "การศึกษาดูงาน" },
  { value: "การสัมมนาทางวิชาการ", label: "การสัมมนาทางวิชาการ" },
  { value: "การสัมมนาเชิงปฏิบัติการ", label: "การสัมมนาเชิงปฏิบัติการ" },
  { value: "การบรรยายพิเศษ", label: "การบรรยายพิเศษ" },
  { value: "การฝึกศึกษา", label: "การฝึกศึกษา" },
]);

const formData = reactive<FormProjectDetail>({
  developmentProjectTypes: [],
  projectModal: null,
  isBackPlanned: false,
  isHoldPlanned: false,
  projectDayBackPlanned: null,
  projectDayHoldPlanned: null,
  projectNigthHoldPlanned: null,
  developmentProjectTechniquePlanneds: [],
  isBackActual: false,
  isHoldActual: false,
  projectDayBackActual: null,
  projectDayHoldActual: null,
  projectNigthHoldActual: null,
  developmentProjectTechniqueActuals: [],
  projectModalActual: null,
  projectModalPlanned: null,
  strategyChildPlannedId: null, //id ยุทธศาสตร์เป้าหมายตามแผน
  strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
  strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
  strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
});

const nodes = ref<any>([]);
const filter = ref<string>("");
const filter2 = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const expanded = ref<Array<string | null>>([]);
const expanded2 = ref<Array<string | null>>([]);

/** ดึงข้อมูลทั้งหมด */
function fetchData() {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab3", projectId.value))
    .then((res) => {
      const data = res.data.result;

      formData.developmentProjectTypes = data.developmentProjectTypes;
      formData.projectModal = data.projectModal;
      formData.isBackPlanned = data.isBackPlanned;
      formData.isHoldPlanned = data.isHoldPlanned;
      formData.projectDayBackPlanned = data.projectDayBackPlanned;
      formData.projectDayHoldPlanned = data.projectDayHoldPlanned;
      formData.projectNigthHoldPlanned = data.projectNigthHoldPlanned;
      formData.developmentProjectTechniquePlanneds =
        data.developmentProjectTechniquePlanneds;
      formData.isBackActual = data.isBackActual;
      formData.isHoldActual = data.isHoldActual;
      formData.projectDayBackActual = data.projectDayBackActual;
      formData.projectDayHoldActual = data.projectDayHoldActual;
      formData.projectNigthHoldActual = data.projectNigthHoldActual;
      formData.developmentProjectTechniqueActuals =
        data.developmentProjectTechniqueActuals;
      formData.projectModalPlanned = data.projectModalPlanned;
      const arrayExpanded = [
        data.strategyChild1Planned,
        data.strategyChild2Planned,
        data.strategyChild3Planned,
        data.strategyChild4Planned,
        data.strategyChild5Planned,
      ];
      const arrayExpanded2 = [
        data.strategyChild1Actual,
        data.strategyChild2Actual,
        data.strategyChild3Actual,
        data.strategyChild4Actual,
        data.strategyChild5Actual,
      ];
      const filteredArray = arrayExpanded.filter((item) => item !== null);
      const filteredArray2 = arrayExpanded2.filter((item) => item !== null);
      const lastItem = filteredArray[filteredArray.length - 1];
      const lastItem2 = filteredArray2[filteredArray2.length - 1];
      formData.strategyChildPlannedId =
        lastItem !== undefined ? lastItem : null;
      formData.strategyChildPlannedNode =
        lastItem !== undefined ? filteredArray.length : null;
      formData.strategyChildActualId =
        lastItem2 !== undefined ? lastItem2 : null;
      formData.strategyChildActualNode =
        lastItem2 !== undefined ? filteredArray2.length : null;

      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
      expanded2.value = arrayExpanded2.filter((e) => e !== null).slice(0, -1);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล ยุทธศาสตร์/แผน */
function fetchTree() {
  showLoader();
  http
    .get(config.API.devStrategy)
    .then((res) => {
      const data = res.data.result;
      nodes.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** Main save */
async function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.developmentMainTab("tab3", projectId.value), {
        developmentProjectTypes: formData.developmentProjectTypes,
        projectModal: formData.projectModal,
        isBackPlanned: formData.isBackPlanned,
        isHoldPlanned: formData.isHoldPlanned,
        projectDayBackPlanned: formData.isBackPlanned ? formData.projectDayBackPlanned:null,
        projectDayHoldPlanned: formData.projectDayHoldPlanned,
        projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
        developmentProjectTechniquePlanneds:
          formData.developmentProjectTechniquePlanneds,
        isBackActual: formData.isBackActual,
        isHoldActual: formData.isHoldActual,
        projectDayBackActual: formData.projectDayBackActual,
        projectDayHoldActual: formData.projectDayHoldActual,
        projectNigthHoldActual: formData.projectNigthHoldActual,
        developmentProjectTechniqueActuals:
          formData.developmentProjectTechniqueActuals,
        projectModalActual: formData.projectModalActual,
        projectModalPlanned: formData.projectModalPlanned,
        strategyChildPlannedId: formData.strategyChildPlannedId,
        strategyChildPlannedNode: formData.strategyChildPlannedNode,
        strategyChildActualId: formData.strategyChildActualId,
        strategyChildActualNode: formData.strategyChildActualNode,
      })
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        fetchData();
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

/**
 * update data
 * @param data ข้อมูลยุทธศาสตร์/แผน
 * @param type 1/2 เพื่อเเยก ยุทธศาสตร์1 ยุทธศาสตร์2
 */
function updateSelected(data: DataStrategic, type: string) {
  if (type === "1") {
    formData.strategyChildPlannedId = data.id;
    formData.strategyChildPlannedNode = data.level;
  } else if (type === "2") {
    formData.strategyChildActualId = data.id;
    formData.strategyChildActualNode = data.level;
  }
}

/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
onMounted(() => {
  fetchData();
  fetchTree();
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <div class="row q-pa-sm">
      <div class="col-12">
        <q-select
          dense
          outlined
          v-model="formData.developmentProjectTypes"
          :options="projectTypeOp"
          label="ประเภทโครงการ"
          option-label="name"
          option-value="id"
          emit-value
          map-options
          multiple
          class="inputgreen"
        />
      </div>


      <q-card bordered class="col-12 q-my-sm">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
        >
          ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์/แผน
        </div>
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-6">
              <q-card bordered class="col-12">
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  ยุทธศาสตร์/แผน
                </div>
                <q-separator />

                <q-card-section class="q-pa-sm">
                  <q-input
                    dense
                    outlined
                    v-model="filter"
                    label="ค้นหา"
                    class="inputgreen"
                  >
                    <template v-slot:append>
                      <q-icon
                        v-if="filter !== ''"
                        name="clear"
                        class="cursor-pointer"
                        @click="filter = ''"
                      />
                      <q-icon v-else name="search" color="grey-5" />
                    </template>
                  </q-input>
                  <q-tree
                    dense
                    :nodes="nodes"
                    selected-color="primary"
                    node-key="id"
                    label-key="name"
                    :filter="filter"
                    :no-results-label="notFound"
                    :no-nodes-label="noData"
                    v-model:expanded="expanded"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="updateSelected(prop.node, '1')"
                      :active="formData.strategyChildPlannedId == prop.node.id"
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <div>
                          <div class="text-weight-medium">
                            {{ prop.node.name }}
                          </div>
                        </div>
                      </q-item>
                    </template>
                  </q-tree>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered class="col-12">
                <div
                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  ยุทธศาสตร์/แผน
                </div>
                <q-separator />

                <q-card-section class="q-pa-sm">
                  <q-input
                    dense
                    outlined
                    v-model="filter2"
                    label="ค้นหา"
                    class="inputgreen"
                  >
                    <template v-slot:append>
                      <q-icon
                        v-if="filter2 !== ''"
                        name="clear"
                        class="cursor-pointer"
                        @click="filter2 = ''"
                      />
                      <q-icon v-else name="search" color="grey-5" />
                    </template>
                  </q-input>
                  <q-tree
                    dense
                    :nodes="nodes"
                    node-key="id"
                    label-key="name"
                    :filter="filter2"
                    :no-results-label="notFound"
                    :no-nodes-label="noData"
                    v-model:expanded="expanded2"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="updateSelected(prop.node, '2')"
                        :active="formData.strategyChildActualId == prop.node.id"
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <div>
                          <div class="text-weight-medium">
                            {{ prop.node.name }}
                          </div>
                        </div>
                      </q-item>
                    </template>
                  </q-tree>
                </q-card-section>
              </q-card>
            </div>
          </div>
        </q-card-section>
      </q-card>

      <q-card bordered class="col-12 q-my-sm">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
        >
          รูปแบบโครงการ
        </div>
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-6 q-col-gutter-sm">
              <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>

              <div class="row col-12 q-col-gutter-sm">
                <div class="col-12 col-md-3">
                  <q-checkbox
                    :disable="store.projectStatus === 'FINISH'"
                    keep-color
                    color="primary"
                    dense
                    value="GO_BLACK"
                    label="ไป-กลับ"
                    v-model="formData.isBackPlanned"
                  ></q-checkbox>
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    :readonly="store.projectStatus === 'FINISH'"
                    dense
                    outlined
                    v-model="formData.projectDayBackPlanned"
                    label="จำนวน (วัน)"
                    mask="#"
                    reverse-fill-mask
                    class="inputgreen"
                  />
                </div>
              </div>
              <div class="row col-12 q-col-gutter-sm">
                <div class="col-12 col-md-3">
                  <q-checkbox
                    :disable="store.projectStatus === 'FINISH'"
                    keep-color
                    color="primary"
                    dense
                    value="HOLD"
                    label="พักค้าง"
                    v-model="formData.isHoldPlanned"
                  ></q-checkbox>
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    :readonly="store.projectStatus === 'FINISH'"
                    dense
                    outlined
                    v-model="formData.projectDayHoldPlanned"
                    label="จำนวน (วัน)"
                    mask="#"
                    reverse-fill-mask
                    class="inputgreen"
                  />
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    :readonly="store.projectStatus === 'FINISH'"
                    dense
                    outlined
                    v-model="formData.projectNigthHoldPlanned"
                    label="จำนวน (คืน)"
                    mask="#"
                    class="inputgreen"
                    reverse-fill-mask
                  />
                </div>
              </div>

              <div class="col-12 q-py-md">
                <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
                <q-option-group
                  :disable="store.projectStatus === 'FINISH'"
                  keep-color
                  color="primary"
                  dense
                  v-model="formData.developmentProjectTechniquePlanneds"
                  :options="projectTechniquesOp"
                  type="checkbox"
                />
              </div>

              <div class="col-12 col-sm-6 col-md-4">
                <q-input
                  :disable="store.projectStatus === 'FINISH'"
                  dense
                  outlined
                  v-model="formData.projectModalPlanned"
                  label="จำนวน (รุ่น)"
                  mask="#"
                  reverse-fill-mask
                  class="inputgreen"
                />
              </div>
            </div>

            <div
              v-if="store.projectStatus === 'FINISH'"
              class="col-6 q-col-gutter-sm"
            >
              <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>

              <div class="row col-12 q-col-gutter-sm">
                <div class="col-md-3">
                  <q-checkbox
                    keep-color
                    color="primary"
                    dense
                    value="GO_BLACK"
                    label="ไป-กลับ"
                    v-model="formData.isBackActual"
                  ></q-checkbox>
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    dense
                    outlined
                    v-model="formData.projectDayBackActual"
                    label="จำนวน (วัน)"
                    mask="#"
                    reverse-fill-mask
                  />
                </div>
              </div>
              <div class="row col-12 q-col-gutter-sm">
                <div class="col-12 col-md-3">
                  <q-checkbox
                    keep-color
                    color="primary"
                    dense
                    value="HOLD"
                    label="พักค้าง"
                    v-model="formData.isHoldActual"
                  ></q-checkbox>
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    dense
                    outlined
                    v-model="formData.projectDayHoldActual"
                    label="จำนวน (วัน)"
                    mask="#"
                    reverse-fill-mask
                  />
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    dense
                    outlined
                    v-model="formData.projectNigthHoldActual"
                    label="จำนวน (คืน)"
                    mask="#"
                    reverse-fill-mask
                  />
                </div>
              </div>
              <div class="col-12 q-py-md">
                <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
                <q-option-group
                  keep-color
                  color="primary"
                  dense
                  v-model="formData.developmentProjectTechniqueActuals"
                  :options="projectTechniquesOp"
                  type="checkbox"
                />
              </div>
              <div class="col-12 col-sm-6 col-md-4">
                <q-input
                  dense
                  outlined
                  v-model="formData.projectModalActual"
                  label="จำนวน (รุ่น)"
                  mask="#"
                  reverse-fill-mask
                />
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <q-separator />
    <div class="text-right q-pa-sm">
      <q-btn
        unelevated
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-px-md"
      >
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
    </div>
  </q-form>
</template>

<style scoped>
.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>
