<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import genReport from "@/plugins/genreport";

const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  success,
  showLoader,
  hideLoader,
  dialogMessageNotify,
  messageError,
} = mixin;

const separator = ref<any>("cell");
const route = useRoute();
const id = ref<string>(route.params.id as string);
const additionalSuperiorCommentRef = ref<any>(null);
const superiorCommentRef = ref<any>(null);

const title = ref<string>("");
const developmentMethod = ref<string>("");
const developmentPeriod = ref<string>("");

const evaluatorComment = ref<string>("");
const superiorComment = ref<string>("");
const additionalSuperiorComment = ref<string>("");

const superiorCommentCheck = ref<string>("");
const additionalSuperiorCheck = ref<string>("");

const weight1 = ref<number>(0);
const result1 = ref<number>(0);
const weight2 = ref<number>(0);
const result2 = ref<number>(0);
const sumWeight = ref<number>(0);
const sumResult = ref<number>(0);
const result = ref<string>("");

/** บันทึกสรุปผล ผู้ประเมิน */
function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.kpiSendToReason(id.value, "user"), {
        topicEvaluator: title.value,
        developEvaluator: developmentMethod.value,
        timeEvaluator: developmentPeriod.value,
        reasonEvaluator: evaluatorComment.value,
      })
      .then(async () => {
        await Promise.all([fetchEvaluation(), getData()]);
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** บันทึกสรุปผล ผู้บังคับบัญชา */
function onSubmitCommander() {
  if (superiorCommentCheck.value == "") {
    dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
  } else {
    dialogConfirm($q, () => {
      showLoader();
      http
        .put(config.API.kpiSendToReason(id.value, "commander"), {
          isReason: superiorCommentCheck.value == "true" ? true : false,
          reason: superiorComment.value,
        })
        .then(async () => {
          await Promise.all([fetchEvaluation(), getData()]);
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  }
}

/** บันทึกสรุปผล ผู้บังคับบัญชาเหนือขึ้นไป */
function onSubmitCommanderHigh() {
  if (additionalSuperiorCheck.value == "") {
    dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
  } else {
    dialogConfirm($q, () => {
      showLoader();
      http
        .put(config.API.kpiSendToReason(id.value, "commanderHigh"), {
          isReason: additionalSuperiorCheck.value == "true" ? true : false,
          reason: additionalSuperiorComment.value,
        })
        .then(async () => {
          await Promise.all([fetchEvaluation(), getData()]);
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  }
}

/** เมื่อเห็นด้วย ล้างค่าความคิดเห็น */
function resetCommander() {
  superiorComment.value = "";
  superiorCommentRef.value.resetValidation();
}

/** เมื่อเห็นด้วย ล้างค่าความคิดเห็น */
function resetCommanderHigh() {
  additionalSuperiorComment.value = "";
  additionalSuperiorCommentRef.value.resetValidation();
}

/**
 * ดึงข้อมูลการประเมิน
 */
async function fetchEvaluation() {
  await http
    .get(config.API.kpiEvaluationUser + `/${id.value}`)
    .then(async (res) => {
      const data = res.data.result;
      // เก็บข้อมูลการประเมินเข้า store
      store.dataEvaluation = await data;

      // เช็คว่าถ้าผู้รับการประเมินเปิดการประเมินไปแล้วจะไม่ยิงอัปเดตสถานะการเปิดดูอีก แต่ถ้ายังไม่เคยเปิดจะยิงเพื่ออัปเดต
      if (
        !store.dataEvaluation.isOpen &&
        data.profileId == store.dataProfile.profileId
      ) {
        userOpen();
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function userOpen() {
  http.get(config.API.openPoint(id.value)).then(async () => {});
}

/** ดึงรายละเอียด ผลการประเมิน */
async function getData() {
  showLoader();
  await http
    .get(config.API.kpiSendToGet(id.value))
    .then(async (res) => {
      const data = await res.data.result;
      title.value = data.topicEvaluator;
      developmentMethod.value = data.developEvaluator;
      developmentPeriod.value = data.timeEvaluator;
      evaluatorComment.value = data.reasonEvaluator;
      superiorCommentCheck.value =
        data.isReasonCommander != null
          ? data.isReasonCommander.toString()
          : null;
      superiorComment.value = data.reasonCommander;
      additionalSuperiorCheck.value =
        data.isReasonCommanderHigh != null
          ? data.isReasonCommanderHigh.toString()
          : null;
      additionalSuperiorComment.value = data.reasonCommanderHigh;
      result1.value = data.totalPoint1;
      result2.value = data.totalPoint2_1 + data.totalPoint2_2;
      weight1.value = data.weightPoint1;
      weight2.value = data.weightPoint2;
      sumWeight.value = data.weightPoint1 + data.weightPoint2;
      sumResult.value = data.summaryPoint;
      result.value = data.evaluationResults;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันดาวน์โหลดรายงาน
 */
async function downloadReport() {
  showLoader();
  await http
    .get(config.API.kpiReportUser(id.value))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        "แบบรายงานผลการปฏิบัติราชการ " +
          store.dataEvaluation.prefix +
          store.dataEvaluation.firstName +
          " " +
          store.dataEvaluation.lastName
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await Promise.all([fetchEvaluation(), getData()]);
});
</script>

<template>
  <div class="q-pa-sm">
    <!-- 1-4 สรุปผลการประเมิน -->
    <q-card bordered>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold">
            สรุปผลการประเมิน

            <q-btn
              v-if="store.dataEvaluation.evaluationStatus === 'KP7'"
              outline
              flat
              dense
              color="blue"
              icon="mdi-download"
              size="12px"
              class="q-mr-md"
              @click="downloadReport"
            >
              <q-tooltip>ดาวน์โหลดแบบรายงานผลการปฏิบัติราชการ</q-tooltip>
            </q-btn>
          </q-toolbar-title>
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-markup-table
                :separator="separator"
                flat
                bordered
                class="custom-table2"
              >
                <thead>
                  <tr>
                    <th class="text-left txt-customHead">
                      องค์ประกอบการประเมิน
                    </th>
                    <th class="text-left txt-customHead">น้ำหนักคะแนน</th>
                    <th class="text-left txt-customHead">ผลการประเมิน</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="text-left">องค์ประกอบที่ 1 ผลสัมฤทธิ์ของงาน</td>
                    <td class="text-left">{{ weight1 }}</td>
                    <td class="text-left">{{ result1 }}</td>
                  </tr>
                  <tr>
                    <td class="text-left">
                      องค์ประกอบที่ 2 พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
                    </td>
                    <td class="text-left">{{ weight2 }}</td>
                    <td class="text-left">{{ result2 }}</td>
                  </tr>
                  <tr>
                    <td class="text-right text-bold" style="font-size: 16px">
                      รวม
                    </td>
                    <td class="text-left">{{ sumWeight }}</td>
                    <td class="text-left">{{ sumResult }}</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ระดับผลการประเมิน</span>
              </div>
            </div>
            <div class="col-12 no-pointer">
              <div class="column">
                <q-radio
                  v-model="result"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="EXCELLENT"
                  label="ดีเด่น (คะแนนร้อยละ 90.00 ขึ้นไป)"
                />
                <q-radio
                  v-model="result"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="VERY_GOOD"
                  label="ดีมาก (คะแนนร้อยละ 80.00 - 89.99)"
                />
                <q-radio
                  v-model="result"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="GOOD"
                  label="ดี (คะแนนร้อยละ 70.00 - 79.99)"
                />
                <q-radio
                  v-model="result"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="FAIR"
                  label="พอใช้ (คะแนนร้อยละ 60.00 - 69.99)"
                />
                <q-radio
                  v-model="result"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="IMPROVEMENT"
                  label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ 60.00)"
                />
              </div>
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ความรู้/ทักษะ/สมรรถนะ</span>
              </div>
            </div>

            <div class="col-12">
              <q-input
                v-model="title"
                outlined
                lazy-rules
                hide-bottom-space
                type="textarea"
                label="ชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา"
                :readonly="
                  store.rolePerson !== 'EVALUATOR' ||
                  store.dataEvaluation.evaluationStatus !== 'SUMMARY'
                "
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentMethod"
                outlined
                lazy-rules
                hide-bottom-space
                type="textarea"
                label="วิธีการพัฒนา"
                :readonly="
                  store.rolePerson !== 'EVALUATOR' ||
                  store.dataEvaluation.evaluationStatus !== 'SUMMARY'
                "
                :rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="developmentPeriod"
                outlined
                hide-bottom-space
                lazy-rules
                type="textarea"
                label="ช่วงเวลาการพัฒนา"
                :readonly="
                  store.rolePerson !== 'EVALUATOR' ||
                  store.dataEvaluation.evaluationStatus !== 'SUMMARY'
                "
                :rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
              />
            </div>
            <div class="col-12">
              <div class="text-weight-bold text-body2">
                <span class="txt-under text-blue-6">ความเห็นของผู้ประเมิน</span>
              </div>
            </div>
            <div class="col-12">
              <q-input
                v-model="evaluatorComment"
                outlined
                lazy-rules
                type="textarea"
                hide-bottom-space
                label="ความเห็นของผู้ประเมิน"
                :readonly="
                  store.rolePerson !== 'EVALUATOR' ||
                  store.dataEvaluation.evaluationStatus !== 'SUMMARY'
                "
                :rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator
          v-if="
            store.rolePerson == 'EVALUATOR' &&
            store.dataEvaluation.evaluationStatus == 'SUMMARY'
          "
        />
        <q-card-actions
          v-if="
            store.rolePerson == 'EVALUATOR' &&
            store.dataEvaluation.evaluationStatus == 'SUMMARY'
          "
          align="right"
        >
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>

    <q-card
      bordered
      class="q-mt-md"
      v-if="
        evaluatorComment !== null &&
        store.dataEvaluation.commanderId !== null &&
        store.dataEvaluation.evaluationStatus !== 'SUMMARY'
      "
    >
      <q-form greedy @submit.prevent @validation-success="onSubmitCommander">
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold"
            >ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป</q-toolbar-title
          >
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div class="column">
                <q-radio
                  v-model="superiorCommentCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="true"
                  :disable="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER'
                  "
                  label="เห็นด้วยกับผลการประเมิน"
                  @click="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER'
                      ? ''
                      : resetCommander()
                  "
                />
                <q-radio
                  v-model="superiorCommentCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="false"
                  label="มีความเห็นต่าง ดังนี้"
                  :disable="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER'
                  "
                />
              </div>
            </div>

            <div class="col-12">
              <q-input
                lazy-rules
                v-model="superiorComment"
                outlined
                :readonly="
                  superiorCommentCheck == 'true' ||
                  store.dataEvaluation.evaluationStatus !== 'SUMMARY_COMMANDER'
                "
                type="textarea"
                label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
                hide-bottom-space
                ref="superiorCommentRef"
                :rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator
          v-if="
            store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER' &&
            store.rolePerson === 'COMMANDER'
          "
        />
        <q-card-actions
          align="right"
          v-if="
            store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER' &&
            store.rolePerson === 'COMMANDER'
          "
        >
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>

    <q-card
      bordered
      class="q-mt-md"
      v-if="
        store.dataEvaluation.evaluationStatus !== 'SUMMARY' &&
        store.dataEvaluation.evaluationStatus !== 'SUMMARY_COMMANDER' &&
        store.dataEvaluation.commanderHighId !== null
      "
    >
      <q-form
        greedy
        @submit.prevent
        @validation-success="onSubmitCommanderHigh"
      >
        <q-toolbar>
          <q-toolbar-title class="text-subtitle2 text-bold"
            >ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-toolbar-title
          >
        </q-toolbar>
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div class="column">
                <q-radio
                  :disable="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER_HIGH'
                  "
                  v-model="additionalSuperiorCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="true"
                  label="เห็นด้วยกับผลการประเมิน"
                  @click="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER_HIGH'
                      ? ''
                      : resetCommanderHigh()
                  "
                />
                <q-radio
                  :disable="
                    store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER_HIGH'
                  "
                  v-model="additionalSuperiorCheck"
                  checked-icon="task_alt"
                  unchecked-icon="panorama_fish_eye"
                  val="false"
                  label="มีความเห็นต่าง ดังนี้"
                />
              </div>
            </div>
            <div class="col-12">
              <q-input
                lazy-rules
                ref="additionalSuperiorCommentRef"
                v-model="additionalSuperiorComment"
                outlined
                hide-bottom-space
                type="textarea"
                label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
                :readonly="
                  additionalSuperiorCheck == 'true' ||
                  store.dataEvaluation.evaluationStatus !==
                    'SUMMARY_COMMANDER_HIGH'
                "
                :rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator
          v-if="
            store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER_HIGH'
          "
        />
        <q-card-actions
          align="right"
          v-if="
            store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER_HIGH'
          "
        >
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </div>
</template>
<style scoped>
.no-pointer {
  pointer-events: none;
}
.txt-customHead {
  font-size: 14px;
  font-weight: 500;
}
.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>
