<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { QForm, useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useStructureTree } from "@/stores/structureTree";

const { fetchStructureTree, fetchTreeStrategy } = useStructureTree();

/** importType*/
import type {
  DataOption,
  NodePlan,
  OrgTreeNode,
} from "@/modules/01_masterdata/interface/index/Main";

/** importStore*/
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

/**use*/
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = usePositionEmp();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogMessageNotify,
} = mixin;

const checkRoute = ref<boolean>(route.name == "KPIIndicatorByPlanView");

const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
const editCheck = ref<boolean>(route.params.id ? true : false);
const isView = ref<boolean>(route.name === "KPIIndicatorByPlanView");

/**form ตัวชี้วัดตามแผนฯ*/
const planData = reactive({
  period: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
  including: "", //รหัสตัวชี้วัด
  includingName: "", //ชื่อตัวชี้วัด
  target: "", //ค่าเป้าหมาย
  unit: "", //หน่วยนับ
  weight: null, //น้ำหนัก
  achievement1: "", //ผลสำเร็จของงาน 1
  achievement2: "", //ผลสำเร็จของงาน 2
  achievement3: "", //ผลสำเร็จของงาน 3
  achievement4: "", //ผลสำเร็จของงาน 4
  achievement5: "", //ผลสำเร็จของงาน 5
  meaning: "", //นิยามหรือความหมาย
  formula: "", //สูตรคำนวณ
  node: null, //ระดับหน่วยงาน
  nodeId: null, //id หน่วยงาน
  orgRevisionId: "", //RevisionId หน่วยงาน
  strategy: null, //ระดับยุทธศาสตร์
  strategyId: "", //id ยุทธศาสตร์
  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
});

const year = ref<number | null>(0); // ปีงยประมาณ
const roundOp = ref<DataOption[]>([
  { id: "APR", name: "รอบเมษายน" },
  { id: "OCT", name: "รอบตุลาคม" },
]);

const nodeDnaId = ref<string>("");
const nodeplan = ref<NodePlan[]>([]);
const nodeAgency = ref<OrgTreeNode[]>([]);
const filter = ref<string>("");
const filterAgency = ref<string>("");
const expandedPlan = ref<string[]>([]);
const expandedAgency = ref<string[]>([]);

const editStatus = ref<boolean>(false);
const inputRef = ref<object | null>(null);

/** function fetch หาโครงสร้างที่ใช้งาน*/
async function fetchOrganizationTree() {
  nodeAgency.value = await fetchStructureTree(route.meta.Key as string, true);
}

/** function fetch หาโครงสร้างที่ใช้งาน*/
async function fetchOrganizationStrategy() {
  nodeplan.value = await fetchTreeStrategy();
}

