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

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

import type { FormDataRole } from "@/modules/01_metadataNew/interface/request/Main";
import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();

const heightSize = ref<string>("224");
const filter = ref<string>("");
const node = ref<any>([]);
const expanded = ref<string[]>([]);
const orgName = ref<string>("");
const nodeId = ref<string>("");

const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
const {
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogConfirm,
  dialogMessageNotify,
} = useCounterMixin();
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");

const modalDialogSelect = ref<boolean>(false);
const form = reactive<FormDataRole>({
  position: "", //ตำแหน่งในสายงาน
  year: new Date().getFullYear(), //ปีงบประมาณ
  round: "", //รอบการประเมิน
  org: "", //หน่วยงาน/ส่วนราชการ
  including: "", //รหัสตัวชี้วัด
  includingName: "", //ชื่อตัวชี้วัด
  target: "", //ค่าเป้าหมาย
  unit: "", //หน่วยนับ
  weight: "", //น้ำหนัก
  meaning: "", //นิยามหรือความหมาย
  formula: "", //สูตรคำนวณ
  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน

  node: null,
  nodeId: null,
  orgRevisionId: null,
});

const fieldLabels = {
  score5: "5",
  score4: "4",
  score3: "3",
  score2: "2",
  score1: "1",
};

const formScore = reactive<any>({
  score5: "",
  score4: "",
  score3: "",
  score2: "",
  score1: "",
});

const positionOp = ref<DataOption[]>([]);
const positionMainOp = ref<DataOption[]>([]);

/** Option  รอบการประเมิน*/
const roundOp = ref<DataOption[]>([
  { id: "APR", name: "รอบเมษายน" },
  { id: "OCT", name: "รอบตุลาคม" },
]);

/**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
 * @param update  อัพเดทค่า
 * @param refData ดาต้าที่ต้องการฟิลเตอร์
 */
function filterOption(val: any, update: Function) {
  update(() => {
    positionOp.value = positionMainOp.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
  });
}

/** ดึงข้อมูลตำแหน่ง */
function getOptions() {
  http.get(config.API.orgSalaryPosition).then((res) => {
    const dataOp = res.data.result;
    const uniqueNames = new Set();
    const filteredData = dataOp
      .filter((item: any) => {
        if (!uniqueNames.has(item.positionName)) {
          uniqueNames.add(item.positionName);
          return true;
        }
        return false;
      })
      .map((item: any) => ({
        id: item.positionName,
        name: item.positionName,
      }));

    positionMainOp.value = filteredData;
  });
}

/** เปิด Dialog หน่วยงาน */
function selectAgency() {
  modalDialogSelect.value = true;
}

