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

import config from "@/app.config";
import http from "@/plugins/http";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
import type { EvaluationIndicatorType } from "@/modules/08_KPI/interface/response/index";

import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import DialogHeader from "@/components/DialogHeader.vue";

const dataListCriteria = ref<ListCriteria[]>([]);
const modalReject = ref<boolean>(false); // ตัวแปร dialog ไม่อนุมัติตีกลับให้แก้ไข
const reason = ref<string>(""); //ตัวแปร เหตุผลการตีกลับ

const modalCriteria = ref<boolean>(false);
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const {
  hideLoader,
  messageError,
  success,
  showLoader,
  dialogRemove,
  dialogConfirm,
} = useCounterMixin();
const store = useKpiDataStore();

const evaluationId = ref<string>(route.params.id.toString());

const rows_01 = ref<EvaluationIndicatorType[]>();
const rows_02 = ref<EvaluationIndicatorType[]>();
const rows_03 = ref<EvaluationIndicatorType[]>();

const totalResults1 = ref<number>(0);
const totalResults2 = ref<number>(0);
const totalResults3 = ref<number>(0);

const weightPlanned = ref<number>(0);
const weightRole = ref<number>(0);
const weightAssigned = ref<number>(0);
const resultPlanned = ref<number>(0);
const resultRole = ref<number>(0);
const resultAssigned = ref<number>(0);

