<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

/**
 * import type
 */
import type {
  OptionQuestions,
  OptionQuestions2,
} from "@/modules/06_retirement/interface/request/Main";
import type { QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
/** use */
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  success,
  dialogMessageNotify,
} = mixin;

/**
 * ตัวแปร
 */
const myForm = ref<QForm | null>(null);
const roleAdmin = ref<boolean>(false);
const Org = ref<string>("");
const PositionLevel = ref<string>("");
const Position = ref<string>("");
const prefix = ref<string>("");
const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
const adjust = ref<any>([]);
const timeThink = ref<any>();
const fullname = ref<any>("");
const avata = ref<any>("");
const realReason = ref<any>("");
const notExitFactor = ref<any>("");
const haveJob = ref<any>();
const suggestFriends = ref<any>();
const futureWork = ref<any>();
const suggestion = ref<any>("");
const comment = ref<string>("");
const score = reactive([
  { no: 1, score: "" },
  { no: 2, score: "" },
  { no: 3, score: "" },
  { no: 4, score: "" },
  { no: 5, score: "" },
  { no: 6, score: "" },
  { no: 7, score: "" },
  { no: 8, score: "" },
  { no: 9, score: "" },
  { no: 10, score: "" },
]);
const scoreTotal = ref<number | string>("");
const reasonWorkOther = ref("");
const exitFactorOther = ref("");
const suggestFriendsReason = ref("");
const haveJobReason = ref<any>("");
const futureWorkReason = ref<any>("");
const adjustOther = ref("");

/** HOOK */
onMounted(async () => {
  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
  }
  await getData();
  await fecthquestion();
});

