<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";

const $q = useQuasar();
const myForm = ref<any>(null);
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  notifyError,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogMessageNotify
} = mixin;
const route = useRoute();
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 saveEdit = async (id: string) => {
  await myForm.value.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, async () => await postData("put"));
    }else {
      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
};
const edit = () => {
  status.value = true;
};
const cancel = () => {
  status.value = false;
};
onMounted(() => {
  fecthAssign(assignId.value);
  fecthResult(assignId.value);
});

const fecthAssign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.evaluateReportcreate(id))
    .then((res) => {
      // assign.value = res.data.data.assign;
      mentors.value = res.data.data.mentors;
      // date_start.value = assign.value.date_start;
      // date_finish.value = assign.value.date_finish;

      director_id.value = res.data.data.chairman.name;
      director_id2.value = res.data.data.commander.name;
      if (mentors.value.length != 0) {
        director_id3.value = mentors.value[0].name;
      }
      commander.value = res.data.data.commander;
      optionDirector.value = mentors.value;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
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 chairman_dated = ref<Date>();
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const fullname = ref<string>("");

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;

        // fullname.value = res.data.data.profile.name;
        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;
      }
    })
    .catch((e) => {});
};

// part new

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

const director_id = ref<any>(null);

const director_id2 = ref<any>(null);
const director_id3 = ref<any>(null);
const optionDirector = ref<any>([]);

const savaForm = async () => {
  await myForm.value.validate().then((result: boolean) => {
    if (result) {
      dialogConfirm($q, async () => await postData("post"));
    }else {
      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
};
const 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);
};

const clickdownloadFile = async (type: string) => {
  showLoader();
  await http
    .get(config.API.reportEvaluateResult(type, assignId.value), {
      responseType: "blob",
    })
    .then((res) => {
      downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const postData = async (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(assignId.value), data)
      .then(() => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      });
  } else if (action === "put") {
    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;
        // fecthAssign(assignId.value);
        fecthResult(assignId.value);
      });
  }
};
const selectRuslt = () => {
  if (result.value !== 3) {
    expand_month.value = "";
  }
};
</script>

<template>
  <div class="row col-12">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบรายงานการประเมินฯ</div>
      <!-- <q-space /> -->
      <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 v-if="action == 'edit'">
        <div v-if="status == false">
          <q-btn
            dense
            flat
            round
            color="primary"
            @click="edit()"
            icon="mdi-pencil-outline"
          >
            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
          </q-btn>
        </div>
        <div v-else>
          <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
            <q-tooltip>ยกเลิก</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            round
            class="q-ml-sm"
            color="public"
            @click="saveEdit(assignId)"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </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"
              :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"
                  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-xs-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
                  :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>
      </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) =>
                  !!val ||
                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
              ]"
              hide-bottom-space
              :options="options"
              class="col-xs-12 col-sm-6"
              dense
              borderless
              :disable="!status"
              emit-value
              map-options
              option-label="label"
              option-value="value"
              outlined
              v-model="develop"
              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
            />
          </div>
          <div class="col-xs-12 col-sm-6">
            <div class="row">
              <q-select
                class="col-sm-12"
                :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"
                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
                @update:model-value="selectRuslt"
              />
            </div>
            <div class="row q-mt-xs" v-if="result === 3">
              <q-input
                outlined
                dense
                v-model="expand_month"
                label="จำนวนเดือน"
                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
                type="number"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 row q-mt-lg">
        <div class="col-12">

          <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>

      <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">
            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
          </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="name"
              disable
            />
            <div class="col-xs-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
                    :disable="!status"
                    class="full-width datepicker col-3"
                    :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 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="ชื่อ-นามสกุล"
              disable
              :options="optionDirector"
              option-label="name"
            />
            <div class="col-xs-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
                    :disable="!status"
                    class="full-width datepicker col-3"
                    :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 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"
              disable
              option-label="name"
            />
            <div class="col-xs-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"
                    class="full-width datepicker col-3"
                    :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>
    </q-form>

    <q-toolbar class="text-primary" v-if="action == 'add'">
      <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>
