<script setup lang="ts">
import { ref, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import genReport from "@/plugins/genreport";

const probationStore = useProbationDataStore();

const $q = useQuasar();
const myForm = ref<any>(null);
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogMessageNotify,
} = mixin;
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());
const action = ref<string>("add");
const assign = ref<any>([]);
const mentors = ref<any>([]);
const commander = ref<any>([]);
const status = ref<boolean>(true);
const ID = ref<string>("");
const date_start = ref<Date>(new Date());
const date_finish = ref<Date>();
const develop = ref<number>();
const result = ref<number>();
const expand_month = ref<string>();
const reson = ref<string>("");
const reson52 = ref<string>("");

const chairman_dated = ref<Date>();
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const director_id = ref<any>(null);
const director_id2 = ref<any>(null);
const director_id3 = ref<any>(null);
const optionDirector = ref<any>([]);
const person = ref<any>([]);

const options = ref<any>([
  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
]);
const optionsResult = ref<any>([
  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
  {
    value: 3,
    label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
  },
]);

/** get ข้อมูลรายการมอยหมาย เก็บไว้ตัวแปร
 * @param id personal id
 */
async function fecthAssign(id: string) {
  showLoader();
  await http
    .get(config.API.evaluateReportcreate(id))
    .then((res) => {
      assign.value = res.data.result.assign;
      person.value = res.data.result.person;
      mentors.value = res.data.result.mentors;
      date_start.value = res.data.result.assign.date_start;
      date_finish.value = res.data.result.assign.date_finish;

      if (
        res.data.result.result.develop_complete != null &&
        res.data.result.result.evaluate_result != null
      ) {
        develop.value = res.data.result.result.develop_complete;
        result.value = res.data.result.result.evaluate_result;
        changeReson52(Number(res.data.result.result.evaluate_result));
      }

      director_id.value = res.data.result.chairman;
      director_id2.value = res.data.result.commander;
      if (mentors.value.length != 0) {
        director_id3.value = mentors.value[0];
      }
      commander.value = res.data.result.commander;
      optionDirector.value = mentors.value;
    })
    .catch((e) => {
      // messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** get ข้อมูล เก็บไว้ตัวแปร
 * @param id personal id
 */
const fecthResult = async (id: string) => {
  await http
    .get(config.API.createformReport(id))
    .then(async (res: any) => {
      if (res.data.result != null) {
        const data = await res.data.result.evaluate;
        ID.value = data.id;
        date_start.value = data.date_start;
        date_finish.value = data.date_finish;
        develop.value = await Number(data.develop_complete);
        result.value = await Number(data.pass_result);
        reson.value = await data.reson;
        chairman_dated.value = await data.chairman_dated;
        director1_dated.value = await data.director1_dated;
        director2_dated.value = await data.director2_dated;
        status.value = false;
        action.value = "edit";
        expand_month.value = data.expand_month;
        changeReson52(Number(data.pass_result));
      }
    })
    .catch((e) => {});
};

/** เช็คก่อน save */
async function savaForm() {
  await myForm.value.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, async () => await postData("post"));
    } else {
      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
}

/** แปลงรหัสไฟล์ */
function downloadFile(response: any, filename: string) {
  const link = document.createElement("a");
  var fileName = filename;
  link.href = window.URL.createObjectURL(new Blob([response.data]));
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

/**
 * ดาว์โหลดไฟล์
 * @param type docx/pdf
 */
async function clickdownloadFile(type: string) {
  showLoader();
  await http
    .get(config.API.reportEvaluateResult(type, assignId.value))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        `แบบรายงานการประเมินฯ_${person.value.name}.${type}`,
        type
      );
      hideLoader();
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
      hideLoader();
    })
    .finally(() => {});
}

/** post/put  data
 * @param action post put
 */
async function postData(action: string) {
  const data = await {
    start_date: date_start.value,
    date_finish: date_finish.value,
    develop_complete: develop.value,
    pass_result: result.value,
    reson: reson.value,
    chairman_dated: chairman_dated.value,
    director1_dated: director1_dated.value,
    director2_dated: director2_dated.value,
    expand_month: expand_month.value,
  };
  if (action === "post") {
    showLoader();
    await http
      .post(config.API.createformReport(assignId.value), data)
      .then(() => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        status.value = false;
        hideLoader();
      });
  } else if (action === "put") {
    showLoader();
    await http
      .put(config.API.createformReport(assignId.value), data)
      .then(() => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        status.value = false;
        hideLoader();
      });
  }
}

/** ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ  */
function selectResult() {
  if (result.value !== 3) {
    expand_month.value = "";
  }

  changeReson52(Number(result.value));
}

/** แปลง val เป็นตัวหนังสือ
 * @param val ตัวเลข
 */
function changeReson52(val: number) {
  switch (val) {
    case 1:
      reson52.value = "เห็นควรให้รับราชการต่อไป";
      break;
    case 2:
      reson52.value = "เห็นควรให้ออกจากราชการ";
      break;
    case 3:
      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
      break;

    default:
      break;
  }
}

onMounted(() => {
  fecthAssign(assignId.value);
  fecthResult(assignId.value);
});
</script>

