<script setup lang="ts">
import { ref, defineAsyncComponent, computed, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
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 probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const mixin = useCounterMixin();
const {
  date2Thai,
  notifyError,
  messageError,
  showLoader,
  hideLoader,
  dateToISO,
  success,
  dialogConfirm,
  dialogMessageNotify,
} = mixin;
const route = useRoute();
const router = useRouter();
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.id.toString());
const myForm1 = ref<any>(null);
const myForm2 = ref<any>(null);
const myForm3 = ref<any>(null);
const myForm4 = ref<any>(null);
const myForm5 = ref<any>(null);
const myForm6 = ref<any>(null);
const selectResult1 = ref<any>(null);
const selectResult2 = ref<any>(null);

const person = ref<any>([]);
const assign = ref<any>([]);
const evaluate_no = ref<any>("");
const start_date = ref<any>();
const date_finish = ref<any>();
const status = ref<boolean>(true);
const chairman = ref<any>([]);
const commander = ref<any>([]);
const mentors = ref<any>([{ name: "", dated: "" }]);

onMounted(() => {
  fecthAssign(assignId.value);
});
const fecthAssign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.evaluateChairman(id))
    .then(async (res: any) => {
      person.value = await res.data.data.person;
      assign.value = await res.data.data.assign;
      evaluate_no.value = await res.data.data.evaluate_no;
      start_date.value = await res.data.data.start_date;
      date_finish.value = await res.data.data.end_date;
      chairman.value = await res.data.data.chairman;
      commander.value = await res.data.data.commander;
      mentors.value = res.data.data.mentors.map((e: any) => ({
        name: e.name,
        dated: e.dated,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const list2_1 = [
  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
  {
    id: "3",
    label:
      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
  },
  {
    id: "4",
    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
  },
];
const list2_2 = [
  {
    id: "1",
    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
  },
  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
  {
    id: "3",
    label:
      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
  },
];
const list2_3 = [
  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
  {
    id: "2",
    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
  },
  {
    id: "3",
    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
  },
  {
    id: "4",
    label:
      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
  },
  {
    id: "5",
    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
  },
];

const dateToday = ref<Date>(new Date("10-10-2023"));
const dateEnd = ref<Date>(new Date("12-10-2023"));
const period = ref<number>(1);
// part 1
const learn_level = ref<number>(0);
const apply_level = ref<number>(0);
const success_level = ref<number>(0);
const etc = ref<any>(false);
const achievement_other = ref<any>({ text: "", level: 0 });
// part 2
const conduct_level = ref<any>([]);
const moral_level = ref<any>([]);
const discipline_level = ref<any>([]);
const etc2 = ref<any>(false); // checkBox 2.4
const behavio_orther = ref<any>({ text: "", level: 0 });

// part 3
const orientation = ref<number>(0);
const self_learning = ref<number>(0);
const training_seminar = ref<number>(0);
const other_training = ref<number>(0);
const orientation_percent = ref<number>(0);
const self_learning_percent = ref<number>(0);
const training_seminar_percent = ref<number>(0);
const other_training_percent = ref<number>(0);
const evaluate_result = ref<any>();
const evaluate_result_option = ref<any>([
  { name: "ผ่าน", value: 1 },
  { name: "ไม่ผ่าน", value: 0 },
]);

const develop_result = ref<any>();
const develop_result_option = ref<any>([
  { name: "ผ่าน (สูงกว่าร้อยละ 60)", value: 1 },
  { name: "ไม่ผ่าน (ต่ำกว่าร้อยละ 60)", value: 0 },
]);
// footer
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
// const option = ref<any>([]);

// score
const score1 = computed(() => {
  if (
    etc.value === true &&
    achievement_other.value.text !== undefined &&
    achievement_other.value.level !== undefined
  ) {
    return (
      learn_level.value +
      apply_level.value +
      success_level.value +
      achievement_other.value.level
    );
  }
  return learn_level.value + apply_level.value + success_level.value;
});
const achievement_score_total: any = computed(() => {
  if (
    etc.value === true &&
    achievement_other.value.text !== undefined &&
    achievement_other.value.level !== undefined
  ) {
    return 20;
  }
  return 15;
});
const achievement_result: any = computed(() => {
  if (percent_score1.value > 60) {
    return 1;
  }
  return 0;
});
const score2 = computed(() => {
  let sum_conduct = conduct_level.value.reduce(
    (sum: number, level: number) => sum + level,
    0
  );
  let sum_moral = moral_level.value.reduce(
    (sum: number, level: number) => sum + level,
    0
  );
  let sum_discipline = discipline_level.value.reduce(
    (sum: number, level: number) => sum + level,
    0
  );
  if (
    etc2.value === true &&
    behavio_orther.value.text !== undefined &&
    behavio_orther.value.level !== undefined
  ) {
    return (
      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
    );
  } else return sum_conduct + sum_moral + sum_discipline;
});
const behavior_score_total: any = computed(() => {
  if (
    etc2.value === true &&
    behavio_orther.value.text !== undefined &&
    behavio_orther.value.level !== undefined
  ) {
    return 65;
  } else return 60;
});
const behavior_result: any = computed(() => {
  if (percent_score2.value > 60) {
    return 1;
  }
  return 0;
});
const percent_score1: any = computed(() => {
  let num = 0;
  if (etc.value === true) {
    num = 20;
  } else num = 15;
  let percent1 = (score1.value / num) * 100;
  return percent1.toFixed(2);
});
const percent_score2: any = computed(() => {
  let num = 0;
  if (etc2.value === true) {
    num = 65;
  } else num = 60;
  let percent2 = (score2.value / num) * 100;
  return percent2.toFixed(2);
});
const percent_sum: any = computed(() => {
  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
  return sum.toFixed(2);
});
const score4 = computed(() => {
  return (
    Number(orientation.value) +
    Number(self_learning.value) +
    Number(training_seminar.value) +
    Number(other_training.value)
  );
});
const score5 = computed(() => {
  return (
    Number(orientation_percent.value) +
    Number(self_learning_percent.value) +
    Number(training_seminar_percent.value) +
    Number(other_training_percent.value)
  );
});
const lengthconduct = computed(() => {
  return conduct_level.value.filter((item: number) => item !== 0).length;
});
const lengthmoral_level = computed(() => {
  return moral_level.value.filter((item: number) => item !== 0).length;
});
const lengthdiscipline_level = computed(() => {
  return discipline_level.value.filter((item: number) => item !== 0).length;
});
const variablesToWatch = [learn_level, apply_level, success_level];
const savaForm = async () => {
  let hasError = false;
  await myForm1.value.validate();
  await myForm2.value.validate();
  await myForm3.value.validate();
  await myForm4.value.validate();
  await myForm5.value.validate();
  await myForm6.value.validate();
  await selectResult1.value.validate();
  await selectResult2.value.validate();
  if (
    learn_level.value === 0 ||
    apply_level.value === 0 ||
    success_level.value === 0 ||
    lengthconduct.value !== 4 ||
    lengthmoral_level.value !== 3 ||
    lengthdiscipline_level.value !== 5 ||
    orientation.value === 0 ||
    self_learning.value === 0 ||
    training_seminar.value === 0 ||
    orientation_percent.value === 0 ||
    self_learning_percent.value === 0 ||
    training_seminar_percent.value === 0 ||
    develop_result.value === undefined ||
    evaluate_result.value === undefined
  ) {
    hasError = true;
  } else if (
    (etc.value == true &&
      (achievement_other.value.text === undefined ||
        achievement_other.value.text == "" ||
        achievement_other.value.level == undefined ||
        achievement_other.value.level === 0)) ||
    (etc2.value == true &&
      (behavio_orther.value.text === undefined ||
        behavio_orther.value.text == "" ||
        behavio_orther.value.level === undefined ||
        behavio_orther.value.level == 0))
  ) {
    hasError = true;
  } else putformData();

  if (hasError === true) {
    variablesToWatch.forEach((item, index) => {
      if (item.value === 0) {
        alerts[index].value = true;
      }
    });
    if (lengthconduct.value !== 4) {
      alerts[3].value = true;
    }
    if (lengthmoral_level.value !== 3) {
      alerts[4].value = true;
    }
    if (lengthdiscipline_level.value !== 5) {
      alerts[5].value = true;
    }
    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
  }
};
const putformData = () => {
  const data = {
    evaluate_no: evaluate_no.value,
    start_date: start_date.value,
    date_finish: date_finish.value,
    knowledge_level: learn_level.value,
    apply_level: apply_level.value,
    success_level: success_level.value,
    achievement_other: achievement_other.value,
    conduct1_level: conduct_level.value[0],
    conduct2_level: conduct_level.value[1],
    conduct3_level: conduct_level.value[2],
    conduct4_level: conduct_level.value[3],
    moral1_level: moral_level.value[0],
    moral2_level: moral_level.value[1],
    moral3_level: moral_level.value[2],
    discipline1_level: discipline_level.value[0],
    discipline2_level: discipline_level.value[1],
    discipline3_level: discipline_level.value[2],
    discipline4_level: discipline_level.value[3],
    discipline5_level: discipline_level.value[4],
    behavior_orther: behavio_orther.value,
    develop_orientation_score: Number(orientation.value),
    develop_self_learning_score: Number(self_learning.value),
    develop_training_seminar_score: Number(training_seminar.value),
    develop_other_training_score: Number(other_training.value),
    develop_orientation_percent: Number(orientation_percent.value),
    develop_self_learning_percent: Number(self_learning_percent.value),
    develop_training_seminar_percent: Number(training_seminar_percent.value),
    develop_other_training_percent: Number(other_training_percent.value),
    achievement_score: Number(score1.value),
    achievement_percent: Number(percent_score1.value),
    achievement_score_total: Number(achievement_score_total.value),
    achievement_result: Number(achievement_result.value),
    behavior_score: Number(score2.value),
    behavior_percent: Number(percent_score2.value),
    behavior_score_total: Number(behavior_score_total.value),
    behavior_result: Number(behavior_result.value),
    sum_score: Number(score1.value) + Number(score2.value),
    sum_percent: percent_sum.value,
    chairman_dated: dateToISO(dateAutherise.value),
    develop_result: Number(develop_result.value),
    evaluate_result: Number(evaluate_result.value),
  };
  dialogConfirm($q, async () => {
    await http
      .post(config.API.createformChairman(assignId.value), data)
      .then((res: any) => {
        success($q, "บันทึกสำเร็จ");
        router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
      })
      .catch((e: any) => {
        messageError($q, e);
      });
  });
};
const alerts = Array(20)
  .fill(null)
  .map(() => ref<boolean>(false));

const getBordered = (i: boolean) => {
  return {
    border_custom: i,
  };
};
variablesToWatch.forEach((variable, index) => {
  watch(variable, (item: any) => {
    if (item !== 0) {
      alerts[index].value = false;
    }
  });
});
watch(lengthconduct, (newLength) => {
  if (newLength === 4) {
    alerts[3].value = false;
  }
});
watch(lengthmoral_level, (newLength) => {
  if (newLength === 3) {
    alerts[4].value = false;
  }
});
watch(lengthdiscipline_level, (newLength) => {
  if (newLength === 5) {
    alerts[5].value = false;
  }
});
</script>

<template>
  <q-card class="my-card" flat bordered>
    <q-toolbar>
      <div
        class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
      >
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.go(-1)"
        />
        การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
      </div>
    </q-toolbar>
    <q-separator />
    <q-card-section>
      <div class="row col-12 no-margin q-px-md q-pt-sm">
        <div class="toptitle text-dark col-12 row items-center">
          <div>แบบประเมินผล (คณะกรรมการ)</div>
        </div>

        <div class="row col-12 q-gutter-lg">
          <div class="col-12 row">
            <div class="col-12 text-top0 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
              <span class="text-black q-px-sm">{{
                date2Thai(assign.date_start)
              }}</span>
              ถึงวันที่
              <span class="text-black q-px-sm">{{
                date2Thai(assign.date_finish)
              }}</span>
            </div>
            <div class="col-12 text-top0 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              <span class="text-primary q-pr-sm">{{
                `ครั้งที่ ${evaluate_no}`
              }}</span>
              ระหว่างวันที่
              <span class="text-black q-px-sm">{{
                date2Thai(start_date)
              }}</span>
              ถึงวันที่
              <span class="text-black q-px-sm">{{
                date2Thai(date_finish)
              }}</span>
            </div>
            <div class="col-12 q-pt-md">
              <q-separator size="3px" color="grey-2" />
            </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>
          <div class="col-12 row no-margin">
            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
              <q-list dense>
                <q-item
                  dense
                  tag="label"
                  v-ripple
                  :class="getBordered(alerts[0].value)"
                >
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.1. ความสามารถในการเรียนรู้งาน</q-item-label
                    >
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      v-model="learn_level"
                      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>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>

            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
              <q-list dense>
                <q-item
                  dense
                  tag="label"
                  v-ripple
                  :class="getBordered(alerts[1].value)"
                >
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.2.
                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
                    >
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      v-model="apply_level"
                      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>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>

            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
              <q-list dense>
                <q-item
                  dense
                  tag="label"
                  v-ripple
                  :class="getBordered(alerts[2].value)"
                >
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.3. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
                    >
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      v-model="success_level"
                      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>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>

            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
              <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.4 อื่นๆ
                      <q-checkbox
                        class="q-ml-sm"
                        dense
                        v-model="etc"
                        @click="
                          (achievement_other.text = ''),
                            (achievement_other.level = 0)
                        "
                    /></q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>

            <q-card
              v-if="etc"
              class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
            >
              <q-list dense>
                <q-item dense tag="label" v-ripple>
                  <q-item-section class="q-ml-md">
                    <q-item-label>
                      <q-input
                        v-model="achievement_other.text"
                        label="กรอกอื่นๆ"
                        dense
                        lazy-rules
                        autogrow
                        hide-bottom-space
                        outlined
                        class="bg-white"
                        :rules="[
                          (val) =>
                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
                        ]"
                      />
                    </q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      v-model="achievement_other.level"
                      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>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>

            <div class="text-top0 col-xs-12 col-sm-11 q-px-lg">
              <div class="row col-12 justify-between q-pa-sm">
                <div class="text-black">คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</div>
                <div class="text-weight-bold text-black">{{ score1 }}</div>
              </div>
            </div>
          </div>

          <!-- Part 2 -->
          <!-- <Part2 /> -->
          <div class="row col-12 q-gutter-lg no-margin">
            <div class="col-12 row">
              <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 text-top0 row items-center q-pl-lg">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2.1 ความประพฤติ
              </div>
              <q-card
                :class="getBordered(alerts[3].value)"
                flat
                bordered
                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
              >
                <q-list dense v-for="(list, i) in list2_1" :key="i">
                  <q-item dense tag="label" v-ripple>
                    <q-item-section>
                      <q-item-label>{{ list.label }}</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-rating
                        v-model="conduct_level[i]"
                        :val="list.id"
                        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>
                    </q-item-section>
                  </q-item>
                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
                </q-list>
              </q-card>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 row items-center q-pl-lg">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2.2 ความมีคุณธรรมจริยธรรม
              </div>
              <q-card
                :class="getBordered(alerts[4].value)"
                flat
                bordered
                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
              >
                <q-list dense v-for="(list, i) in list2_2" :key="i">
                  <q-item dense tag="label" v-ripple>
                    <q-item-section>
                      <q-item-label>{{ list.label }}</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-rating
                        v-model="moral_level[i]"
                        :val="list.id"
                        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>
                    </q-item-section>
                  </q-item>
                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
                </q-list>
              </q-card>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 row items-center q-pl-lg">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2.3 การรักษาวินัย
              </div>
              <q-card
                flat
                :class="getBordered(alerts[5].value)"
                bordered
                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
              >
                <q-list dense v-for="(list, i) in list2_3" :key="i">
                  <q-item dense tag="label" v-ripple>
                    <q-item-section>
                      <q-item-label>{{ list.label }}</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-rating
                        v-model="discipline_level[i]"
                        :val="list.id"
                        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>
                    </q-item-section>
                  </q-item>
                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
                </q-list>
              </q-card>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 row items-center q-pl-lg">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                2.4 อื่นๆ
                <q-checkbox
                  class="q-ml-sm"
                  dense
                  v-model="etc2"
                  @click="
                    (behavio_orther.text = ''), (behavio_orther.level = 0)
                  "
                />
              </div>
              <q-card
                v-if="etc2"
                flat
                bordered
                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
              >
                <q-list dense>
                  <q-item dense tag="label" v-ripple>
                    <q-item-section>
                      <q-item-label>
                        <q-input
                          v-model="behavio_orther.text"
                          label="กรอกอื่นๆ"
                          dense
                          lazy-rules
                          autogrow
                          hide-bottom-space
                          outlined
                          class="bg-white"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
                          ]"
                        />
                      </q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-rating
                        v-model="behavio_orther.level"
                        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>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
            <div
              class="text-top0 col-xs-12 col-sm-11 q-pt-sm q-px-md q-my-none"
            >
              <div class="row col-12 justify-between q-py-sm">
                <div class="text-black">คะแนนรวมพฤติกรรมการปฎิบัติราชการ</div>
                <div class="text-weight-bold text-black">{{ score2 }}</div>
              </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">3</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" />
                      3.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">{{ score1 }}</div>
                        <div class="col">{{ percent_score1 }}</div>
                      </div>
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side v-if="percent_score1 > 60">
                    ผ่าน (สูงกว่าร้อยละ 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" />
                      3.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">{{ score2 }}</div>
                        <div class="col">{{ percent_score2 }}</div>
                      </div>
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side v-if="percent_score2 > 60">
                    ผ่าน (สูงกว่าร้อยละ 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">{{ score1 + score2 }}</div>
                        <div class="col">{{ percent_sum }}</div>
                      </div>
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side v-if="percent_sum > 60">
                    ผ่าน(สูงกว่าร้อยละ 60)
                  </q-item-section>
                  <q-item-section side v-else>
                    ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <!-- Part 4 -->
          <div class="row col-12 q-gutter-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">4</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"
                      v-model="orientation"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
                      ]"
                      ref="myForm1"
                    />
                  </div>
                  <div class="col">
                    <q-input
                      outlined
                      dense
                      type="number"
                      v-model="orientation_percent"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
                      ]"
                      ref="myForm2"
                    />
                  </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
                      outlined
                      dense
                      type="number"
                      v-model="self_learning"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
                      ]"
                      ref="myForm3"
                    />
                  </div>
                  <div class="col">
                    <q-input
                      outlined
                      dense
                      type="number"
                      v-model="self_learning_percent"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
                      ]"
                      ref="myForm4"
                    />
                  </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"
                      v-model="training_seminar"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
                      ]"
                      ref="myForm5"
                    />
                  </div>
                  <div class="col">
                    <q-input
                      outlined
                      dense
                      type="number"
                      v-model="training_seminar_percent"
                      hide-bottom-space
                      :rules="[
                        (val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
                      ]"
                      ref="myForm6"
                    />
                  </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"
                      v-model="other_training"
                    />
                  </div>
                  <div class="col">
                    <q-input
                      outlined
                      dense
                      type="number"
                      v-model="other_training_percent"
                    />
                  </div>
                </div>
                <!-- <q-list dense>
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-item-label>1. การปฐมนิเทศ</q-item-label>
              </q-item-section>
              <q-item-section side>
                <div class="row">
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="orientation"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="orientation"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </div>
              </q-item-section>
            </q-item>
            <q-separator class="q-my-xs" />
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
              </q-item-section>
              <q-item-section side>
                <div class="row">
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="self_learning"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="self_learning"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </div>
              </q-item-section>
            </q-item>
            <q-separator class="q-my-xs" />
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
              </q-item-section>
              <q-item-section side>
                <div class="row">
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="training_seminar"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="training_seminar"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </div>
              </q-item-section>
            </q-item>
            <q-separator class="q-my-xs" />
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-item-label
                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <div class="row">
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </div>
              </q-item-section>
            </q-item>
          </q-list> -->
                <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">{{ score4 }}</div>
                    <div class="col q-pl-md">{{ score5 }}</div>
                  </div>
                </div>
              </q-card>
            </div>
          </div>

          <div class="row col-12 q-gutter-lg no-margin justify-center">
            <div class="col-xs-12 col-sm-11 row justify-center">
              <div class="col-12 text-top0 items-center">
                <!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
                สรุปผลการพัฒนา
              </div>
              <div class="col-12">
                <q-select
                  class="col-xs-12"
                  dense
                  v-model="develop_result"
                  outlined
                  :options="develop_result_option"
                  option-label="name"
                  option-value="value"
                  label="เลือกสรุปผลการพัฒนา"
                  map-options
                  emit-value
                  hide-bottom-space
                  :rules="[(val) => val !== null && val !== undefined || 'กรุณาเลือกสรุปผลการพัฒนา']"
                  ref="selectResult1"
                />
              </div>
            </div>
          </div>

          <div class="row col-12 q-gutter-lg no-margin justify-center">
            <div class="col-xs-12 col-sm-11 row justify-center">
              <div class="col-12 text-top0 items-center">
                <!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
                สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
              </div>
              <div class="col-12">
                <q-select
                  class="col-xs-12"
                  dense
                  v-model="evaluate_result"
                  outlined
                  :options="evaluate_result_option"
                  option-label="name"
                  option-value="value"
                  label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
                  map-options
                  emit-value
                  hide-bottom-space
                  :rules="[
                    (val) =>
                    val !== null && val !== undefined ||
                      'กรุณาเลือกสรุปผลการประเมินผลทดลองปฎิบัติหน้าที่ราชการ',
                  ]"
                  ref="selectResult2"
                />
              </div>
            </div>
          </div>

          <!-- Footer -->
          <!-- <Footer /> -->
          <div class="row col-12 q-gutter-lg no-margin justify-center">
            <div class="col-xs-12 col-sm-11">
              <div class="col-12 text-top2 row items-center">
                ผู้บังคับบัญชาผู้มอบหมายงาน
              </div>

              <div class="col-12 row q-col-gutter-md">
                <q-select
                  hide-bottom-space
                  class="col-xs-12 col-sm-8"
                  dense
                  v-model="commander.name"
                  outlined
                  label="ผู้บังคับบัญชา"
                  disable
                />
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="commander.dated"
                    :locale="'th'"
                    autoApply
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                    :readonly="!status"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        hide-bottom-space
                        outlined
                        dense
                        class="full-width datepicker col-3"
                        :model-value="
                          commander.dated != null
                            ? date2Thai(commander.dated)
                            : null
                        "
                        :label="`${'ลงวันที่'}`"
                        :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
                class="col-12 row q-col-gutter-md q-mt-sm"
                v-for="(mentor, index) in mentors"
              >
                <q-select
                  :key="index"
                  class="col-xs-12 col-sm-8"
                  hide-bottom-space
                  dense
                  v-model="mentors[index].name"
                  outlined
                  label="ผู้บังคับบัญชา"
                  disable
                />
                <datepicker
                  class="col-xs-12 col-sm-4"
                  :readonly="!status"
                  menu-class-name="modalfix"
                  v-model="mentors[index].dated"
                  :locale="'th'"
                  autoApply
                  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
                      hide-bottom-space
                      outlined
                      dense
                      class="full-width datepicker col-3"
                      :model-value="
                        mentors[index].dated != null
                          ? date2Thai(mentors[index].dated)
                          : null
                      "
                      :label="`${'ลงวันที่'}`"
                      :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 class="row col-12 q-gutter-lg no-margin justify-center">
            <div class="col-xs-12 col-sm-11">
              <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-8">
                  <q-select
                    dense
                    v-model="chairman.name"
                    outlined
                    label="คณะกรรมการ"
                    disable
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    :readonly="!status"
                    menu-class-name="modalfix"
                    v-model="dateAutherise"
                    :locale="'th'"
                    autoApply
                    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
                        class="full-width datepicker col-3"
                        :model-value="
                          dateAutherise != null
                            ? date2Thai(dateAutherise)
                            : null
                        "
                        :label="`${'ลงวันที่'}`"
                        :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 class="col-12">
            <q-separator size="3px" color="grey-2" />
          </div>
          <!-- <Footer /> -->
          <div class="row col-12">
            <q-space />
            <q-btn
              label="บันทึก"
              color="secondary"
              @click="savaForm"
              v-if="status"
            />
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<style lang="scss" scoped>
.align-center {
  display: flex;

  align-items: center;
  /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
}

.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;
}
</style>
