<script setup lang="ts">
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";

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

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

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

const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข

const isReadOnly = ref<boolean>(false);

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

//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: "อื่น ๆ (ระบุ)" },
]);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatus.filter((e: DataOption) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

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

function onSubmit() {
  dialogConfirm($q, () => {});
}

/**
 * function ปิด popup
 */
function closeDialog() {
  modal.value = false;
  formData.topic = "";
  formData.development = [];
  formData.otherAction = "";
  formData.otherPerson = "";
  formData.otherTraining = "";
  formData.developmentTarget = "";
  formData.developmentResults = "";
  formData.developmentReport = "";
  formData.status = "";
  formData.remark = "";
}

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

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 90%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
        <q-separator />

        <q-card-section style="max-height: 84vh" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-md-3 col-xs-12">
              <div class="row q-col-gutter-sm">
                <!-- สถานะ -->
                <div class="col-12">
                  <q-select
                    :class="classInput(isReadOnly)"
                    v-model="formData.status"
                    label="สถานะ"
                    dense
                    outlined
                    emit-value
                    map-options
                    :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-12">
                  <q-input
                    :class="classInput(isReadOnly)"
                    v-model="formData.remark"
                    label="หมายเหตุ"
                    dense
                    outlined
                    type="textarea"
                    hide-bottom-space
                  />
                </div>
              </div>
            </div>

            <div class="col-md-9 col-xs-12">
              <div class="row q-col-gutter-sm">
                <div class="col-12">
                  <q-input
                    :class="classInput(isReadOnly)"
                    readonly
                    outlined
                    v-model="formData.topic"
                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
                    dense
                  />
                </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-4">
                      <q-label class="q-mb-sm text-weight-medium text-body2"
                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
                      >
                      <q-option-group
                        disable
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        dense
                        v-model="formData.development"
                        :options="itemsDevelopmentAction"
                        type="checkbox"
                      />

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

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

                    <!-- 10 การฝึกอบรมอื่นๆ -->
                    <div class="col-4">
                      <q-label class="q-mb-sm text-weight-medium text-body2"
                        >10 การฝึกอบรมอื่นๆ</q-label
                      >
                      <q-option-group
                        disable
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        dense
                        v-model="formData.development"
                        :options="itemsDevelopmentTraining"
                        type="checkbox"
                      />
                      <div
                        class="row"
                        v-if="formData.development.includes('other3')"
                      >
                        <div class="offset-4 col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              readonly
                              v-model="formData.otherTraining"
                              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>
            </div>
          </div>
        </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>
</template>

<style scoped></style>
