<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type { QForm } from "quasar";

const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();

const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;

/**
 * ฟอร์มคำถาม
 */
const myForm = ref<QForm | null>(null);
// set คำถามที่ 1
const question1Desc = ref<string>(
  "เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
);
const question1Score = ref<number>(0);
const question1Answer = ref<any>([]);

// set คำถามที่ 2
const question2Desc = ref<string>(
  "สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด"
);
const question2Score = ref<number>(0);
const question2Answer = ref<any>([
  "น้อยกว่า 2 สัปดาห์",
  "1 เดือน - 3 เดือน",
  "3 เดือน - 6 เดือน",
  "6 เดือนขึ้นไป",
]);

// set คำถามที่ 3
const question3Desc = ref<string>(
  "ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)"
);
const question3Score = ref<number>(0);
const question3Answer = ref<any>([
  "อัตราเงินเดือน",
  "สวัสดิการ",
  "ลักษณะงาน",
  "ระบบการทำงาน",
  "ระบบสนับสนุนการปฏิบัติงาน",
  "การมอบหมายงานที่ชัดเจนและเหมาะสม",
  "การบริหารงานของผู้บังคับบัญช",
  "การทำงานเป็นทีมกับเพื่อนร่วมงาน",
  "ระบบบริหารงานภายในหน่วยงาน",
  "บรรยากาศในการทำงาน",
  "การปฏิบัติอย่างเป็นธรรม",
  "การยอมรับความแตกต่างหลากหลาย",
  "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
  "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
  "โอกาสความก้าวหน้า",
]);
// set คำถามที่ 4
const question4Desc = ref<string>(
  "อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
);
const question4Score = ref<number>(0);
const question4Answer = ref<any>([
  "อัตราเงินเดือน ",
  "สวัสดิการ",
  "ลักษณะงาน",
  "ระบบการทำงาน",
  "ระบบสนับสนุนการปฏิบัติงาน",
  "การมอบหมายงานที่ชัดเจนและเหมาะสม",
  "การบริหารงานของผู้บังคับบัญช",
  "การทำงานเป็นทีมกับเพื่อนร่วมงาน",
  "ระบบบริหารงานภายในหน่วยงาน",
  "บรรยากาศในการทำงาน",
  "การปฏิบัติอย่างเป็นธรรม",
  "การยอมรับความแตกต่างหลากหลาย",
  "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
  "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
  "โอกาสความก้าวหน้า",
]);
// set คำถามที่ 5
const question5Desc = ref<string>(
  "โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
);
const question5Answer = ref<any>([]);
const question5Score = ref<number>(0);
// set คำถามที่ 6
const question6Desc = ref<string>(
  "ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question6Answer = ref<any>([]);
const question6Score = ref<number>(0);
// set คำถามที่ 7
const question7Desc = ref<string>(
  "ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร"
);
const question7Score = ref<number>(0);
const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);
// set คำถามที่ 8
const question8Desc = ref<string>(
  "ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question8Score = ref<number>(0);
const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);
// set คำถามที่ 9
const question9Desc = ref<string>(
  "หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
);
const question9Score = ref<number>(0);
const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
// set คำถามที่ 10
const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่นๆ");
const question10Answer = ref<any>([]);
const question10Score = ref<number>(0);

