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

/** importType*/
import type { DataOption } from "@/modules/14_KPI/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 id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");

/**form ตัวชี้วัดตามแผนฯ*/
const planData = reactive({
  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
  including: "", //รหัสตัวชี้วัด
  includingName: "", //ชื่อตัวชี้วัด
  target: "", //ค่าเป้าหมาย
  unit: null, //หน่วยนับ
  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 ยุทธศาสตร์
});

const year = ref<number>(0); // ปีงยประมาณ
const roundOp = ref<DataOption[]>([]);

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

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

/** functiopn fetch รอบการประเมิน*/
function fetchRoundOption(isId: number | null = null) {
  http
    .get(
      config.API.kpiPeriod +
        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
    )
    .then((res) => {
      const data = res.data.result.data;
      const list = data.map((e: any) => ({
        id: e.id,
        name:
          e.durationKPI === "OCT"
            ? "รอบตุลาคม"
            : e.durationKPI === "APR"
            ? "รอบเมษายน"
            : "",
      }));
      roundOp.value = list;

      if (isId) {
        planData.kpiPeriodId = "";
        inputRef.value.resetValidation();
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch หาโครงสร้างที่ใช้งาน*/
function fetchOrganizationActive() {
  http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      if (data) {
        store.fetchDataActive(data);

        store.activeId && fetchTreeAgency(store.activeId);
        fetchTreeStrategy();
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetchTree ยุทธศาสตร์ / แผน*/
function fetchTreeStrategy() {
  http
    .get(config.API.devStrategy)
    .then((res) => {
      const data = res.data.result;
      nodeplan.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** functioon fetchcTree หน่วยงาน/ส่วนราชการ*/
function fetchTreeAgency(id: string) {
  http
    .get(config.API.orgByid(id.toString()))
    .then(async (res) => {
      const data = res.data.result;
      nodeAgency.value = data;
      store.treeId = "";
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function fetch ข้อมูลตัวชี้วัด*/
function fetchDataById(id: string) {
  showLoader();
  http
    .get(config.API.kpiPlanById(id))
    .then((res) => {
      const data = res.data.result;
      year.value = data.year;
      planData.kpiPeriodId = data.kpiPeriodId;
      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;

      // หน่วยงาน/ส่วนราชการ
      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);

      fetchRoundOption();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 1000);
    });
}

/** 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;
  }
  planData.orgRevisionId = data.orgRevisionId;
}

/**function ยืนยันการบันทึกข้อมูล */
function onSubmit() {
  if (planData.nodeId == null || planData.strategyId == "") {
    dialogMessageNotify(
      $q,
      `กรุณาเลือกหน่วยงาน/ส่วนราชการ หรือ ยุทธศาสตร์/แผน`
    );
  } else {
    dialogConfirm(
      $q,
      async () => {
        showLoader();
        // editStatus.value ? editData(id.value) : addData();
        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, planData);
          success($q, "บันทึกข้อมูลสำเร็จ");
          editStatus.value
            ? fetchDataById(id.value)
            : router.push(`/KPI-indicator-plan/${res.data.result}`);
        } catch (e) {
          messageError($q, e);
        } finally {
          hideLoader();
        }
      },
      "ยืนยันการบันทึกข้อมูล",
      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
    );
  }
}

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

<template>
  <q-form @submit.prevent greedy @validation-success="onSubmit()">
    <div>
      <div class="row q-col-gutter-md q-pa-md">
        <div class="col-2">
          <datepicker
            menu-class-name="modalfix"
            v-model="year"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
            @update:modelValue="fetchRoundOption"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                lazy-rules
                outlined
                class="inputgreen"
                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>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-2">
          <q-select
            ref="inputRef"
            :readonly="roundOp.length === 0"
            dense
            outlined
            v-model="planData.kpiPeriodId"
            :options="roundOp"
            label="รอบการประเมิน"
            hide-bottom-space
            option-label="name"
            option-value="id"
            map-options
            emit-value
            lazy-rules
            class="inputgreen"
            :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
              ]"
          />
        </div>
        <div class="col-2">
          <q-input
            outlined
            v-model="planData.including"
            label="รหัสตัวชี้วัด"
            bg-color="white"
            dense
            class="inputgreen"
            :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
            hide-bottom-space
          />
        </div>
        <div class="col-6">
          <q-input
            outlined
            v-model="planData.includingName"
            label="ชื่อตัวชี้วัด"
            bg-color="white"
            dense
            class="inputgreen"
            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
            hide-bottom-space
          />
        </div>
        <div class="col-4">
          <q-input
            outlined
            v-model="planData.target"
            label="ค่าเป้าหมาย"
            bg-color="white"
            dense
            class="inputgreen"
            :rules="[(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
            hide-bottom-space
          />
        </div>
        <div class="col-4">
          <q-input
            outlined
            v-model="planData.unit"
            label="หน่วยนับ"
            bg-color="white"
            type="number"
            dense
            class="inputgreen"
            :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
            hide-bottom-space
          />
        </div>
        <div class="col-4">
          <q-input
            outlined
            v-model="planData.weight"
            label="น้ำหนัก"
            type="number"
            bg-color="white"
            dense
            class="inputgreen"
            :rules="[(val) => !!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
                    v-model="planData.achievement5"
                    label="กรอกผลสำเร็จของงาน"
                    bg-color="white"
                    dense
                    class="inputgreen"
                    :rules="[(val) => !!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
                    v-model="planData.achievement4"
                    label="กรอกผลสำเร็จของงาน"
                    bg-color="white"
                    dense
                    class="inputgreen"
                    :rules="[(val) => !!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
                    outlined
                    v-model="planData.achievement3"
                    label="กรอกผลสำเร็จของงาน"
                    bg-color="white"
                    dense
                    class="inputgreen"
                    :rules="[(val) => !!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
                    v-model="planData.achievement2"
                    label="กรอกผลสำเร็จของงาน"
                    bg-color="white"
                    dense
                    class="inputgreen"
                    :rules="[(val) => !!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
                    v-model="planData.achievement1"
                    label="กรอกผลสำเร็จของงาน"
                    bg-color="white"
                    dense
                    class="inputgreen"
                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
                    hide-bottom-space
                  />
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <div class="col-12">
          <q-input
            outlined
            v-model="planData.meaning"
            label="นิยามหรือความหมาย"
            type="textarea"
            bg-color="white"
            dense
            class="inputgreen"
            :rules="[(val) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
            hide-bottom-space
          />
        </div>
        <div class="col-12">
          <q-input
            outlined
            v-model="planData.formula"
            label="สูตรคำนวณ"
            bg-color="white"
            type="textarea"
            dense
            class="inputgreen"
            :rules="[(val) => !!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="ค้นหา"
                class="inputgreen"
              >
                <template v-slot:append>
                  <q-icon
                    v-if="filterAgency !== ''"
                    name="clear"
                    class="cursor-pointer"
                    @click="filterAgency = ''"
                  />
                  <q-icon v-else name="search" color="grey-5" />
                </template>
              </q-input>
              <q-tree
                style="height: 350px; overflow: scroll"
                dense
                :nodes="nodeAgency"
                node-key="orgTreeId"
                label-key="orgTreeName"
                selected-color="primary"
                :filter="filterAgency"
                no-results-label="ไม่พบข้อมูลที่ค้นหา"
                no-nodes-label="ไม่มีข้อมูล"
                v-model:expanded="expandedAgency"
                v-model:selected="planData.nodeId"
              >
                <template v-slot:default-header="prop">
                  <q-item
                    clickable
                    @click.stop="updateSelectedAgency(prop.node)"
                    :active="planData.nodeId == prop.node.orgTreeId"
                    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="ค้นหา"
                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
                style="height: 350px; overflow: scroll"
                dense
                :nodes="nodeplan"
                selected-color="primary"
                node-key="id"
                label-key="name"
                :filter="filter"
                no-results-label="ไม่พบข้อมูลที่ค้นหา"
                no-nodes-label="ไม่มีข้อมูล"
                v-model:expanded="expandedPlan"
                v-model:selected="planData.strategyId"
              >
                <template v-slot:default-header="prop">
                  <q-item
                    clickable
                    @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>
      <q-separator color="grey-4" />
    </div>
    <q-toolbar class="fit row wrap justify-end items-start content-start">
      <q-btn
        dense
        unelevated
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-px-md"
      >
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
    </q-toolbar>
  </q-form>
</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>
