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

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

const assign = ref<any>([]);
const person = ref<any>([]);
const fullname = ref<string>("");
const mentors = ref<any>([]);
const date_start = ref<Date>(new Date());
const date_finish = ref<Date>();
const develop = ref<number>();
const result = ref<number>();
const director_id = ref<any>(null);
const director_id2 = ref<any>(null);
const director_id3 = ref<any>(null);
const reson52 = ref<string>("");
const ID = ref<string>("");
const reson = ref<string>("");
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const chairman_dated = ref<Date>();
const action = ref<string>("add");
const expand_month = ref<string>();

const commander = ref<any>([]);
const optionDirector = ref<any>([]);

const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
  date2Thai,
} = mixin;
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);
const mode = ref<any>($q.screen.gt.xs);
const status = ref<boolean>(true);

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: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
  },
]);

function onSubmit() {
  dialogConfirm($q, async () => await postData("post"));
}

/** 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") {
    await http
      .post(config.API.createformReport(id.value), data)
      .then(() => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${profileId.value}/${id.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        status.value = false;
        fecthResult(id.value);
      });
  } else if (action === "put") {
    await http
      .put(config.API.createformReport(id.value), data)
      .then(() => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${profileId.value}/${id.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      })
      .finally(() => {
        status.value = false;
        fecthResult(id.value);
      });
  }
}

/** แปลง val เป็นตัวหนังสือ
 * @param val ตัวเลข
 */
async 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;
  }
}

/** แปลงรหัสไฟล์ */
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, id.value), {
      responseType: "blob",
    })
    .then((res) => {
      downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

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

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

      director_id.value = res.data.data.chairman;
      director_id2.value = res.data.data.commander;
      if (mentors.value.length != 0) {
        director_id3.value = mentors.value[0];
      }
      commander.value = res.data.data.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.data != null) {
        const data = await res.data.data.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;
        await changeReson52(Number(data.pass_result));
      }
    })
    .catch((e) => {});
};

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

  await changeReson52(Number(result.value));
}