//นำข้อมูลมาแสดง
async function getData() {
  showLoader();
  await http
    .get(config.API.questionExitInterview())
    .then(async (res) => {
      const data = await res.data.result;
      question1Score.value = data.question1Score ?? 0;
      question2Score.value = data.question2Score ?? 0;
      question3Score.value = data.question3Score ?? 0;
      question4Score.value = data.question4Score ?? 0;
      question5Score.value = data.question5Score ?? 0;
      question6Score.value = data.question6Score ?? 0;
      question7Score.value = data.question7Score ?? 0;
      question8Score.value = data.question8Score ?? 0;
      question9Score.value = data.question9Score ?? 0;
      question10Score.value = data.question10Score ?? 0;
      question1Desc.value = data.question1Desc;
      question1Answer.value = data.question1Answer;
      question2Desc.value = data.question2Desc;
      question2Answer.value = data.question2Answer;
      question3Desc.value = data.question3Desc;
      question3Answer.value = data.question3Answer;
      question4Desc.value = data.question4Desc;
      question4Answer.value = data.question4Answer;
      question5Desc.value = data.question5Desc;
      question5Answer.value = data.question5Answer;
      question6Desc.value = data.question6Desc;
      question6Answer.value = data.question6Answer;
      question7Desc.value = data.question7Desc;
      question7Answer.value = data.question7Answer;
      question8Desc.value = data.question8Desc;
      question8Answer.value = data.question8Answer;
      question9Desc.value = data.question9Desc;
      question9Answer.value = data.question9Answer;
      question10Desc.value = data.question10Desc;
      question10Answer.value = data.question10Answer;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นเช็คข้อมูลก่อนคอนเฟริม
 */
function confirmClick() {
  dialogConfirm($q, () => putData());
}
function putData() {
  const body = {
    question1Desc: question1Desc.value,
    question1Score: question1Score.value,
    question1Answer: question1Answer.value,

    question2Desc: question2Desc.value,
    question2Score: question2Score.value,
    question2Answer: question2Answer.value,

    question3Desc: question3Desc.value,
    question3Score: question3Score.value,
    question3Answer: question3Answer.value,

    question4Desc: question4Desc.value,
    question4Score: question4Score.value,
    question4Answer: question4Answer.value,

    question5Desc: question5Desc.value,
    question5Score: question5Score.value,
    question5Answer: question5Answer.value,

    question6Desc: question6Desc.value,
    question6Score: question6Score.value,
    question6Answer: question6Answer.value,

    question7Desc: question7Desc.value,
    question7Score: question7Score.value,
    question7Answer: question7Answer.value,

    question8Desc: question8Desc.value,
    question8Score: question8Score.value,
    question8Answer: question8Answer.value,

    question9Desc: question9Desc.value,
    question9Score: question9Score.value,
    question9Answer: question9Answer.value,

    question10Desc: question10Desc.value,
    question10Score: question10Score.value,
    question10Answer: question10Answer.value,
  };
  showLoader();
  http
    .put(config.API.questionExitInterview(), body)
    .then(() => {
      router.push(`/retirement/exit-interview`);
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * HOOK
 */
onMounted(async () => {
  await getData();
});
</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)"
    />
    แก้ไขคำถาม
  </div>

  <q-card bordered class="row col-12 text-dark q-mt-sm">
    <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 1
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question1Desc"
                  label="คำถามข้อที่ 1"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question1Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question1Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question1Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 2
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question2Desc"
                  label="คำถามข้อที่ 2"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question2Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question2Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question2Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 3
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question3Desc"
                  label="คำถามข้อที่ 3"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question3Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question3Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question3Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 4
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question4Desc"
                  label="คำถามข้อที่ 4"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question4Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question4Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question4Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 5
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question5Desc"
                  label="คำถามข้อที่ 5"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question5Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 6
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question6Desc"
                  label="คำถามข้อที่ 6"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question6Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 7
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question7Desc"
                  label="คำถามข้อที่ 7"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
                  ]"
                />
              </div>
              <div class="col-2 text-top0">
                <q-input
                  v-model="question7Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question7Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question7Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 8
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question8Desc"
                  label="คำถามข้อที่ 8"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question8Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question8Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question8Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 9
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question9Desc"
                  label="คำถามข้อที่ 9"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question9Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>

              <div
                v-for="(data, index) in question9Answer"
                :key="index"
                class="row col-12"
              >
                <div class="col-6">
                  <q-input
                    v-model="question9Answer[index]"
                    :label="`คำตอบที่ ${index + 1}`"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="inputgreen"
                    :rules="[
                      (val:string) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
                    ]"
                  />
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <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 q-py-sm q-px-md text-bold">
              คำถามข้อที่ 10
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-10 text-top0">
                <q-input
                  v-model="question10Desc"
                  label="คำถามข้อที่ 10"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) =>
                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
                  ]"
                />
              </div>

              <div class="col-2 text-top0">
                <q-input
                  v-model="question10Score"
                  label="กรอกคะแนน"
                  dense
                  lazy-rules
                  type="text"
                  autogrow
                  hide-bottom-space
                  outlined
                  class="inputgreen"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
                  ]"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

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

      <q-card-actions class="text-primary q-pa-md">
        <q-space />
        <q-btn unelevated label="บันทึก" color="public" @click="confirmClick">
        </q-btn>
      </q-card-actions>
    </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>
