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

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

import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";

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

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const routerName = ref<string>(route.name as string);
const store = useRequestEditStore();
const itemsDevelopment = uselistDevelopmentDataStore();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = useCounterMixin();

const requestId = ref<string>(route.params.id as string);

const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
const workflowRef = ref<any>(null);
const isDone = ref<string>("");
//ฟอร์มข้อมูลการพัฒนารายบุคคล
const formData = reactive<FormDataIDP>({
  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
  developmentProjects: [], //วิธีการพัฒนา
  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
  developmentResults: "", //วิธีการวัดผลการพัฒนา
  developmentReport: "", //รายงานผลการพัฒนา
  status: "", //สถานะ
  reason: "", //หมายเหตุ
  createdFullName: "", //ผู้ขอแก้ไข
  createdAt: null, //เวลาที่แก้ไข
});

const isCheckData = computed(() => {
  if (isReadOnly.value === true) {
    return true;
  } else return false;
});

//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const itemsDevelopment70 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment70
);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const itemsDevelopment20 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment20
);
//10 การฝึกอบรมอื่นๆ
const itemsDevelopment10 = ref<DataItemsDevelopment[]>(
  itemsDevelopment.dataDevelopment10
);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

/**
 * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
 * @param id ID ที่ต้องการดูรายละเอียด
 */
async function fetchDataByid(id: string) {
  showLoader();
  await http
    .get(
      config.API.requestDevelopmentEditByType(
        routerName.value == "registryNewRequestEditPageEMP" ? "-employee" : ""
      ) + `admin/${id}`
    )
    .then((res) => {
      const data = res.data.result;
      formData.topic = data.name;
      formData.developmentProjects = data.developmentProjects;
      formData.developmentTarget = data.developmentTarget;
      formData.developmentResults = data.developmentResults;
      formData.developmentReport = data.developmentReport;
      formData.reasonDevelopment70 = data.reasonDevelopment70;
      formData.reasonDevelopment20 = data.reasonDevelopment20;
      formData.reasonDevelopment10 = data.reasonDevelopment10;
      formData.status = data.status;
      formData.reason = data.reason;
      formData.createdFullName = data.createdFullName;
      formData.createdAt = data.createdAt;

      isDone.value = data.status;

      if (data.status !== "PENDING") {
        isReadOnly.value = true;
      } else {
        isReadOnly.value = false;
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ค้นหาคำใน select  สถานะคำร้อง
 * @param val คำค้น
 * @param update Function
 */
function filterOption(val: string, update: Function) {
  update(() => {
    statusOption.value = statusOptionMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
}

/** function บันทึกข้อมูลการพัฒนารายบุคคล */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(
        config.API.requestDevelopmentEditByType(
          routerName.value == "registryNewRequestEditPageEMP" ? "-employee" : ""
        ) + `admin/${requestId.value}`,
        {
          status: formData.status,
          reason: formData.reason,
        }
      )
      .then(async () => {
        await fetchDataByid(requestId.value);
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

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

/**
 * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
 * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
 */
onMounted(() => {
  fetchDataByid(requestId.value);
});
</script>

<template>
  <div class="q-gutter-sm q-pa-sm">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      {{
        `${formData.createdFullName}
        (ขอแก้ไขเมื่อ ${
          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
        })`
      }}
    </div>

    <q-card>
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <!-- สถานะ -->
          <!-- v-if="isDone == 'PENDING'" -->
          <q-form
            class="col-12"
            greedy
            @submit.prevent
            @validation-success="onSubmit"
          >
            <q-card bordered class="col-12">
              <div class="row q-pa-md q-col-gutter-sm">
                <!-- สถานะ -->

                <div class="col-4">
                  <q-select
                    :class="
                      classInput(
                        isReadOnly || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
                    v-model="formData.status"
                    label="สถานะ"
                    dense
                    outlined
                    emit-value
                    map-options
                    hide-selected
                    fill-input
                    :options="statusOption"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
                    lazy-rules
                    hide-bottom-space
                    use-input
                    option-label="name"
                    option-value="id"
                    @filter="(inputValue:string,
                                  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-8">
                  <q-input
                    :class="
                      classInput(
                        isReadOnly || !workflowRef?.permission.isUpdate
                      )
                    "
                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
                    v-model="formData.reason"
                    label="หมายเหตุ"
                    dense
                    outlined
                    type="textarea"
                    hide-bottom-space
                  />
                </div>
              </div>

              <q-separator
                v-if="!isReadOnly && workflowRef?.permission.isUpdate"
              />

              <q-card-actions
                align="right"
                v-if="!isReadOnly && workflowRef?.permission.isUpdate"
              >
                <q-btn label="บันทึก" color="secondary" type="submit"
                  ><q-tooltip>บันทึก</q-tooltip></q-btn
                >
              </q-card-actions>
            </q-card>
          </q-form>

          <!-- รายละเอียด -->
          <div class="col-12">
            <q-card bordered class="col-12">
              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
                รายละเอียด
              </div>
              <q-separator />
              <div class="row q-col-gutter-sm q-pa-md">
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.topic"
                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
                    dense
                  />
                </div>

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

                      <div
                        class="row"
                        v-if="formData.developmentProjects.includes('other1')"
                      >
                        <div class="col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              readonly
                              v-model="formData.reasonDevelopment70"
                              dense
                              outlined
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>

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

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

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

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

                <!-- รายงานผลการพัฒนา -->
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.developmentReport"
                    label="รายงานผลการพัฒนา"
                    dense
                    type="textarea"
                  />
                </div>
              </div>
            </q-card>
          </div>

          <div class="col-12">
            <Workflow
              v-model:is-check-data="isCheckData"
              ref="workflowRef"
              :id="requestId"
              sys-name="REGISTRY_IDP"
            />
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped></style>