<template>
  <div class="row col-12">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบรายงานการประเมินฯ</div>
      <q-btn
        v-if="!status"
        size="12px"
        flat
        dense
        icon="mdi-download"
        color="primary"
      >
        <q-tooltip>ดาวน์โหลด</q-tooltip>
        <q-menu>
          <q-list style="min-width: 150px">
            <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
              <q-item-section avatar
                ><q-icon color="red" name="mdi-file-pdf"
              /></q-item-section>
              <q-item-section>ไฟล์ .pdf</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
              <q-item-section avatar
                ><q-icon color="blue" name="mdi-file-word"
              /></q-item-section>
              <q-item-section>ไฟล์ .docx</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>

    <div class="col-12 row">
      <div class="col-12 text-top0 row items-center">
        <div class="col-12 row text-top0">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name }}
        </div>
        <div class="col-12 q-pl-md q-pb-md">
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
            {{ person.positionName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ระดับ</span>
            {{ person.positionLevelName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">สังกัด</span>
            {{ person.Oc ? person.Oc : "-" }}
          </div>
        </div>
      </div>

      <div class="col-12 text-top0 row items-center">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        ประเมินผล
        <span class="text-primary q-pr-sm"> ครั้งที่ 1 </span>
      </div>

      <div class="col-12 text-top0 row items-center">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
          "ครั้งที่ " + assign.round_no
        }}</span>
      </div>
    </div>

    <q-form ref="myForm">
      <div class="row col-12">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="date_start"
              :locale="'th'"
              autoApply
              borderless
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="
                    !status ||
                    checkRoutePermisson ||
                    probationStore.dataPermissions?.tab6.isEdit == false
                  "
                  class="full-width datepicker"
                  :model-value="
                    date_start != null ? date2Thai(date_start) : null
                  "
                  :label="`${'ระหว่างวันที่'}`"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>

          <div class="col-xs-12 col-sm-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="date_finish"
              :locale="'th'"
              autoApply
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="!status || checkRoutePermisson"
                  class="full-width datepicker"
                  :model-value="
                    date_finish != null ? date2Thai(date_finish) : null
                  "
                  :label="`${'ถึงวันที่'}`"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
      </div>

      <div class="col-12 row q-mt-xs">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <q-select
              :rules="[
                (val:string) =>
                  !!val ||
                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
              ]"
              hide-bottom-space
              :options="options"
              class="col-xs-12 col-sm-6"
              dense
              borderless
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              emit-value
              map-options
              option-label="label"
              option-value="value"
              outlined
              v-model="develop"
              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
              use-input
              ><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-xs-12 col-sm-6">
            <div class="row">
              <q-select
                class="col-sm-12"
                :rules="[
                  (val:string) =>
                    !!val ||
                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
                ]"
                hide-bottom-space
                :options="optionsResult"
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                dense
                borderless
                emit-value
                map-options
                option-label="label"
                option-value="value"
                outlined
                v-model="result"
                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
                @update:model-value="selectResult"
                use-input
                ><template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
            <div class="row q-mt-xs" v-if="result === 3">
              <q-input
                outlined
                dense
                v-model="expand_month"
                label="จำนวนเดือน"
                :rules="[(val:string) => !!val || 'กรุณากรอกจำนวนเดือน']"
                type="number"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 row q-mt-md">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <q-input
              hide-bottom-space
              dense
              borderless
              outlined
              :readonly="
                !status ||
                checkRoutePermisson ||
                probationStore.dataPermissions?.tab6.isEdit == false
              "
              class="bg-white"
              type="textarea"
              v-model="reson"
              lazy-rules
              label="เหตุผล"
              :rules="[(val:string) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
            />
          </div>
          <div class="col-xs-12 col-sm-6">
            <q-input
              hide-bottom-space
              dense
              borderless
              outlined
              readonly
              class="bg-white"
              type="textarea"
              v-model="reson52"
              lazy-rules
              label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
              :rules="[(val:string) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
            />
          </div>
        </div>
      </div>

      <div class="col-12 q-mt-lg">
        <q-separator size="3px" color="grey-2" />
      </div>

      <div class="row col-12 q-gutter-lg q-mt-none">
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
            52
          </div>
          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id"
              outlined
              :options="commander"
              label="ชื่อ-นามสกุล"
              option-label="label"
              readonly
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="chairman_dated"
                :locale="'th'"
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      chairman_dated != null ? date2Thai(chairman_dated) : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>

        <div class="col-12 row q-mt-xs">
          <div class="col-12 text-top2 row items-center">
            คณะกรรมการ
            <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
          </div>
          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id2"
              outlined
              label="ชื่อ-นามสกุล"
              readonly
              :options="optionDirector"
              option-label="label"
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="director1_dated"
                :locale="'th'"
                autoApply
                borderless
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      director1_dated != null
                        ? date2Thai(director1_dated)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>

        <div class="col-12 row q-mt-xs">
          <div class="col-12 text-top2 row items-center">
            คณะกรรมการ
            <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
          </div>

          <div class="col-12 row q-col-gutter-md">
            <q-select
              class="col-xs-12 col-sm-8"
              dense
              v-model="director_id3"
              outlined
              label="ชื่อ-นามสกุล"
              :options="optionDirector"
              readonly
              option-label="label"
            />

            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="director2_dated"
                :locale="'th'"
                autoApply
                :readonly="
                  !status ||
                  checkRoutePermisson ||
                  probationStore.dataPermissions?.tab6.isEdit == false
                "
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    outlined
                    dense
                    :readonly="!status || checkRoutePermisson"
                    class="full-width datepicker col-3"
                    :model-value="
                      director2_dated != null
                        ? date2Thai(director2_dated)
                        : null
                    "
                    :label="`${'ลงวันที่'}`"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>
      </div>
    </q-form>

    <q-toolbar
      class="text-primary"
      v-if="
        action == 'add' &&
        !checkRoutePermisson &&
        probationStore.dataPermissions?.tab6.isEdit
      "
    >
      <q-space />
      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
    </q-toolbar>
  </div>
</template>

<style lang="scss" scoped>
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.q-rating__icon {
  text-shadow: transparent !important;
}

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
</style>