//นำข้อมูลมาแสดง
const getData = async () => {
  showLoader();
  await http
    .get(config.API.ExitInterviewByid(dataId))
    .then((res: any) => {
      const data = res.data.result;
      avata.value = data.avatar ?? "";
      Position.value = data.position ?? "";
      PositionLevel.value = data.positionLevel ?? "";
      Org.value = data.org ?? "";
      fullname.value = data.fullname ?? "";
      prefix.value = data.prefix ?? "";
      reasonWork.value = data.reasonWork ?? [];
      reasonWorkOther.value = data.reasonWorkOther ?? "";
      timeThink.value = data.TimeThink ?? 0;
      exitFactor.value = data.exitFactor ?? [];
      exitFactorOther.value = data.exitFactorOther ?? 0;
      adjust.value = data.adjust ?? [];
      adjustOther.value = data.adjustOther ?? "";
      realReason.value = data.realReason ?? "";
      notExitFactor.value = data.notExitFactor ?? "";
      haveJob.value = data.havejob == false ? 0 : 1;
      haveJobReason.value = data.havejobReason ?? "";
      suggestFriends.value = data.suggestFriends == false ? 0 : 1;
      suggestFriendsReason.value = data.suggestFriendsReason ?? "";
      futureWork.value = data.futureWork == false ? 0 : 1;
      futureWorkReason.value = data.futureWorkReason ?? "";
      suggestion.value = data.suggestion ?? "";
      score.forEach((item, index) => {
        const scoreKey = `score${item.no}`;
        item.score = data[scoreKey] ?? 0;
        scoreTotal.value = data.scoreTotal ?? 0;
        comment.value = data.comment;
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
// เรียกคำถามแบบสอบถาม
const questionDesc = reactive<any>([
  {
    question1Desc: "",
    question2Desc: "",
    question3Desc: "",
    question4Desc: "",
    question5Desc: "",
    question6Desc: "",
    question7Desc: "",
    question8Desc: "",
    question9Desc: "",
    question10Desc: "",
  },
]);
const question1Answer = ref<OptionQuestions[]>([]);
const question2Answer = ref<OptionQuestions[]>([]);
const question3Answer = ref<OptionQuestions[]>([]);
const question4Answer = ref<OptionQuestions[]>([]);
const question7Answer = ref<OptionQuestions2[]>([]);
const question8Answer = ref<OptionQuestions2[]>([]);
const question9Answer = ref<OptionQuestions2[]>([]);
async function fecthquestion() {
  await http
    .get(config.API.questionnaireList())
    .then((result) => {
      const data = result.data.result;
      // คำถามแบบสอบถามหลัก
      for (let i = 1; i <= 10; i++) {
        questionDesc[`question${i}Desc`] =
          `${i}.` + " " + data[`question${i}Desc`];
      }
      // คำถามแบบสอบถามย่อย
      const Answer1 = data.question1Answer.map((e: any, index: number) => ({
        label: e,
        value: index,
      }));
      question1Answer.value = Answer1;
      question1Answer.value.push({
        label: "อื่น ๆ (ระบุ)",
        value: Answer1.length,
      });
      question2Answer.value = data.question2Answer.map(
        (e: any, index: number) => ({
          label: e,
          value: index,
        })
      );
      const Answer3 = data.question3Answer.map((e: any, index: number) => ({
        label: e,
        value: index,
      }));
      question3Answer.value = Answer3;
      question3Answer.value.push({
        label: "อื่น ๆ (ระบุ)",
        value: Answer3.length,
      });
      const Answer4 = data.question4Answer.map((e: any, index: number) => ({
        label: e,
        value: index,
      }));
      question4Answer.value = Answer4;
      question4Answer.value.push({
        label: "อื่น ๆ (ระบุ)",
        value: Answer4.length,
      });
      question7Answer.value = data.question7Answer.map(
        (e: any, index: number) => ({
          label: e,
          value: index,
        })
      );
      question8Answer.value = data.question8Answer.map(
        (e: any, index: number) => ({
          label: e,
          value: index,
        })
      );
      question9Answer.value = data.question9Answer.map(
        (e: any, index: number) => ({
          label: e,
          value: index,
        })
      );
    })
    .catch((err) => {
      messageError($q, err);
    });
}
//รวมคะเเนน
watch(score, () => {
  scoreTotal.value = score.reduce((accumulator, object) => {
    return accumulator + Number(object.score);
  }, 0);
});

/**
 * บันทึกให้คะเเนน
 */
const saveClick = () => {
  if (
    comment.value === "" ||
    score[0].score === "" ||
    score[1].score === "" ||
    score[2].score === "" ||
    score[3].score === "" ||
    score[4].score === "" ||
    score[5].score === "" ||
    score[6].score === "" ||
    score[7].score === "" ||
    score[8].score === "" ||
    score[9].score === "" ||
    scoreTotal.value === ""
  ) {
    dialogMessageNotify($q, "กรุณากรอกคะแนน เเละ ความคิดเห็น");
  } else {
    dialogConfirm($q, () => putData());
  }
};

/**
 * ส่งคะเเนนผ่าน API
 */
const putData = () => {
  const body = {
    score1: Number(score[0].score),
    score2: Number(score[1].score),
    score3: Number(score[2].score),
    score4: Number(score[3].score),
    score5: Number(score[4].score),
    score6: Number(score[5].score),
    score7: Number(score[6].score),
    score8: Number(score[7].score),
    score9: Number(score[8].score),
    score10: Number(score[9].score),
    scoreTotal: scoreTotal.value,
    comment: comment.value,
  };
  showLoader();
  http
    .put(config.API.commentExitInterview(dataId), body)
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      router.push(`/exit-Interview`);
    });
};
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    รายละเอียด Exit interview ของ {{ prefix }} {{ fullname }}
  </div>
  <q-card bordered class="row col-12 text-dark">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-subtitle2">
        {{ fullname }}
      </div>
      <q-space />
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-pa-md">
      <div class="col-12 row bg-white q-col-gutter-md">
        <div class="col-xs-3 col-sm-2 col-md-1 row">
          <q-img :src="avata" v-if="avata !== ''" />
          <q-img src="@/assets/avatar_user.jpg" v-else />
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12 q-pl-md">
            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
            <div class="col-12 text-detail">
              {{ Position }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">ระดับ</div>
            <div class="col-12 text-detail">
              {{ PositionLevel }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">สังกัด</div>
            <div class="col-12 text-detail">
              {{ Org }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <q-card bordered class="row col-12 text-dark q-mt-sm">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-dark">
        ข้อมูลการตอบแบบสอบถาม
      </div>
      <q-space />
    </div>
    <div class="col-12"><q-separator /></div>
    <q-form ref="myForm">
      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div
              class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
            >
              แบบสอบถาม
            </div>
            <q-separator />
            <!--                        1                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question1Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[0].score"
                    label="คะแนนข้อ 1"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question1Answer"
                type="checkbox"
                v-model="reasonWork"
                disable
              />
              <q-item-label>
                <q-input
                  v-if="reasonWork.includes(question1Answer.length - 1)"
                  v-model="reasonWorkOther"
                  disable
                  label="กรอกข้อความ"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        2                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question2Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[1].score"
                    label="คะแนนข้อ 2"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question2Answer"
                type="radio"
                v-model="timeThink"
                disable
              />
            </q-card-section>
            <!--                        3                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question3Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[2].score"
                    label="คะแนนข้อ 3"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question3Answer"
                type="checkbox"
                v-model="exitFactor"
                disable
              />
              <q-item-label>
                <q-input
                  v-if="exitFactor.includes(question3Answer.length - 1)"
                  v-model="exitFactorOther"
                  label="กรอกข้อความ"
                  dense
                  disable
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        4                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question4Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[3].score"
                    label="คะแนนข้อ 4"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question4Answer"
                type="checkbox"
                v-model="adjust"
                disable
              />
              <q-item-label>
                <q-input
                  v-if="adjust.includes(question4Answer.length - 1)"
                  v-model="adjustOther"
                  label="กรอกอื่นๆ"
                  dense
                  disable
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        5                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question5Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[4].score"
                    label="คะแนนข้อ 5"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="realReason"
                label="  "
                type="textarea"
              />
            </q-card-section>
            <!--                        6                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question6Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[5].score"
                    label="คะแนนข้อ 6"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-input
                class="col-12"
                dense
                outlined
                disable
                v-model="notExitFactor"
                label="  "
                type="textarea"
              />
            </q-card-section>
            <!--                        7                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question7Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[6].score"
                    label="คะแนนข้อ 7"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question7Answer"
                type="radio"
                v-model="haveJob"
                disable
              />

              <q-item-label>
                <q-input
                  v-if="haveJob == 0"
                  v-model="haveJobReason"
                  label="กรอกอื่นๆ"
                  dense
                  disable
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        8                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question8Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[7].score"
                    label="คะแนนข้อ 8"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question8Answer"
                type="radio"
                v-model="suggestFriends"
                disable
              />

              <q-item-label>
                <q-input
                  v-if="suggestFriends === 1"
                  v-model="suggestFriendsReason"
                  label="กรอกข้อความ"
                  dense
                  lazy-rules
                  disable
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        9                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question9Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[8].score"
                    label="คะแนนข้อ 9"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-option-group
                :options="question9Answer"
                type="radio"
                v-model="futureWork"
                disable
              />
              <q-item-label>
                <q-input
                  v-if="futureWork === 1"
                  v-model="futureWorkReason"
                  label="กรอกข้อความ"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  disable
                  class="bg-white"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-label>
            </q-card-section>
            <!--                        10                      -->
            <q-card-section>
              <div class="row">
                <div class="col-10 items-center row inline">
                  {{ questionDesc.question10Desc }}
                </div>
                <div class="col-2">
                  <q-input
                    dense
                    outlined
                    v-model="score[9].score"
                    label="คะแนนข้อ 10"
                    type="number"
                    lazy-rules
                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                  />
                </div>
              </div>
              <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="suggestion"
                label="  "
                type="textarea"
              />
            </q-card-section>

            <!-- <div class="col-12 row q-pa-sm q-col-gutter-sm"> -->
            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question1Desc }}
              </div> -->
            <!-- <div class="col-2">
                <q-input
                  dense
                  outlined
                  v-model="score[0].score"
                  label="คะแนนข้อ 1"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->
            <!-- <q-option-group
                :options="question1Answer"
                type="checkbox"
                v-model="reasonWork"
                disable
              /> -->
            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="reasonWork.includes(question1Answer.length - 1)"
                    v-model="reasonWorkOther"
                    disable
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->

            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question2Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[1].score"
                  label="คะแนนข้อ 2"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->

            <!-- <div class="col-12">
                <q-option-group
                  :options="question2Answer"
                  type="radio"
                  v-model="timeThink"
                  disable
                />
              </div> -->

            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question3Desc }}
              </div> -->

            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[2].score"
                  label="คะแนนข้อ 3"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->

            <!-- <q-option-group
                :options="question3Answer"
                type="checkbox"
                v-model="exitFactor"
                disable
              /> -->

            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="exitFactor.includes(question3Answer.length - 1)"
                    v-model="exitFactorOther"
                    label="กรอกข้อความ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->

            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question4Desc }}
              </div> -->
            <!-- 
              <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[3].score"
                  label="คะแนนข้อ 4"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->

            <!-- <q-list>
                <q-option-group
                  :options="question4Answer"
                  type="checkbox"
                  v-model="adjust"
                  disable
                />
              </q-list> -->
            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="adjust.includes(question4Answer.length - 1)"
                    v-model="adjustOther"
                    label="กรอกอื่นๆ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->
            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question5Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[4].score"
                  label="คะแนนข้อ 5"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->

            <!-- <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="realReason"
                label="  "
                type="textarea"
              /> -->

            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question6Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[5].score"
                  label="คะแนนข้อ 6"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->

            <!-- <q-input
                class="col-12"
                dense
                outlined
                disable
                v-model="notExitFactor"
                label="  "
                type="textarea"
              /> -->

            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question7Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[6].score"
                  label="คะแนนข้อ 7"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->
            <!-- <q-option-group
                :options="question7Answer"
                type="radio"
                v-model="haveJob"
                disable
              /> -->
            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="haveJob == 0"
                    v-model="haveJobReason"
                    label="กรอกอื่นๆ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->
            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question8Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[7].score"
                  label="คะแนนข้อ 8"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->
            <!-- <q-option-group
                :options="question8Answer"
                type="radio"
                v-model="suggestFriends"
                disable
              /> -->
            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="suggestFriends === 1"
                    v-model="suggestFriendsReason"
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    disable
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->
            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question9Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[8].score"
                  label="คะแนนข้อ 9"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->
            <!-- <q-option-group
                :options="question9Answer"
                type="radio"
                v-model="futureWork"
                disable
              /> -->
            <!-- <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="futureWork === 1"
                    v-model="futureWorkReason"
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    disable
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div> -->
            <!-- <div class="col-10 text-top0 items-center row inline">
                {{ questionDesc.question10Desc }}
              </div> -->
            <!-- <div class="col-2 text-top0 items-center">
                <q-input
                  dense
                  outlined
                  v-model="score[9].score"
                  label="คะแนนข้อ 10"
                  type="number"
                  lazy-rules
                  :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                />
              </div> -->
            <!-- <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="suggestion"
                label="  "
                type="textarea"
              /> -->
            <!-- </div> -->
          </q-card>

          <q-card bordered flat class="q-mt-md">
            <div
              class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
            >
              ความคิดเห็น
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="row col-12 q-pa-sm q-col-gutter-sm">
                <div class="col-10">
                  <q-input
                    dense
                    lazy-rules
                    outlined
                    v-model="comment"
                    label="กรอกความคิดเห็น"
                    type="textarea"
                    :rules="[(val) => !!val || 'กรุณากรอกความคิดเห็น']"
                  />
                </div>
                <div class="col-2 text-top0">
                  <q-input
                    dense
                    outlined
                    readonly
                    v-model="scoreTotal"
                    label="คะแนนรวม"
                    type="number"
                  />
                </div>
              </div>

              <div class="col-12"><q-separator /></div>

              <q-card-actions class="col-12 text-primary q-pa-md">
                <q-space />
                <q-btn
                  unelevated
                  label="บันทึก"
                  color="public"
                  @click="saveClick"
                >
                </q-btn>
              </q-card-actions>
            </div>
          </q-card>
        </div>
      </div>
    </q-form>
  </q-card>
</template>
<style lang="scss" scope>
.q-img {
  border-radius: 5px;
  height: 70px;
}

.text-top {
  color: gray;
  font-weight: 400;
  padding-bottom: 3px;
}

.text-detail {
  font-weight: 500;
}
</style>
