<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { useQuasar, type QTableProps } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";

/** importType*/
import type { DataAchievement } from "@/modules/14_KPI/interface/index/Main";
import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";

/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const itemsDevelopment = uselistDevelopmentDataStore();
const { showLoader, messageError, hideLoader } = useCounterMixin();

/**
 * use
 */

const development = ref<any[]>([]);
const reasonDevelopment70 = ref<string>("");
const reasonDevelopment20 = ref<string>("");
const reasonDevelopment10 = ref<string>("");

const checkOtherBox11 = computed<boolean>(() => {
  return development.value.includes("other1");
});
const checkOtherBox12 = computed<boolean>(() => {
  return development.value.includes("other2");
});
const checkOtherBox13 = computed<boolean>(() => {
  return development.value.includes("other3");
});

// 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment70
);
// 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment20
);
// 10 การฝึกอบรมอื่นๆ
const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment10
);

/**
 * props
 */
const modal = defineModel<boolean>("modal", { required: true });
const devId = defineModel<string>("devId", {
  required: true,
});

/**
 * Table
 */
const rows = ref<DataAchievement[]>([]);
const visibleColumns = ref<String[]>(["achievement", "detail"]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "achievement",
    align: "center",
    label: "ระดับคะแนน",
    sortable: true,
    field: "achievement",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:20%;",
  },
  {
    name: "detail",
    align: "left",
    label: "เกณฑ์การประเมิน",
    sortable: false,
    field: "detail",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; width:80%;",
  },
]);

/**
 * ตัวแปร
 */
const title = ref<string>("");
const develop = ref<string[]>([]);
const target = ref<string>("");

/**
 * function fetcch ข้อมูลรายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล
 */
function fetchDetailIndividual() {
  showLoader();
  http
    .get(config.API.achievementDevByid(devId.value))
    .then((res) => {
      const data = res.data.result;
      title.value = data.name;
      const developKeys = [70, 20, 10];
      develop.value = developKeys
        .filter((key) => data[`isDevelopment${key}`])
        .map((key) => `isDevelopment${key}`);

      target.value = data.target;
      development.value = data.developmentProjects;
      reasonDevelopment70.value = data.developmentProjects.includes("other1")
        ? data.reasonDevelopment70
        : "";
      reasonDevelopment20.value = data.developmentProjects.includes("other2")
        ? data.reasonDevelopment20
        : "";
      reasonDevelopment10.value = data.developmentProjects.includes("other3")
        ? data.reasonDevelopment10
        : "";

      const achievements = ["10", "5", "0"];
      rows.value = achievements.map((i) => ({
        achievement: i,
        detail: data[`achievement${i}`],
      }));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ปิด popup
 */
function onCloseDialoh() {
  modal.value = false;
}

/**
 * callBack function เมื่อ modal เป็น true
 */
watch(
  () => modal.value,
  () => {
    modal.value && fetchDetailIndividual();
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 90vw" class="no-scroll">
      <DialogHeader
        :tittle="'รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล'"
        :close="onCloseDialoh"
      />
      <q-separator />
      <q-card-section class="scroll" style="max-height: 90vh">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-input
              dense
              outlined
              const
              readonly
              v-model="title"
              label="ชื่อเรื่อง/เนื่อหา/หัวข้อการพัฒนา"
            />
          </div>
          <div class="col-12">
            <div class="text-weight-bold">วิธีการพัฒนา</div>
            <div class="row q-col-gutter-md full-width">
              <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                <span class="text-weight-bold"
                  >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
                >
                <q-option-group
                  class="check_box q-mt-sm"
                  keep-color
                  color="primary"
                  dense
                  disable
                  v-model="development"
                  :options="projectTechniquesOp1"
                  type="checkbox"
                />
                <div class="row q-pb-md" v-if="checkOtherBox11">
                  <div class="offset-4 col-8 q-mt-sm relative-position">
                    <div class="other_custom_input">
                      <q-input
                        v-model="reasonDevelopment70"
                        dense
                        outlined
                        class="inputgreen"
                        label="กรุณาระบุ"
                      ></q-input>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                <span class="text-weight-bold"
                  >20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
                >
                <q-option-group
                  class="check_box q-mt-sm"
                  keep-color
                  disable
                  color="primary"
                  dense
                  v-model="development"
                  :options="projectTechniquesOp2"
                  type="checkbox"
                />
                <div class="row q-pb-md" v-if="checkOtherBox12">
                  <div class="offset-4 col-8 q-mt-sm relative-position">
                    <div class="other_custom_input">
                      <q-input
                        v-model="reasonDevelopment20"
                        dense
                        outlined
                        class="inputgreen"
                        label="กรุณาระบุ"
                      ></q-input>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                <span class="text-weight-bold">10 การฝึกอบรมอื่นๆ</span>
                <q-option-group
                  class="check_box q-mt-sm"
                  keep-color
                  color="primary"
                  dense
                  disable
                  v-model="development"
                  :options="projectTechniquesOp3"
                  type="checkbox"
                />
                <div class="row q-pb-md" v-if="checkOtherBox13">
                  <div class="offset-4 col-8 q-mt-sm relative-position">
                    <div class="other_custom_input">
                      <q-input
                        v-model="reasonDevelopment10"
                        dense
                        outlined
                        class="inputgreen"
                        label="กรุณาระบุ"
                      ></q-input>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <q-input
              dense
              outlined
              const
              readonly
              v-model="target"
              type="textarea"
              label="เป้าหมายการนำไปพัฒนางาน"
            />
          </div>
          <div class="col-12">
            <q-table
              flat
              bordered
              dense
              :paging="true"
              row-key="level"
              class="custom-table2"
              virtual-scroll
              :rows="rows"
              hide-pagination
              :columns="columns"
              :visible-columns="visibleColumns"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                    class="bg-grey-2"
                  >
                    <span class="text-weight-bold">{{ col.label }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props" class="cursor-pointer">
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div v-if="col.name === 'detail'">
                      <q-input
                        dense
                        outlined
                        const
                        readonly
                        v-model="props.row.detail"
                        label="เกณฑ์การประเมิน"
                      />
                    </div>
                    <div v-else>
                      {{ col.value }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </q-table>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped>
:deep(.check_box .q-checkbox) {
  align-items: start;
}

.other_custom_input {
  position: absolute;
  top: -25px;
  width: 100%;
}
</style>
