<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useProbationReport } from "@/modules/15_probationReport/store";

import type {
  FileType,
  ProbationReportType,
} from "@/modules/15_probationReport/interface/Main";
import { useQuasar } from "quasar";

const $q = useQuasar();
const store = useProbationReport();

const dataResult1 = defineModel<FileType[]>("dataResult1", { required: true });
const dataResult2 = defineModel<FileType[]>("dataResult2", { required: true });

const props = defineProps({
  page: Number,
});
const mixin = useCounterMixin();
const {
  date2Thai,
  dateToISO,
  success,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;

const dev_options = defineModel<any>("dev_options", { required: true });
const result_option = defineModel<any>("result_option", { required: true });
const status = ref<boolean>(false);

const formData = ref<ProbationReportType>({
  develop_orientation_score: 0,
  develop_self_learning_score: 0,
  develop_training_seminar_score: 0,
  develop_other_training_score: 0,
  develop_total_score: 0,
  develop_orientation_percent: 0,
  develop_self_learning_percent: 0,
  develop_training_seminar_percent: 0,
  develop_other_training_percent: 0,
  develop_total_percent: 0,
  develop_result: 0,
  achievement_score: 0,
  achievement_score_total: 0,
  achievement_percent: 0,
  achievement_result: 0,
  behavior_score: 0,
  behavior_score_total: 0,
  behavior_percent: 0,
  behavior_result: 0,
  sum_score: 0,
  sum_percent: 0,
  reason: "",
  pass_result: 0,
  evaluate_date: new Date(),
});

/**
 * download file
 * @param type type file
 */
async function clickdownloadFile() {
  showLoader();
  await http
    .get(
      config.API.fileByPath(
        props.page == 1
          ? dataResult1.value[0].pathname
          : dataResult2.value[0].pathname
      )
    )
    .then(async (res) => {
      const data = res.data.downloadUrl;
      window.open(data);
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

async function getData() {
  showLoader();
  http
    .get(
      config.API.summaryReportDetail(store.assignId) +
        `&evaluate_no=${props.page}`
    )
    .then((res) => {
      const data = res.data.result;
      formData.value.develop_orientation_score = data.develop_orientation_score;
      formData.value.develop_self_learning_score =
        data.develop_self_learning_score;
      formData.value.develop_training_seminar_score =
        data.develop_training_seminar_score;
      formData.value.develop_other_training_score =
        data.develop_other_training_score;
      formData.value.develop_total_score = data.develop_total_score;
      formData.value.develop_orientation_percent =
        data.develop_orientation_percent;
      formData.value.develop_self_learning_percent =
        data.develop_self_learning_percent;
      formData.value.develop_training_seminar_percent =
        data.develop_training_seminar_percent;
      formData.value.develop_other_training_percent =
        data.develop_other_training_percent;
      formData.value.develop_total_percent = data.develop_total_percent;
      formData.value.develop_result =
        data.develop_result == 0 ? 2 : data.develop_result;

      formData.value.achievement_score = data.achievement_score;
      formData.value.achievement_score_total = data.achievement_score_total;
      formData.value.achievement_percent = data.achievement_percent;
      formData.value.achievement_result = data.achievement_result;

      formData.value.behavior_score = data.behavior_score;
      formData.value.behavior_score_total = data.behavior_score_total;
      formData.value.behavior_percent = data.behavior_percent;
      formData.value.behavior_result = data.behavior_result;

      formData.value.sum_score = data.sum_score;
      formData.value.sum_percent = data.sum_percent;

      formData.value.reason = data.reason;
      formData.value.pass_result = data.pass_result;
      formData.value.evaluate_date = data.evaluate_date;
      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await getData();
});
</script>
<template>
  <div class="row col-12 q-ma-xs">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
      <q-btn
        icon="download"
        color="primary"
        clickable
        v-close-popup
        outlined
        flat
        round
        dense
        @click="clickdownloadFile()"
      >
        <q-tooltip>ดาวน์โหลด</q-tooltip>
      </q-btn>
    </div>
    <div class="row col-12 q-pt-lg q-px-lg no-margin">
      <div class="col-12 row justify-center">
        <div class="col-12 text-top0 items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
          ผลการประเมิน
        </div>
      </div>
      <q-card class="text-top0 col-12">
        <q-list dense>
          <q-item dense tag="label" v-ripple>
            <q-item-section>
              <q-item-label>
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
              >
            </q-item-section>
            <q-item-section>
              <q-item-label style="color: gray">
                <div class="row text-weight-light">
                  <div class="col">คะแนน</div>
                  <div class="col">ร้อยละ</div>
                </div>
              </q-item-label>

              <q-item-label caption style="color: #464444">
                <div class="row text-weight-bold">
                  <div class="col">{{ formData.achievement_score }}</div>
                  <div class="col">{{ formData.achievement_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>

            <q-item-section side v-if="formData.achievement_result == 1">
              ผ่าน (สูงกว่าร้อยละ 60)
            </q-item-section>
            <q-item-section side v-else>
              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
      <q-card class="text-top0 col-12">
        <q-list dense>
          <q-item dense tag="label" v-ripple>
            <q-item-section>
              <q-item-label>
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
              >
            </q-item-section>
            <q-item-section>
              <q-item-label style="color: gray">
                <div class="row text-weight-light">
                  <div class="col">คะแนน</div>
                  <div class="col">ร้อยละ</div>
                </div>
              </q-item-label>
              <q-item-label caption style="color: #464444">
                <div class="row text-weight-bold">
                  <div class="col">{{ formData.behavior_score }}</div>
                  <div class="col">{{ formData.behavior_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>

            <q-item-section side v-if="formData.behavior_result == 1">
              ผ่าน (สูงกว่าร้อยละ 60)
            </q-item-section>
            <q-item-section side v-else>
              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>

      <q-card class="text-top0 col-12">
        <q-list dense>
          <q-item dense tag="label" v-ripple>
            <q-item-section>
              <q-item-label class="text-black"
                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
              >
            </q-item-section>
            <q-item-section>
              <q-item-label style="color: gray">
                <div class="row text-weight-light">
                  <div class="col">คะแนน</div>
                  <div class="col">ร้อยละ</div>
                </div>
              </q-item-label>
              <q-item-label caption style="color: #464444">
                <div class="row text-weight-bold">
                  <div class="col">{{ formData.sum_score }}</div>
                  <div class="col">{{ formData.sum_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>

            <q-item-section side v-if="Number(formData.sum_percent) >= 60">
              ผ่าน (สูงกว่าร้อยละ 60)
            </q-item-section>
            <q-item-section side v-else>
              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>
    <div class="row col-12 q-pt-lg q-px-lg no-margin">
      <div class="col-12 row justify-center">
        <div class="col-12 text-top0 items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <q-card
          flat
          bordered
          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
        >
          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
            <div class="row q-gutter-md q-pl-md">
              <div class="col-8 text-weight-medium">หัวข้อ</div>
              <div class="col">คะแนน</div>
              <div class="col">ร้อยละ</div>
            </div>
          </div>
          <q-separator class="q-my-xs" />
          <div class="row q-gutter-md align-center q-pl-md">
            <div class="col-8">1. การปฐมนิเทศ</div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_orientation_score"
              />
            </div>

            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_orientation_percent"
              />
            </div>
          </div>

          <q-separator class="q-my-xs" />
          <div class="row q-gutter-md align-center q-pl-md">
            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
            <div class="col">
              <q-input
                dense
                outlined
                type="number"
                :readonly="!status"
                v-model="formData.develop_self_learning_score"
              />
            </div>

            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_self_learning_percent"
              />
            </div>
          </div>

          <q-separator class="q-my-xs" />
          <div class="row q-gutter-md align-center q-pl-md">
            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_training_seminar_score"
              />
            </div>

            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_training_seminar_percent"
              />
            </div>
          </div>
          <q-separator class="q-my-xs" />
          <div class="row q-gutter-md align-center q-pl-md">
            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_other_training_score"
              />
            </div>

            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :readonly="!status"
                v-model="formData.develop_other_training_percent"
              />
            </div>
          </div>

          <q-separator class="q-my-xs" />
          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
            <div class="row q-gutter-md q-pl-sm">
              <div class="col-8 text-weight-medium">
                <q-item-label
                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
                >
              </div>
              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
              <div class="col q-pl-md">
                {{ formData.develop_total_percent }}
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
    <div class="row col-12 q-gutter-lg q-mt-md">
      <div class="col-xs-12 col-sm-6">
        <div class="col-12 text-top0 items-center">
          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12">
          <q-select
            class="col-12"
            dense
            v-model="formData.develop_result"
            outlined
            :options="dev_options"
            option-label="label"
            option-value="value"
            map-options
            emit-value
            :readonly="!status"
          />
        </div>
      </div>

      <div class="col-xs-12 col-sm-11">
        <div class="col-12 text-top0 row items-center">
          เหตุผลอื่น ๆ ในการพิจารณา
        </div>
        <q-input
          type="textarea"
          outlined
          dense
          class="col-12"
          v-model="formData.reason"
          lazy-rules
          autogrow
          hide-bottom-space
          :row="3"
          :readonly="!status"
        />
      </div>

      <div class="col-xs-12 col-sm-11">
        <div class="col-12 row q-col-gutter-md">
          <div class="col-xs-12 col-sm-6">
            <div class="col-12 text-top0 items-center">
              ผลการทดลองปฏิบัติหน้าที่ราชการ
            </div>
            <div class="col-12">
              <q-select
                class="col-12"
                dense
                v-model="formData.pass_result"
                outlined
                :options="result_option"
                option-label="name"
                option-value="value"
                map-options
                emit-value
                :readonly="!status"
              />
            </div>
          </div>
          <div class="col-xs-12 col-sm-6">
            <div class="col-12 text-top0 items-center">
              วัน เดือน ปี ที่ประเมิน
            </div>
            <div class="col-12">
              <datepicker
                v-model="formData.evaluate_date"
                :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
                    :readonly="!status"
                    class="full-width datepicker"
                    :model-value="
                      formData.evaluate_date != null
                        ? date2Thai(formData.evaluate_date)
                        : null
                    "
                    :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>
    </div>
  </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;
}

.color-txt {
  color: black !important;
}

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