/** function fetch ข้อมูลตัวชี้วัด*/
async function fetchDataById(id: string) {
  showLoader();
  await http
    .get(config.API.kpiPlanByIdEdit(id))
    .then(async (res) => {
      const data = await res.data.result;
      year.value = Number(data.year);
      planData.period = data.round;
      planData.including = data.including;
      planData.includingName = data.includingName;
      planData.target = data.target;
      planData.unit = data.unit;
      planData.weight = data.weight;
      planData.achievement1 = data.achievement1;
      planData.achievement2 = data.achievement2;
      planData.achievement3 = data.achievement3;
      planData.achievement4 = data.achievement4;
      planData.achievement5 = data.achievement5;
      planData.meaning = data.meaning;
      planData.formula = data.formula;
      planData.node = data.node;
      planData.nodeId = data.nodeId;
      planData.orgRevisionId = data.orgRevisionId;
      planData.strategy = data.strategy;
      planData.strategyId = data.strategyId;
      planData.documentInfoEvidence = data.documentInfoEvidence;
      nodeDnaId.value = data.nodeDnaId;

      // หน่วยงาน/ส่วนราชการ
      const arrayexpandedAgency = [
        data.root,
        data.child1,
        data.child2,
        data.child3,
        data.child4,
      ];
      expandedAgency.value = arrayexpandedAgency
        .filter((e) => e !== null)
        .slice(0, -1);

      // ยุทธศาสตร์ / แผน
      const arrayexpandedPlan = [
        data.strategyChild1,
        data.strategyChild2,
        data.strategyChild3,
        data.strategyChild4,
        data.strategyChild5,
      ];
      expandedPlan.value = arrayexpandedPlan
        .filter((e) => e !== null)
        .slice(0, -1);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** funtion เลือกหรืออัปดเดท ยุทธศาสตร์ / แผน*/
function updateSelected(data: any) {
  planData.strategyId = data.id;
  planData.strategy = data.level;
}

/** funtion เลือกหรืออัปดเดท หน่วยงาน/ส่วนราชการ*/
function updateSelectedAgency(data: any, isUpdate: boolean = false) {
  if (
    planData.node === data.orgLevel &&
    planData.nodeId === data.orgTreeId &&
    !isUpdate
  ) {
    planData.node = null;
    planData.nodeId = null;
  } else {
    planData.node = data.orgLevel;
    planData.nodeId = data.orgTreeId;
    nodeDnaId.value = data.orgTreeDnaId;
  }
  planData.orgRevisionId = data.orgRevisionId;
}

/**function ยืนยันการบันทึกข้อมูล */
function onSubmit() {
  if (nodeDnaId.value == "" || planData.strategyId == "") {
    dialogMessageNotify(
      $q,
      `กรุณาเลือกหน่วยงาน/ส่วนราชการ หรือ ยุทธศาสตร์/แผน`
    );
  } else {
    dialogConfirm(
      $q,
      async () => {
        const body = {
          year: year.value == 0 ? null : year.value?.toString(),
          period: planData.period ? planData.period : null,
          includingName: planData.includingName,
          target: planData.target,
          unit: planData.unit,
          weight: planData.weight,
          achievement1: planData.achievement1,
          achievement2: planData.achievement2,
          achievement3: planData.achievement3,
          achievement4: planData.achievement4,
          achievement5: planData.achievement5,
          meaning: planData.meaning,
          formula: planData.formula,
          node: planData.node,
          nodeId: planData.nodeId,
          orgRevisionId: planData.orgRevisionId,
          strategy: planData.strategy,
          strategyId: planData.strategyId,
          documentInfoEvidence: planData.documentInfoEvidence,
        };
        showLoader();
        try {
          const url = editStatus.value
            ? config.API.kpiPlanById(id.value)
            : config.API.kpiPlan;
          const method = editStatus.value ? "put" : "post";
          const res = await http[method](url, body);
          success($q, "บันทึกข้อมูลสำเร็จ");
          editStatus.value
            ? await fetchDataById(id.value)
            : router.push(`/masterdata/indicator-plan/${res.data.result}`);
        } catch (e) {
          messageError($q, e);
        } finally {
          hideLoader();
        }
      },
      "ยืนยันการบันทึกข้อมูล",
      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
    );
  }
}

// onBeforeMount(async () => {
// });

onMounted(async () => {
  await Promise.all([fetchOrganizationTree(), fetchOrganizationStrategy()]);

  if (id.value) {
    editStatus.value = true;
    await fetchDataById(id.value);
  }
});
</script>

<template>
  <q-card>
    <q-form @submit.prevent greedy @validation-success="onSubmit()">
      <q-card-section>
        <div class="row q-col-gutter-md q-pa-md">
          <div class="col-2" v-if="editCheck">
            <q-input
              outlined
              v-model="planData.including"
              label="ลำดับ/รหัสตัวชี้วัด"
              bg-color="white"
              readonly
              dense
              class="inputgreen"
            />
          </div>
          <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
            <q-input
              outlined
              v-model="planData.includingName"
              label="ชื่อตัวชี้วัด"
              bg-color="white"
              dense
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
              hide-bottom-space
              :readonly="checkRoute"
            />
          </div>
          <div class="col-2">
            <datepicker
              v-model="year"
              :locale="'th'"
              autoApply
              year-picker
              :readonly="checkRoute"
              :enableTimePicker="false"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  outlined
                  class="inputgreen"
                  :readonly="checkRoute"
                  hide-bottom-space
                  :model-value="!!year ? year + 543 : null"
                  :label="`${'ปีงบประมาณ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                  <template v-slot:append>
                    <q-icon
                      v-if="year && !checkRoute"
                      name="cancel"
                      class="cursor-pointer"
                      @click.stop.prevent="year = 0"
                    />
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-2">
            <q-select
              ref="inputRef"
              dense
              outlined
              v-model="planData.period"
              :options="roundOp"
              label="รอบการประเมิน"
              option-label="name"
              option-value="id"
              map-options
              emit-value
              :readonly="checkRoute"
              class="inputgreen"
              clearable
            />
          </div>
          <div class="col-4">
            <q-input
              outlined
              v-model="planData.target"
              label="ค่าเป้าหมาย"
              bg-color="white"
              dense
              :readonly="checkRoute"
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
              hide-bottom-space
            />
          </div>
          <div class="col-4">
            <q-input
              outlined
              v-model="planData.unit"
              label="หน่วยนับ"
              bg-color="white"
              :readonly="checkRoute"
              dense
              lazy-rules
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
              hide-bottom-space
            />
          </div>
          <div class="col-4">
            <q-input
              outlined
              v-model="planData.weight"
              label="น้ำหนัก"
              type="number"
              bg-color="white"
              dense
              :readonly="checkRoute"
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`]"
              hide-bottom-space
            />
          </div>
          <div class="col-12 row">
            <div class="col-6">
              <q-card flat bordered>
                <q-card bordered>
                  <q-card-actions class="bg-grey-3 row">
                    <div class="col-4 flex justify-center items-center">
                      <div>ระดับคะแนน</div>
                    </div>
                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
                  </q-card-actions>
                </q-card>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>5</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      :readonly="checkRoute"
                      v-model="planData.achievement5"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>4</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      :readonly="checkRoute"
                      v-model="planData.achievement4"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>3</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      :readonly="checkRoute"
                      outlined
                      v-model="planData.achievement3"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>2</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      :readonly="checkRoute"
                      v-model="planData.achievement2"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                    />
                  </div>
                </div>
                <div class="row">
                  <div class="col-4 flex justify-center items-center">
                    <div>1</div>
                  </div>
                  <div class="col-8 q-pa-sm">
                    <q-input
                      outlined
                      :readonly="checkRoute"
                      v-model="planData.achievement1"
                      label="กรอกผลสำเร็จของงาน"
                      bg-color="white"
                      dense
                      class="inputgreen"
                      :rules="[
                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                      ]"
                      hide-bottom-space
                    />
                  </div>
                </div>
              </q-card>
            </div>
          </div>
          <div class="col-12">
            <q-input
              outlined
              :readonly="checkRoute"
              v-model="planData.meaning"
              label="นิยามหรือความหมาย"
              type="textarea"
              bg-color="white"
              dense
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
              hide-bottom-space
            />
          </div>
          <div class="col-12">
            <q-input
              :readonly="checkRoute"
              outlined
              v-model="planData.formula"
              label="สูตรคำนวณ"
              bg-color="white"
              type="textarea"
              dense
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
              hide-bottom-space
            />
          </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="filterAgency"
                  label="ค้นหา"
                  :readonly="checkRoute"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
                <q-tree
                  style="height: 350px; overflow: scroll"
                  dense
                  :nodes="nodeAgency"
                  node-key="orgTreeId"
                  label-key="labelName"
                  selected-color="primary"
                  :filter="filterAgency.trim()"
                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
                  no-nodes-label="ไม่มีข้อมูล"
                  v-model:expanded="expandedAgency"
                >
                  <template v-slot:default-header="prop">
                    <q-item
                      :clickable="!checkRoute"
                      @click.stop="updateSelectedAgency(prop.node)"
                      :active="nodeDnaId == prop.node.orgTreeDnaId"
                      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.orgTreeName }}
                        </div>
                        <div class="text-weight-light text-grey-8">
                          {{
                            prop.node.orgCode == null ? null : prop.node.orgCode
                          }}
                          {{
                            prop.node.orgTreeShortName == null
                              ? null
                              : prop.node.orgTreeShortName
                          }}
                        </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="filter"
                  label="ค้นหา"
                  :readonly="checkRoute"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
                <q-tree
                  style="height: 350px; overflow: scroll"
                  dense
                  :nodes="nodeplan"
                  selected-color="primary"
                  node-key="id"
                  label-key="name"
                  :filter="filter.trim()"
                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
                  no-nodes-label="ไม่มีข้อมูล"
                  v-model:expanded="expandedPlan"
                >
                  <template v-slot:default-header="prop">
                    <q-item
                      :clickable="!checkRoute"
                      @click.stop="updateSelected(prop.node)"
                      :active="planData.strategyId == 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-12">
            <q-input
              class="inputgreen"
              v-model="planData.documentInfoEvidence"
              label="ข้อมูลเอกสารหลักฐาน"
              outlined
              :readonly="checkRoute"
              dense
              type="textarea"
            ></q-input>
          </div>
        </div>
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-actions align="right">
        <q-btn
          v-if="!isView && !checkRoute"
          label="บันทึก"
          id="onSubmit"
          type="submit"
          color="public"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<style lang="scss" 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>