/** บันทึกข้อมูล */
function onSubmit() {
  const url = id.value
    ? config.API.kpiRoleMainList + `/${id.value}`
    : config.API.kpiRoleMainList;

  const body = {
    year: form.year == 0 ? null : form.year,
    position: form.position, //ตำแหน่ง
    period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
    includingName: form.includingName, //ชื่อตัวชี้วัด
    target: form.target, //ค่าเป้าหมาย
    unit: form.unit, //หน่วยนับ
    weight: form.weight, //น้ำหนัก
    achievement1: formScore.score1, //ผลสำเร็จของงาน 1
    achievement2: formScore.score2, //ผลสำเร็จของงาน 2
    achievement3: formScore.score3, //ผลสำเร็จของงาน 3
    achievement4: formScore.score4, //ผลสำเร็จของงาน 4
    achievement5: formScore.score5, //ผลสำเร็จของงาน 5
    meaning: form.meaning, //นิยามหรือความหมาย
    formula: form.formula, //สูตรคำนวณ
    documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน

    node: form.node, //ระดับหน่วยงาน
    nodeId: form.nodeId, //id หน่วยงาน
    orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
  };

  if (form.nodeId == null) {
    dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
  } else {
    dialogConfirm($q, () => {
      showLoader();
      http[id.value ? "put" : "post"](url, body)
        .then(() => {
          success($q, "บันทึกสำเร็จ");
          id.value ? getDetail() : router.push(`/KPI-indicator-role`);
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    });
  }
}

//
//
function getDetail() {
  showLoader();
  http
    .get(config.API.kpiRoleMainList + `/${id.value}`)
    .then((res) => {
      const data = res.data.result;
      form.position = data.position;
      form.year = data.year == null ? 0 : data.year;
      form.round = data.round;
      form.including = data.including;
      form.includingName = data.includingName;
      form.target = data.target;
      form.unit = data.unit;
      form.weight = data.weight;
      form.meaning = data.meaning;
      form.formula = data.formula;

      formScore.score1 = data.achievement1;
      formScore.score2 = data.achievement2;
      formScore.score3 = data.achievement3;
      formScore.score4 = data.achievement4;
      formScore.score5 = data.achievement5;

      form.node = data.node;
      form.nodeId = data.nodeId;
      form.orgRevisionId = data.orgRevisionId;
      const arrayExpanded = [
        data.root,
        data.child1,
        data.child2,
        data.child3,
        data.child4,
      ];
      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchActive() {
  showLoader();
  http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      fetchTree(data.activeId);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

async function fetchTree(id: string) {
  showLoader();
  http
    .get(config.API.orgByid(id.toString()))
    .then((res) => {
      const data = res.data.result;
      node.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function updateSelected(data: any) {
  nodeId.value = data.orgTreeId;
  orgName.value = data.orgTreeName;
  form.node = data.orgLevel;
  form.nodeId = data.orgTreeId;
  form.orgRevisionId = data.orgRevisionId;
}

function onResize(size: any) {
  heightSize.value = `${size.height - 99}`;
}

function setModel(val: string) {
  form.position = val;
}

onMounted(() => {
  fetchActive();
//   getOptions();
//   if (id.value !== "") {
//     getDetail();
//   }
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.go(-1)"
    />
    {{ `${title}งานที่ได้รับมอบหมาย` }}
  </div>
  <q-card flat>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <div class="col-8">
            <q-select
              dense
              :model-value="form.position"
              label="ตำแหน่งในสายงาน"
              outlined
              emit-value
              map-options
              fill-input
              hide-selected
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
              hide-bottom-space
              option-label="name"
              option-value="id"
              class="inputgreen"
              :options="positionOp"
              use-input
              @input-value="setModel"
              @filter="(inputValue:any,doneFn:Function) => filterOption(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-2">
            <datepicker
              menu-class-name="modalfix"
              v-model="form.year"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
              @update:model-value="form.round = ''"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  class="inputgreen"
                  outlined
                  :model-value="
                    form.year === 0 ? null : Number(form.year) + 543
                  "
                  :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="form.year"
                      name="cancel"
                      class="cursor-pointer"
                      @click.stop.prevent="
                        form.year = 0;
                        form.round = '';
                      "
                    />
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-2">
            <q-select
              :readonly="form.year == 0"
              dense
              outlined
              v-model="form.round"
              :options="roundOp"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              input-class="text-red"
              label="รอบการประเมิน"
              class="inputgreen"
            />
          </div>
          <div class="col-2" v-if="id">
            <q-input
              label="ลำดับ/รหัสตัวชี้วัด"
              v-model="form.including"
              outlined
              readonly
              dense
              class="inputgreen"
            />
          </div>
          <div class="col-4">
            <q-input
              label="ชื่อตัวชี้วัด"
              v-model="form.includingName"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="ค่าเป้าหมาย"
              v-model="form.target"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="หน่วยนับ"
              v-model="form.unit"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-2">
            <q-input
              label="น้ำหนัก"
              v-model="form.weight"
              outlined
              dense
              class="inputgreen"
              lazy-rules
              :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก'}`,]"
              hide-bottom-space
            />
          </div>
          <div class="col-4">
            <q-card flat bordered class="full-height">
              <q-card-section class="bg-grey-3 q-pa-sm">
                <div class="text-dark text-body2 text-weight-medium">
                  หน่วยงาน/ส่วนราชการ
                </div>
              </q-card-section>
              <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-scroll-area
                  visible
                  :style="{ height: `${heightSize}px`, marginTop: '5px' }"
                >
                  <q-tree
                    dense
                    :nodes="node"
                    node-key="orgTreeId"
                    label-key="orgTreeName"
                    v-model:expanded="expanded"
                    :filter="filter"
                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
                    no-nodes-label="ไม่มีข้อมูล"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="updateSelected(prop.node)"
                        :active="form.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-scroll-area>
              </q-card-section>
            </q-card>
          </div>
          <div class="col-8">
            <q-card flat bordered>
              <q-resize-observer @resize="onResize" />
              <q-card-section class="bg-grey-3 q-pa-sm">
                <div class="row text-dark text-body2 text-weight-medium">
                  <div class="text-center col-4">ระดับคะแนน</div>
                  <div class="col-8">ผลสำเร็จของงาน</div>
                </div>
              </q-card-section>
              <q-card-section class="q-pa-none">
                <div
                  v-for="(field, index) in Object.keys(fieldLabels)"
                  :key="index + 1"
                >
                  <div class="row q-pa-sm">
                    <div
                      class="col-4 text-center text-body1 text-weight-bold self-center"
                    >
                      {{ fieldLabels[field as keyof typeof fieldLabels] }}
                    </div>
                    <div class="col-8 text-left">
                      <!-- <q-field
                    class="q_field_p_none"
                    ref="fieldRef"
                    v-model="formScore[field]"
                    label-slot
                    borderless
                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                    hide-bottom-space
                  >
                    <template #control>
                      <q-editor
                        class="full-width"
                        v-model="formScore[field]"
                        :dense="$q.screen.lt.md"
                        min-height="5rem"
                        :toolbar="[
                          [
                            'bold',
                            'italic',
                            'strike',
                            'underline',
                            'subscript',
                            'superscript',
                          ],

                          ['unordered', 'ordered'],
                        ]"
                        :fonts="{
                          arial: 'Arial',
                          arial_black: 'Arial Black',
                          comic_sans: 'Comic Sans MS',
                          courier_new: 'Courier New',
                          impact: 'Impact',
                          lucida_grande: 'Lucida Grande',
                          times_new_roman: 'Times New Roman',
                          verdana: 'Verdana',
                        }"
                      />
                    </template>
                  </q-field> -->
                      <q-input
                        v-model="formScore[field]"
                        dense
                        outlined
                        class="inputgreen"
                        label="กรอกผลสำเร็จของงาน"
                        :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                        hide-bottom-space
                      />
                    </div>
                  </div>
                  <div
                    class="col-12"
                    v-if="index !== Object.keys(fieldLabels).length - 1"
                  >
                    <q-separator />
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
          <div class="col-12">
            <q-input
              v-model="form.meaning"
              label="นิยามหรือความหมาย"
              dense
              outlined
              lazy-rules
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`,]"
              hide-bottom-space
              type="textarea"
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="form.formula"
              label="สูตรคำนวณ"
              dense
              outlined
              lazy-rules
              class="inputgreen"
              :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`,]"
              hide-bottom-space
              type="textarea"
            />
          </div>
          <div class="col-12">
            <q-input
              class="inputgreen"
              v-model="form.documentInfoEvidence"
              label="ข้อมูลเอกสารหลักฐาน"
              outlined
              dense
              type="textarea"
            ></q-input>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn color="public" label="บันทึก" type="submit" unelevated>
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</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>