onMounted(async () => {
  await fecthAssign(id.value);
  await fecthResult(id.value);
});
</script>
<template>
  <div v-if="!$q.screen.gt.xs" 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.go(-1)"
      />
      <div>แบบรายงานการประเมิน ฯ</div>
    </div>
  </div>

  <div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
    <div class="col-12">
      <span class="toptitle text-dark">แบบรายงานการประเมินฯ</span>
      <q-btn
        v-if="!status"
        size="12px"
        flat
        dense
        round
        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="row q-my-sm q-col-gutter-y-sm">
      <div class="col-12 text-dark text-weight-medium">
        <div class="col-12 row items-center q-col-gutter-y-xs">
          <div class="col-12">
            <q-icon name="mdi-label" color="grey-4" />
            <span class="text-grey-6 q-pl-sm"
              >ผู้ทดลองปฏิบัติหน้าที่ราชการ</span
            >
            <span class="text-dark q-pl-sm">{{ person.name }}</span>
          </div>

          <div class="col-12 q-pl-md">
            <span class="text-grey-6 q-pl-sm">ตำแหน่งในสายงาน</span>
            <span class="text-dark q-pl-sm">{{ person.PositionLineName }}</span>
          </div>
          <div class="col-12 q-pl-md">
            <span class="text-grey-6 q-pl-sm">ระดับ</span>
            <span class="text-dark q-pl-sm">
              {{ person.PositionLevelName }}</span
            >
          </div>
          <div class="col-12 q-pl-md">
            <span class="text-grey-6 q-pl-sm">สังกัด</span>
            <span class="text-dark q-pl-sm">{{ person.Oc }}</span>
          </div>
        </div>
      </div>

      <div class="col-12 text-dark text-weight-medium 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-dark row text-weight-medium 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 class="col-12">
        <q-form
          greedy
          @submit.prevent
          @validation-success="onSubmit"
          class="full-width"
        >
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-sm-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="date_start"
                :locale="'th'"
                autoApply
                borderless
                :readonly="!status"
                :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
                    hide-bottom-space
                    :disable="!status"
                    class="full-width datepicker"
                    :model-value="
                      date_start != null ? date2Thai(date_start) : null
                    "
                    :label="`${'ระหว่างวันที่'}`"
                    :rules="[(val) => !!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-12 col-sm-6">
              <datepicker
                menu-class-name="modalfix"
                v-model="date_finish"
                :locale="'th'"
                autoApply
                :readonly="!status"
                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
                    hide-bottom-space
                    :disable="!status"
                    class="full-width datepicker"
                    :model-value="
                      date_finish != null ? date2Thai(date_finish) : null
                    "
                    :label="`${'ถึงวันที่'}`"
                    :rules="[(val) => !!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-12 col-sm-6">
              <q-select
                :rules="[
                  (val) =>
                    !!val ||
                    'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
                ]"
                hide-bottom-space
                :options="options"
                dense
                borderless
                :disable="!status"
                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-12 col-sm-6`">
              <q-select
                :rules="[
                  (val) =>
                    !!val ||
                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
                ]"
                hide-bottom-space
                :options="optionsResult"
                :disable="!status"
                dense
                borderless
                emit-value
                map-options
                option-label="label"
                option-value="value"
                outlined
                v-model="result"
                class="selectPt"
                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
              v-if="result == 3"
              :class="`col-12  ${result == 3 ? 'offset-sm-6 col-sm-6' : ''}`"
            >
              <q-input
                outlined
                hide-bottom-space
                dense
                v-model="expand_month"
                label="จำนวนเดือน"
                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
                type="number"
              />
            </div>
            <div class="col-12 col-sm-6">
              <q-input
                hide-bottom-space
                dense
                borderless
                outlined
                :disable="!status"
                class="bg-white"
                type="textarea"
                v-model="reson"
                lazy-rules
                label="เหตุผล"
                :rules="[
                  (val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล',
                ]"
              />
            </div>
            <div class="col-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) =>
                    (!!val && val.length > 0) ||
                    'กรุณาความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52',
                ]"
              />
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 text-dark text-weight-medium">
              ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
              52
            </div>
            <div class="col-12">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-8">
                  <q-select
                    dense
                    v-model="director_id"
                    outlined
                    :options="commander"
                    label="ชื่อ-นามสกุล"
                    option-label="label"
                    disable
                  />
                </div>
                <div class="col-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="chairman_dated"
                    :locale="'th'"
                    :readonly="!status"
                    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
                        hide-bottom-space
                        :disable="!status"
                        :model-value="
                          chairman_dated != null
                            ? date2Thai(chairman_dated)
                            : null
                        "
                        :label="`${'ลงวันที่'}`"
                        :rules="[(val) => !!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 text-dark text-weight-medium">คณะกรรมการ</div>
            <div class="col-12">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-8">
                  <q-select
                    dense
                    v-model="director_id2"
                    outlined
                    label="ชื่อ-นามสกุล"
                    disable
                    :options="optionDirector"
                    option-label="label"
                  />
                </div>
                <div class="col-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="director1_dated"
                    :locale="'th'"
                    autoApply
                    borderless
                    :readonly="!status"
                    :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
                        hide-bottom-space
                        :disable="!status"
                        :model-value="
                          director1_dated != null
                            ? date2Thai(director1_dated)
                            : null
                        "
                        :label="`${'ลงวันที่'}`"
                        :rules="[(val) => !!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 text-dark text-weight-medium">คณะกรรมการ</div>
            <div class="col-12">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-8">
                  <q-select
                    dense
                    v-model="director_id3"
                    outlined
                    label="ชื่อ-นามสกุล"
                    :options="optionDirector"
                    disable
                    option-label="label"
                  />
                </div>
                <div class="col-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="director2_dated"
                    :locale="'th'"
                    autoApply
                    :readonly="!status"
                    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
                        :disable="!status"
                        hide-bottom-space
                        :model-value="
                          director2_dated != null
                            ? date2Thai(director2_dated)
                            : null
                        "
                        :label="`${'ลงวันที่'}`"
                        :rules="[(val) => !!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" align="right" v-if="action == 'add'">
              <q-btn label="บันทึก" color="secondary" type="submit"
                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
              >
            </div>
          </div>
        </q-form>
      </div>
    </div>
  </div>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
</style>
