<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import axios from "axios";
import { useDataStore } from "@/stores/data";

import Workflow from "@/components/Workflow/Main.vue";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type {
  FormDataIDP,
  DataItemsDevelopment,
} from "@/modules/14_IDP/interface/Main";

const $q = useQuasar();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();
const dataStore = useDataStore();

const idRow = ref<string>("");
const router = useRouter();
const route = useRoute();
const isReadOnly = ref<boolean>(false);
const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
const requestId = ref<string>(
  route.params.id ? route.params.id.toString() : ""
);

const formData = reactive<FormDataIDP>({
  topic: "",
  development: [],
  otherAction: "",
  otherPerson: "",
  otherTraining: "",
  developmentTarget: "",
  developmentResults: "",
  developmentReport: "",
  document: null,
});

/** เช็ค true/false 70*/
const isDevelopment70 = computed(() => {
  return itemsDevelopmentAction.value.some((txt) =>
    formData.development.includes(txt.value)
  );
});
/** เช็ค true/false 20*/
const isDevelopment20 = computed(() => {
  return itemsDevelopmentPerson.value.some((txt) =>
    formData.development.includes(txt.value)
  );
});
/** เช็ค true/false 10*/
const isDevelopment10 = computed(() => {
  return itemsDevelopmentTraining.value.some((txt) =>
    formData.development.includes(txt.value)
  );
});

//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
  {
    value: "on_the_job_training",
    label: "การฝึกปฏิบัติในงาน (On the job training)",
  },
  {
    value: "job_project_assignment",
    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
  },
  {
    value: "job_shadowing",
    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
  },
  {
    value: "job_enlargement",
    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
  },
  {
    value: "internal_trainer",
    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
  },
  {
    value: "rotation",
    label: "การหมุนเวียนงาน (Rotation)",
  },
  {
    value: "activity",
    label: "การทำกิจกรรม (Activity)",
  },
  {
    value: "site_visit",
    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
  },
  {
    value: "benchmarking",
    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
  },
  {
    value: "problem_solving",
    label: "การแก้ปัญหา (Problem-solving)",
  },
  {
    value: "team_working",
    label: "การทำงานเป็นทีม (Team working)",
  },
  {
    value: "other1",
    label: "อื่นๆ (ระบุ)",
  },
]);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
  { value: "coaching", label: "การสอนงาน (Coaching)" },
  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
  { value: "other2", label: "อื่นๆ (ระบุ)" },
]);
//10 การฝึกอบรมอื่นๆ
const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
  {
    value: "self_learning",
    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
  },
  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
  {
    value: "in_house_training",
    label: "การฝึกอบรมภายในองค์กร (In – house training)",
  },
  {
    value: "public_training",
    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
  },
  {
    value: "e_training",
    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
  },
  { value: "meeting", label: "การประชุม (Meeting)" },
  { value: "seminar", label: "การสัมมนา (Seminar)" },
  { value: "other3", label: "อื่นๆ (ระบุ)" },
]);

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * function หาชื่อไฟล์
 * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
 */
