<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/store";
import http from "@/plugins/http";
import config from "@/app.config";
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
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>(true);

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

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

const result = ref<any>();
const result_option = ref<any>([
  { name: "ผ่าน", value: 1 },
  { name: "ไม่ผ่าน", value: 0 },
]);

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

onMounted(() => {
  getSurveyData();
});

const getSurveyData = async () => {
  await http
    .get(config.API.summarySurveyDetail(assignId.value))
    .then((res: any) => {
      const data = res.data.data;
      if (data !== null) {
        answer1.value = data.answer1;
        answer2.value = data.answer2;
        answer3.value = data.answer3;
        status.value = false;
      }
    })
    .catch((e) => {
      console.log(e);
    });
};
const classBordered = ref<string>("");
const save = async () => {
  await myForm.value!.validate().then((result: boolean) => {
    if (result && answer3.value !== 0) {
      const data = {
        answer1: answer1.value,
        answer2: answer2.value,
        answer3: answer3.value,
      };
      dialogConfirm($q, async () => {
        await http
          .post(config.API.summarySurveyDetail(assignId.value), data)
          .then((res: any) => {
            success($q, "บันทึกสำเร็จ");
          })
          .catch((e: any) => {
            messageError($q, e);
          })
          .finally(() => {
            getSurveyData()
          })
      });
    } else if (answer3.value == 0) {
      classBordered.value = "border_custom";
    }
  });
};
watch(answer3, () => {
  if (answer3.value == 0) {
    classBordered.value = "border_custom";
  } else classBordered.value = "";
});
</script>

<template>
  <q-form ref="myForm" class="q-pa-md">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
    </div>
    <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 :disable="!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 :disable="!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-rating :disable="!status" v-model="answer3" max="5" size="sm" color="grey" :color-selected="ratingColors"
        label="ระดับการประเมินพฤติกรรม">
        <template v-slot:tip-1>
          <q-tooltip>ไม่พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-2>
          <q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-3>
          <q-tooltip>พึงพอใจ</q-tooltip>
        </template>
        <template v-slot:tip-4>
          <q-tooltip>พึงพอใจมาก</q-tooltip>
        </template>
        <template v-slot:tip-5>
          <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
        </template>
      </q-rating>
    </div>
    <div class="col-12 q-my-md">
      <q-separator size="3px" color="grey-2" />
    </div>
  </q-form>
  <!-- <Footer /> -->
  <div class="row col-12">
    <q-space />
    <q-btn label="บันทึก" color="secondary" @click="save" v-if="status" />
  </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;
}

.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
  color: #c10015;
  padding: 10px;
}
</style>