function fetchListPlanned() {
  http
    .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: EvaluationIndicatorType) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));
      rows_01.value = newRow;

      if (newRow.length > 0) {
        resultPlanned.value = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );
        store.excusiveIndicator1PercentVal = resultPlanned.value;

        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        weightPlanned.value = weight;
        store.indicatorWeight1Total = Number(weight);

        totalResults1.value =
          (resultPlanned.value * store.excusiveIndicator1Weight) / weight;
        store.excusiveIndicator1ScoreVal = totalResults1.value;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchListRole() {
  http
    .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: EvaluationIndicatorType) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));
      rows_02.value = newRow;

      if (newRow.length > 0) {
        resultRole.value = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );

        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        weightRole.value = weight;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchAssigned() {
  http
    .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      const newRow = data.map((e: any) => ({
        ...e,
        evaluationResults: (e.point / 5) * e.weight,
      }));

      rows_03.value = newRow;

      if (newRow.length > 0) {
        resultAssigned.value = newRow.reduce(
          (sum: number, e: any) => sum + e.evaluationResults,
          0
        );

        store.excusiveIndicator2PercentVal = resultAssigned.value;

        const weight = newRow.reduce(
          (sum: number, e: any) => sum + e.weight,
          0
        );

        weightAssigned.value = weight;
        store.indicatorWeight2Total = Number(weight);

        totalResults3.value =
          (resultAssigned.value * store.excusiveIndicator2Weight) / weight;
        store.excusiveIndicator2ScoreVal = totalResults3.value;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function getCriteria() {
  http
    .get(config.API.KpiEvaluationInfo)
    .then((res) => {
      const data = res.data.result.data;
      dataListCriteria.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

const isShowScore = computed(() => {
  return store.tabMain === "3";
});

watch(
  [weightPlanned, weightRole, weightAssigned],
  ([newA, newB, newC], [prevA, prevB, prevC]) => {
    if (newA !== prevA || newB !== prevB || newC !== prevC) {
      store.indicatorWeightTotal =
        Number(weightPlanned.value) +
        Number(weightAssigned.value) +
        Number(weightRole.value);
    }
  }
);

watch(
  [resultPlanned, resultRole, resultAssigned],
  ([newA, newB, newC], [prevA, prevB, prevC]) => {
    if (newA !== prevA || newB !== prevB || newC !== prevC) {
      store.indicatorPercentVal =
        Number(resultPlanned.value) +
        Number(resultRole.value) +
        Number(resultAssigned.value);

      store.indicatorScoreVal =
        store.indicatorPercentVal *
        ((store.dataEvaluation.isProbation
          ? store.indicatorProbationScore
          : groupNo.value == 2
          ? store.excusiveIndicatorScore
          : store.indicatorScore) /
          100);
    }
  }
);

function rejectAgreement() {
  modalReject.value = true;
}

async function onSubmitReject() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.kpiReject(evaluationId.value), {
        reason: reason.value,
        actor: store.roleText(store.rolePerson),
      })
      .then((res) => {
        router.push(`/KPI-evaluator`);
        success($q, `บันทึกข้อมูลสำเร็จ`);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

// check group of form
const groupNo = computed(() => {
  if (
    store.dataEvaluation.posExecutiveName == "ปลัดกรุงเทพมหานคร" ||
    store.dataEvaluation.posExecutiveName == "รองปลัดกรุงเทพมหานคร" ||
    store.dataEvaluation.posExecutiveName == "ผู้อำนวยการสำนัก" ||
    store.dataEvaluation.posExecutiveName == "หัวหน้าสำนักงานก.ก." ||
    store.dataEvaluation.posExecutiveName == "หัวหน้าสำนักงาน ก.ก." ||
    store.dataEvaluation.posExecutiveName ==
      "หัวหน้าสำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร" ||
    store.dataEvaluation.posExecutiveName == "เลขานุการสภากรุงเทพมหานคร" ||
    store.dataEvaluation.posExecutiveName == "ผู้อำนวยการเขต" ||
    store.dataEvaluation.posExecutiveName ==
      "หัวหน้าส่วนราชการในสังกัดสำนักปลัดกรุงเทพมหานคร"
  ) {
    return 1;
  } else if (
    store.dataEvaluation.posTypeName == "อำนวยการ" ||
    store.dataEvaluation.posTypeName == "บริหาร" ||
    (store.dataEvaluation.posTypeName == "วิชาการ" &&
      store.dataEvaluation.posExecutiveName != null) ||
    (store.dataEvaluation.posTypeName == "ทั่วไป" &&
      store.dataEvaluation.posLevelName == "อาวุโส" &&
      store.dataEvaluation.posExecutiveName != null)
  ) {
    return 2;
  } else {
    return 3;
  }
});

onMounted(() => {
  getCriteria();
  fetchListPlanned();
  fetchListRole();
  fetchAssigned();
  setTimeout(() => {
    hideLoader();
  }, 2000);
});
</script>

<template>
  <q-scroll-area
    style="height: 100vh; width: auto"
    class="bg-white row col-12 text-dark q-pa-md"
  >
    <div class="row items-center full-width">
      <div
        v-if="
          store.dataEvaluation.isReject == true &&
          store.dataEvaluation.evaluationStatus !== 'COMPLETE' &&
          store.dataEvaluation.evaluationStatus !== 'KP7'
        "
        class="col-12 q-pb-sm q-gutter-sm"
      >
        <q-banner
          inline-actions
          bordered
          class="bg-orange-1 text-orange border-orange"
        >
          <div class="row items-center">
            <div class="column q-pl-sm">
              <!-- <div class="text-weight-bold q-ma-none">กรุณาแก้ไขข้อตกลง</div> -->
              <span>{{
                `${
                  store.dataEvaluation.actorNameReject
                    ? store.dataEvaluation.actorNameReject
                    : ""
                } ${
                  store.dataEvaluation.actorReject
                    ? `(${store.dataEvaluation.actorReject})`
                    : ``
                }`
              }}</span>
              <span
                >เหตุผลการตีกลับ : {{ store.dataEvaluation.reasonReject }}</span
              >
            </div>
          </div>
        </q-banner>
      </div>
      <span class="txt-under text-blue-6 text-weight-bold text-body2"
        >องค์ประกอบที่ 1
      </span>
      <span class="q-ml-sm text-weight-bold text-body2"> ผลสัมฤทธิ์ของงาน</span>
      <q-space />
      <q-btn
        v-if="
          store.rolePerson !== 'USER' &&
          store.tabOpen == 1 &&
          ((store.dataEvaluation.evaluationStatus == 'NEW_EVALUATOR' &&
            store.rolePerson == 'EVALUATOR') ||
            (store.dataEvaluation.evaluationStatus == 'NEW_COMMANDER' &&
              store.rolePerson == 'COMMANDER') ||
            (store.dataEvaluation.evaluationStatus == 'NEW_COMMANDER_HIGH' &&
              store.rolePerson == 'COMMANDERHIGH'))
        "
        :disabled="store.dataEvaluation.evaluatorId == null"
        unelevated
        outline
        color="grey-2"
        text-color="red"
        size="md"
        label="ไม่อนุมัติตีกลับให้แก้ไข"
        @click="rejectAgreement()"
      >
        <q-tooltip>ไม่อนุมัติตีกลับให้แก้ไข</q-tooltip>
      </q-btn>
    </div>
    <div class="q-gutter-md q-mt-sm">
      <!-- องค์ประกอบที่ 1 -->
      <div v-if="groupNo == 1">
        <Work
          v-model:data="rows_01"
          :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
          :page="1"
          :fetchList="fetchListPlanned"
          :total="totalResults1"
        />

        <div v-if="isShowScore">
          <q-table
            flat
            dense
            bordered
            :rows="[
              {
                name: 'รวมผลการประเมิน (ร้อยละ)',
                value: store.excusiveIndicator1PercentVal.toFixed(2),
              },
              {
                name: 'ผลการประเมินมิติที่ 1 (คะแนน)',
                value: store.excusiveIndicator1ScoreVal.toFixed(2),
              },
            ]"
            :columns="[
              {
                name: 'name',
                field: 'name',
                label: 'name',
                style: 'font-size: 14px',
              },
              {
                name: 'value',
                field: 'value',
                label: 'value',
                style: 'font-size: 14px; font-weight: bold',
              },
            ]"
            row-key="name"
            hide-header
            hide-bottom
            class="q-mt-xs q-mb-md"
          />
        </div>

        <div v-else class="q-mt-md"></div>

        <Work
          v-model:data="rows_03"
          :title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
          :page="3"
          :fetchList="fetchAssigned"
          :total="totalResults3"
        />

        <div v-if="isShowScore">
          <q-table
            flat
            dense
            bordered
            :rows="[
              {
                name: 'ผลการประเมินมิติที่ 2 (คะแนน)',
                value: store.excusiveIndicator2ScoreVal.toFixed(2),
              },
            ]"
            :columns="[
              {
                name: 'name',
                field: 'name',
                label: 'name',
                style: 'font-size: 14px',
              },
              {
                name: 'value',
                field: 'value',
                label: 'value',
                style: 'font-size: 14px; font-weight: bold',
              },
            ]"
            row-key="name"
            hide-header
            hide-bottom
            class="q-mt-xs q-mb-md"
          />

          <div class="row text-body2 text-weight-bold">
            <div class="col-12 text-center row justify-center">
              <span
                >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (มิติที่ 1 + มิติที่ 2)
                (คะแนนเต็ม
                {{ store.excusiveIndicatorScore }}
                คะแนน)</span
              >
              <div class="text-primary q-pl-md">
                {{
                  (
                    store.excusiveIndicator1ScoreVal +
                    store.excusiveIndicator2ScoreVal
                  ).toFixed(2)
                }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else>
        <Work
          v-model:data="rows_01"
          :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
          :page="1"
          :fetchList="fetchListPlanned"
          :total="totalResults1"
        />
        <Work
          v-model:data="rows_02"
          :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
          :page="2"
          :fetchList="fetchListRole"
          :total="totalResults2"
        />
        <Work
          v-model:data="rows_03"
          :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
          :page="3"
          :fetchList="fetchAssigned"
          :total="totalResults3"
        />

        <div v-if="isShowScore">
          <q-table
            flat
            dense
            bordered
            :rows="[
              {
                name: 'รวมผลการประเมิน (ร้อยละ)',
                value: store.indicatorPercentVal.toFixed(2),
              },
            ]"
            :columns="[
              {
                name: 'name',
                field: 'name',
                label: 'name',
                style: 'font-size: 14px',
              },
              {
                name: 'value',
                field: 'value',
                label: 'value',
                style: 'font-size: 14px; font-weight: bold',
              },
            ]"
            row-key="name"
            hide-header
            hide-bottom
            class="q-mt-xs q-mb-md"
          />

          <div class="row text-body2 text-weight-bold">
            <div class="col-12 text-center row justify-center">
              <span
                >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
                {{
                  store.dataEvaluation.isProbation
                    ? store.indicatorProbationScore
                    : groupNo == 2
                    ? store.excusiveIndicatorScore
                    : store.indicatorScore
                }}
                คะแนน)</span
              >
              <div class="text-primary q-pl-md">
                {{ store.indicatorScoreVal.toFixed(2) }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <q-separator size="3px" class="q-my-lg" />

      <!-- องค์ประกอบที่ 2 -->
      <div class="text-weight-bold text-body2 q-mb-sm">
        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
      </div>

      <Competency v-model:dataListCriteria="dataListCriteria" />

      <q-table
        v-if="isShowScore"
        flat
        dense
        bordered
        :rows="[
          {
            name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
              groupNo == 3
                ? store.dataEvaluation.isProbation
                  ? store.competencyProbationScore
                  : store.competencyScore
                : store.excusiveCompetencyScore
            } คะแนน)`,
            value: store.competencyScoreVal.toFixed(2),
          },
        ]"
        :columns="[
          {
            name: 'name',
            field: 'name',
            label: 'name',
            style: 'font-size: 14px',
          },
          {
            name: 'value',
            field: 'value',
            label: 'value',
            style: 'font-size: 14px; font-weight: bold',
          },
        ]"
        row-key="name"
        hide-header
        hide-bottom
        class="q-mt-xs q-mb-md"
      />

      <div v-if="groupNo == 3">
        <Develop />

        <div v-if="isShowScore">
          <q-table
            flat
            dense
            bordered
            :rows="[
              {
                name: `ผลการประเมินการพัฒนาตนเอง (คะแนนเต็ม ${
                  store.dataEvaluation.isProbation
                    ? store.devProbationScore
                    : store.devScore
                } คะแนน)`,
                value: store.devScoreVal.toFixed(2),
              },
            ]"
            :columns="[
              {
                name: 'name',
                field: 'name',
                label: 'name',
                style: 'font-size: 14px',
              },
              {
                name: 'value',
                field: 'value',
                label: 'value',
                style: 'font-size: 14px; font-weight: bold',
              },
            ]"
            row-key="name"
            hide-header
            hide-bottom
            class="q-mt-xs q-mb-md"
          />
        </div>
      </div>

      <div v-if="isShowScore">
        <div v-if="groupNo == 3" class="row text-body2 text-weight-bold">
          <div class="col-12 text-center row justify-center">
            <span>
              สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง)
              (คะแนนเต็ม
              {{
                store.dataEvaluation.isProbation
                  ? store.competencyDevProbationScore
                  : store.competencyDevScore
              }}
              คะแนน)
            </span>
            <div class="text-primary q-pl-md">
              {{ (store.competencyScoreVal + store.devScoreVal).toFixed(2) }}
            </div>
          </div>
        </div>
        <div v-else class="row text-body2 text-weight-bold">
          <div class="col-12 text-center row justify-center">
            <span
              >สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ) (คะแนนเต็ม
              {{ store.competencyScore }} คะแนน)</span
            >
            <div class="text-primary q-pl-md">
              {{ store.competencyScoreVal.toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-scroll-area>

  <q-dialog persistent v-model="modalReject">
    <q-card style="width: 40vw; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmitReject">
        <DialogHeader
          :tittle="`ไม่อนุมัติตีกลับให้แก้ไข`"
          :close="() => ((modalReject = false), (reason = ''))"
        />
        <q-separator />

        <q-card-section class="q-pa-md">
          <q-input
            v-model="reason"
            type="textarea"
            rows="5"
            dense
            outlined
            label="เหตุผลการตีกลับ"
            hide-bottom-space
            :rules="[ (val:string) => !!val ||
            `${'กรุณาระบุเหตุผลการตีกลับ'}`, ]"
          >
          </q-input>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <DialogListCriteria
    v-model:modal="modalCriteria"
    v-model:dataListCriteria="dataListCriteria"
  />
</template>

<style scoped>
.txt-under {
  text-decoration: underline;
}

.custom-table2 {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
  }

  .q-table td:nth-of-type(2) {
    z-index: 3 !important;
  }

  .q-table th:nth-of-type(2),
  .q-table td:nth-of-type(2) {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }

  .q-btn-group--outline > .q-btn-item:not(:last-child):before {
    border-right: 1px solid #c4c4c4;
  }
  .q-btn-group--outline > .q-btn-item.active {
    color: #2196f3 !important;
    background-color: #fff;
  }
  .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
    border: 1px solid #2196f3;
  }
}
</style>
