<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<QForm>();
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  notifyError,
  messageError,
  success,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;
const route = useRoute();

const assignId = ref<string>(route.params.form.toString());
const action = ref<string>("edit");
const status = ref<boolean>(false);

const score1 = ref<number>(0);
const score2 = ref<number>(0);
const score3 = ref<number>(0);
const Allscore = ref<number>(0);

const develop_orientation_score = ref<number>();
const develop_self_learning_score = ref<number>();
const develop_training_seminar_score = ref<number>();
const develop_other_training_score = ref<number>();
const develop_total_score = ref<number>();
const develop_orientation_percent = ref<number>();
const develop_self_learning_percent = ref<number>();
const develop_training_seminar_percent = ref<number>();
const develop_other_training_percent = ref<number>();
const develop_total_percent = ref<number>();
const develop_result = ref<number>();
const achievement_score = ref<number>();
const achievement_score_total = ref<number>();
const achievement_percent = ref<number>();
const achievement_result = ref<number>();
const behavior_score = ref<number>();
const behavior_score_total = ref<number>();
const behavior_percent = ref<number>();
const behavior_result = ref<number>();
const sum_score = ref<number>();
const sum_percent = ref<number>();
const reason = ref<string>();
const pass_result = ref<number>();
const evaluate_date = ref<Date>();
const result = ref<any>();
const result_option = ref<any>([
  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
]);

const note = ref<string>("");
const date = ref<Date>(new Date());

const saveEdit = (id: string) => {
  dialogConfirm($q, () => console.log("save"));
};
const edit = () => {
  status.value = true;
};
const cancel = () => {
  status.value = false;
};
const getReportScore = async () => {
  await http.get(config.API.summaryReportDetail(assignId.value)).then((res) => {
    const data = res.data.data;
    develop_orientation_score.value = data.develop_orientation_score;
    develop_self_learning_score.value = data.develop_self_learning_score;
    develop_training_seminar_score.value = data.develop_training_seminar_score;
    develop_other_training_score.value = data.develop_other_training_score;
    develop_total_score.value = data.develop_total_score;
    develop_orientation_percent.value = data.develop_orientation_percent;
    develop_self_learning_percent.value = data.develop_self_learning_percent;
    develop_training_seminar_percent.value =
      data.develop_training_seminar_percent;
    develop_other_training_percent.value = data.develop_other_training_percent;
    develop_total_percent.value = data.develop_total_percent;
    develop_result.value = data.develop_result;

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

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

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

    reason.value = data.reason;
    pass_result.value = data.pass_result;
    evaluate_date.value = data.evaluate_date;
  });
};
onMounted(() => {
  getReportScore();
});
</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>
    </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">{{ achievement_score }}</div>
                  <div class="col">{{ achievement_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>

            <q-item-section side v-if="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">{{ behavior_score }}</div>
                  <div class="col">{{ behavior_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>
            <q-item-section side v-if="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">{{ sum_score }}</div>
                  <div class="col">{{ sum_percent }}</div>
                </div>
              </q-item-label>
            </q-item-section>

            <q-item-section side v-if="pass_result == 1">
              ผ่าน (สูงกว่าร้อยละ 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"
                :disable="!status"
                v-model="develop_orientation_score"
              />
            </div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="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"
                :disable="!status"
                v-model="develop_self_learning_score"
              />
            </div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="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"
                :disable="!status"
                v-model="develop_training_seminar_score"
              />
            </div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="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"
                :disable="!status"
                v-model="develop_other_training_score"
              />
            </div>
            <div class="col">
              <q-input
                outlined
                dense
                type="number"
                :disable="!status"
                v-model="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">{{ develop_total_score }}</div>
              <div class="col q-pl-md">{{ 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="develop_result"
                outlined
                :options="result_option"
                option-label="name"
                option-value="value"
                map-options
                emit-value
                :disable="!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="reason"
          lazy-rules
          autogrow
          hide-bottom-space
          :row="3"
          :disable="!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="pass_result"
                outlined
                :options="result_option"
                option-label="name"
                option-value="value"
                map-options
                emit-value
                :disable="!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
                menu-class-name="modalfix"
                v-model="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
                    :disable="!status"
                    class="full-width datepicker"
                    :model-value="evaluate_date != null ? date2Thai(evaluate_date) : null"
                    :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>
    </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>
