<script setup lang="ts">
import { onMounted, ref, watch } 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 { useProbationReport } from "@/modules/15_probationReport/store";

import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";

const store = useProbationReport();
const router = useRouter();
const optionText = ref<ListDataText[]>([
  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
]);

const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();

const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
const route = useRoute();

const props = defineProps({
  dataSurvey: Object,
  getSurveyData: Function,
});
const isData = defineModel<boolean>("isData", { required: true });
const dataSurvey = defineModel<any>("dataSurvey", { required: true });

const status = ref<boolean>(true);

const answer1 = ref<string>("");
const answer2 = ref<string>("");
const answer3 = ref<number>(0);

const classBordered = ref<string>("");

/** save ข้อมูล */
async function save() {
  if (answer3.value !== 0) {
    const data = {
      answer1: answer1.value,
      answer2: answer2.value,
      answer3: answer3.value,
    };
    dialogConfirm($q, async () => {
      showLoader();
      await http
        .post(config.API.summarySurveyDetail(store.assignId), data)
        .then(async () => {
          await props.getSurveyData?.();
          success($q, "บันทึกสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  } else if (answer3.value == 0) {
    classBordered.value = "border_custom";
  }
}

/** ถ้าเป็น 0 ใส่ class */
watch(answer3, () => {
  if (answer3.value == 0) {
    classBordered.value = "border_custom";
  } else classBordered.value = "";
});

watch(
  () => dataSurvey.value,
  () => {
    if (store.tabMain === "SURVEY") {
      if (dataSurvey.value !== null) {
        answer1.value = dataSurvey.value.answer1;
        answer2.value = dataSurvey.value.answer2;
        answer3.value = dataSurvey.value.answer3;
        status.value = false;
      }
    }
  }
);

/** get ค่า เมื่อโหลดหน้า */
onMounted(() => {
  if (store.tabMain === "SURVEY") {
    if (dataSurvey.value !== null) {
      answer1.value = dataSurvey.value.answer1;
      answer2.value = dataSurvey.value.answer2;
      answer3.value = dataSurvey.value.answer3;
      status.value = false;
    }
  }
});
</script>
<template>
  <q-form greedy @submit.prevent @validation-success="save()">
    <q-card-section>
      <div class="col-12 row">
        <div class="col-12 text-top0 items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
          คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
        </div>
        <div class="col-12">
          <q-input
            :readonly="!status"
            label="ความคิดเห็น"
            class="bg-white"
            dense
            borderless
            outlined
            v-model="answer1"
            type="textarea"
            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
          />
        </div>
      </div>

      <div class="col-12 row q-mt-md">
        <div class="col-12 text-top0 items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
          ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12">
          <q-input
            :readonly="!status"
            label="ความคิดเห็น"
            class="bg-white"
            dense
            borderless
            outlined
            v-model="answer2"
            type="textarea"
            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
          />
        </div>
      </div>

      <div :class="`col-12 row q-mt-md ${classBordered}`">
        <div class="text-top0 items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
        </div>
        <q-space />
        <q-btn-group outline>
          <q-btn
            v-for="(item, index) in 5"
            :disable="!status"
            :class="answer3 == item && 'active'"
            outline
            color="grey-6"
            :label="item"
            @click="answer3 = item"
          >
            <q-tooltip>
              <div class="text-body2">
                <span>{{ optionText[index].label }}</span>
              </div>
            </q-tooltip>
          </q-btn>
        </q-btn-group>
      </div>
      <div class="col-12 q-mt-md">
        <q-separator size="3px" color="grey-2" />
      </div>
      <div class="col-12 row q-pb-sm">
        <div class="col-12 text-top0 items-center q-pa-md">
          เกณฑ์การประเมินความคาดหวัง
        </div>
        <div class="q-gutter-sm row">
          <div class="col-12 row items-center">
            <div class="col-2 row justify-center">
              <q-btn outline color="grey-6" :label="'1'"> </q-btn>
            </div>
            <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
          </div>
          <div class="col-12 row items-center">
            <div class="col-2 row justify-center">
              <q-btn outline color="grey-6" :label="'2'"> </q-btn>
            </div>
            <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
          </div>
          <div class="col-12 row items-center">
            <div class="col-2 row justify-center">
              <q-btn outline color="grey-6" :label="'3'"> </q-btn>
            </div>
            <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
          </div>
          <div class="col-12 row items-center">
            <div class="col-2 row justify-center">
              <q-btn outline color="grey-6" :label="'4'"> </q-btn>
            </div>
            <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
          </div>
          <div class="col-12 row items-center">
            <div class="col-2 row justify-center">
              <q-btn outline color="grey-6" :label="'5'"> </q-btn>
            </div>
            <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
          </div>
        </div>
      </div>
    </q-card-section>
    <q-separator v-if="status" />

    <q-card-actions align="right" v-if="status">
      <q-btn label="บันทึก" color="secondary" type="submit"
        ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
      >
    </q-card-actions>
  </q-form>
</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;
}

.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
  color: #c10015;
  padding: 10px;
}
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
  border-right: 1px solid #c4c4c4;
}
.q-btn-group--outline > .q-btn-item.active {
  color: #2196f3 !important;
  background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
  border-left: 1px solid #2196f3 !important;
  background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
  border: 1px solid #2196f3;
  background-color: #cde6fb;
}
</style>