function onDownloadFile(id: string) {
  showLoader();
  http
    .get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
    .then((res) => {
      if (res.data.length !== 0) {
        downloadUrl(id, res.data[0].fileName);
      } else {
        hideLoader();
      }
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * function  โหลดไฟล์
 * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
 * @param fileName  ชื่อไฟล์
 */
function downloadUrl(id: string, fileName: string) {
  http
    .get(
      config.API.fileByFile(
        "IDP",
        "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล",
        id,
        fileName
      )
    )
    .then((res) => {
      window.open(res.data.downloadUrl, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    const body = {
      name: formData.topic,
      developmentTarget: formData.developmentTarget,
      developmentResults: formData.developmentResults,
      developmentReport: formData.developmentReport,
      reasonDevelopment70: formData.otherAction,
      reasonDevelopment20: formData.otherPerson,
      reasonDevelopment10: formData.otherTraining,
      isDevelopment70: isDevelopment70.value,
      isDevelopment20: isDevelopment20.value,
      isDevelopment10: isDevelopment10.value,
      developmentProjects: formData.development,
    };
    http
      .post(config.API.developmentRequest, body)
      .then(async (res) => {
        await createURLUpload(res.data.result, formData.document);
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      })
      .finally(() => {});
  });
}

/**
 * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
 */
async function createURLUpload(id: string, file: any) {
  const fileName = { fileName: file.name };
  await http
    .post(
      config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
      {
        replace: false,
        fileList: fileName,
      }
    )
    .then(async (res) => {
      const foundKey: string | undefined = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      foundKey &&
        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
async function uploadFileDoc(uploadUrl: string, file: any) {
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async (res) => {
      success($q, `บันทึกข้อมูลสำเร็จ`);
      router.push("/idp");
      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {});
}

function getDetail() {
  showLoader();
  http
    .get(config.API.developmentRequest + `/user/${idRow.value}`)
    .then((res) => {
      const data = res.data.result;
      formData.topic = data.name;
      formData.developmentTarget = data.developmentTarget;
      formData.developmentResults = data.developmentResults;
      formData.developmentReport = data.developmentReport;
      formData.otherAction = data.reasonDevelopment70;
      formData.otherPerson = data.reasonDevelopment20;
      formData.otherTraining = data.reasonDevelopment10;
      formData.development = data.developmentProjects;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  if (route.name == "idpRegistryDetail") {
    isEdit.value = true;
    idRow.value = route.params.id as string;
    getDetail();
  } else {
    isEdit.value = false;
    idRow.value = "";
  }
});
</script>
<template>
  <div class="row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push('/IDP')"
        />
        {{
          isEdit
            ? "รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
            : "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
        }}
      </div>
      <q-card bordered>
        <q-form greedy @submit.prevent @validation-success="onSubmit">
          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-12">
                <div class="row q-col-gutter-sm">
                  <div class="col-12">
                    <q-input
                      :class="classInput(isReadOnly)"
                      outlined
                      v-model="formData.topic"
                      label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
                      dense
                      :readonly="isEdit"
                      hide-bottom-space
                      :rules="[(val:any) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`]"
                    />
                  </div>

                  <div class="col-12">
                    <q-label class="q-mb-sm text-weight-medium text-body2"
                      >วิธีการพัฒนา
                    </q-label>
                    <div class="row col-12 q-ml-md q-col-gutter-sm">
                      <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
                      <div class="col-12 col-sm-6 col-lg-4">
                        <q-label class="q-mb-sm text-weight-medium text-body2"
                          >70 การลงมือปฏิบัติ
                          (โดยผู้บังคับบัญชามอบหมาย)</q-label
                        >
                        <q-option-group
                          class="check_box q-mt-sm"
                          keep-color
                          color="primary"
                          dense
                          v-model="formData.development"
                          :options="itemsDevelopmentAction"
                          type="checkbox"
                          :disable="isEdit"
                        />

                        <div
                          class="row q-pb-md"
                          v-if="formData.development.includes('other1')"
                        >
                          <div
                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
                          >
                            <div class="other_custom_input">
                              <q-input
                                v-model="formData.otherAction"
                                dense
                                :readonly="isEdit"
                                outlined
                                class="inputgreen"
                                label="กรุณาระบุ"
                              ></q-input>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
                      <div class="col-12 col-sm-6 col-lg-4">
                        <q-label class="q-mb-sm text-weight-medium text-body2"
                          >20 การเรียนรู้จากผู้อื่น
                          (Coach/Mentor/Consulting)</q-label
                        >
                        <q-option-group
                          class="check_box q-mt-sm"
                          keep-color
                          color="primary"
                          dense
                          :disable="isEdit"
                          v-model="formData.development"
                          :options="itemsDevelopmentPerson"
                          type="checkbox"
                        />
                        <div
                          class="row q-pb-md"
                          v-if="formData.development.includes('other2')"
                        >
                          <div
                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
                          >
                            <div class="other_custom_input">
                              <q-input
                                v-model="formData.otherPerson"
                                dense
                                :readonly="isEdit"
                                outlined
                                label="กรุณาระบุ"
                              ></q-input>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 10 การฝึกอบรมอื่นๆ -->
                      <div class="col-12 col-sm-6 col-lg-4">
                        <q-label class="q-mb-sm text-weight-medium text-body2"
                          >10 การฝึกอบรมอื่นๆ</q-label
                        >
                        <q-option-group
                          class="check_box q-mt-sm"
                          keep-color
                          color="primary"
                          dense
                          :disable="isEdit"
                          v-model="formData.development"
                          :options="itemsDevelopmentTraining"
                          type="checkbox"
                        />
                        <div
                          class="row q-pb-md"
                          v-if="formData.development.includes('other3')"
                        >
                          <div
                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
                          >
                            <div class="other_custom_input">
                              <q-input
                                v-model="formData.otherTraining"
                                dense
                                :readonly="isEdit"
                                outlined
                                label="กรุณาระบุ"
                              ></q-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- เป้าหมายการนำไปพัฒนางาน -->
                  <div class="col-12">
                    <q-input
                      outlined
                      :readonly="isEdit"
                      v-model="formData.developmentTarget"
                      label="เป้าหมายการนำไปพัฒนางาน"
                      dense
                      type="textarea"
                      class="inputgreen"
                    />
                  </div>

                  <!-- วิธีการวัดผลการพัฒนา -->
                  <div class="col-12">
                    <q-input
                      outlined
                      :readonly="isEdit"
                      v-model="formData.developmentResults"
                      label="วิธีการวัดผลการพัฒนา"
                      dense
                      type="textarea"
                      class="inputgreen"
                    />
                  </div>

                  <!-- รายงานผลการพัฒนา -->
                  <div class="col-12">
                    <q-input
                      :readonly="isEdit"
                      outlined
                      v-model="formData.developmentReport"
                      label="รายงานผลการพัฒนา"
                      dense
                      type="textarea"
                      class="inputgreen"
                    />
                  </div>
                  <div class="col-12">
                    <q-file
                      v-if="!isEdit"
                      :class="classInput(isReadOnly)"
                      v-model="formData.document"
                      label="อัปโหลดเอกสารหลักฐาน"
                      flat
                      dense
                      :readonly="isEdit"
                      outlined
                      hide-bottom-space
                      :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
                    />
                    <q-btn
                      v-else
                      color="blue"
                      flat
                      dense
                      rounded
                      icon="mdi-download"
                      label="ดาวน์โหลดเอกสารหลักฐาน"
                      @click="onDownloadFile?.(idRow)"
                    >
                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
                    </q-btn>
                  </div>
                </div>
              </div>
            </div>
          </q-card-section>
          <q-separator v-if="!isEdit" />
          <q-card-actions align="right" v-if="!isEdit">
            <q-btn label="บันทึก" color="secondary" type="submit"
              ><q-tooltip>บันทึก</q-tooltip></q-btn
            >
          </q-card-actions>

          <div class="col-12 q-mt-sm">
            <Workflow
              v-if="dataStore.officerType === 'OFFICER' && requestId"
              ref="workflowRef"
              :id="requestId"
              sys-name="REGISTRY_IDP"
            />
          </div>
        </q-form>
      </q-card>
    </div>
  </div>
</template>
