<script setup lang="ts">
import { ref, onMounted,watch,computed } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
// import { formatDate } from "@fullcalendar/core";

import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const probationStore = useProbationDataStore();
const mixin = useCounterMixin();
const {
  date2Thai,
  success,
  notifyError,
  dateToISO,
  messageError,
  dialogConfirm,
  dialogMessageNotify
} = mixin;
const { ratingColors } = probationStore;
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.id.toString());

const person = ref<any>([]);
const assign = ref<any>([]);
const evaluate_no = ref<string>("");
const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const round = ref<number>();

const checkArray = ref<number>(0);
  const alerts = Array(20)
  .fill(null)
  .map(() => ref<boolean>(false));
onMounted(async () => {
  await fecthFormdata(assignId.value);
});
const fecthFormdata = async (id: string) => {
  await http
    .get(config.API.formevaluateRecord(id))
    .then((res: any) => {
      evaluate_no.value = res.data.data.evaluate_no;
      start_date.value = res.data.data.start_date;
      date_finish.value = res.data.data.end_date;
      round.value = res.data.data.evaluate_no;

      person.value = res.data.data.person;
      assign.value = res.data.data.assign;
      option.value.push(res.data.data.director);
      Autherise.value = res.data.data.director.name;

      list1_1.value = res.data.data.assign_output;
      res.data.data.assign_output.forEach((e: any) => {
        list1_2.push({ id: "", label: "" })
      });
      evaluate_expenct_level.value = res.data.data.assign_output.map((e:any) => ({
        id: e.id,
        labal: e.output_desc,
      }));
      evaluate_ouptut.value = res.data.data.assign_output.map((e:any) => ({
        id: e.id,
        text: "",
      }));
      checkArray.value = list1_1.value.length;
    })
    .catch((e: any) => {
    });
};

const list1_1 = ref<any>([
  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
]);
const list1_2 = [{ id: "", label: "" }];
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 option = ref<any>([]);

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 evaluate_expenct_level = ref<any>([]);


const evaluate_ouptut = ref<any>([
  // { level: 0, text: "" },
  // { level: 0, text: "" },
  // { level: 0, text: "" },
  // { level: 0, text: "" },
  // { level: 0, text: "" },
]);
const knowledge_level = ref<number>(0);
const skill_level = ref<number>(0);
const competency_level = ref<number>(0);
const learn_level = ref<number>(0);
const apply_level = ref<number>(0);
const success_level = ref<number>(0);
const etc = ref<any>(false); // checkBox 1.8
const achievement_other = ref<any>({ text: "", level: 0 });
// const etc_text = ref<string>("");
// const ext_value = ref<number>(0);
const achievement_strength_desc = ref<string>("");
const achievement_improve_desc = ref<string>("");
// 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 });
// const etc_text2 = ref<string>("");
// const ext_value2 = ref<number>(0);
const behavior_strength_desc = ref<string>("");
const behavior_improve_desc = ref<string>("");
// part 3
const orientation = ref<any>(null);
const self_learning = ref<any>(null);
const training_seminar = ref<any>(null);
const other_training = ref<any>(null);
// footer
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());

//rules
const evaluate_ouptutRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
];
const achievement_strengthRef = ref<any>(null);
const achievement_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];
const achievement_inproveRef = ref<any>(null);
const achievement_inproveRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
];
const behavio_strengthRef = ref<any>(null);
const behavio_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];
const behavio_inproveRef = ref<any>(null);
const behavio_inproveRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
];
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 lengthevaluate_expenct_level = computed(() => {
  return evaluate_expenct_level.value.filter((item:any) => item.level !== undefined && item.level !== 0).length;
});
const lengthevaluate_ouptut = computed(() => {
  return evaluate_ouptut.value.filter((item:any) => item.level !== undefined && item.level !== 0).length;
});
const variablesToWatch = [
  knowledge_level,
  skill_level,
  competency_level,
  learn_level,
  apply_level,
  success_level,
];
const ArrayCountbotton = [
  orientation,
  self_learning,
  training_seminar,

];
const savaForm = () => {
  achievement_strengthRef.value.validate();
  // achievement_inproveRef.value.validate();
  behavio_strengthRef.value.validate();
  // behavio_inproveRef.value.validate();

  let hasError = false;
  // const filterlevel1_1 = evaluate_expenct_level.value.filter(
  //   (e: any) => e.level == 0
  // );
  // const filter_ouptut1_2 = evaluate_ouptut.value.filter(
  //   (e: any) => e.level == 0 || e.text == ""
  // );

  if (
    // filterlevel1_1.length != 0 ||
    // filter_ouptut1_2.length != 0 ||
    lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length||
    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length||
    knowledge_level.value === 0 ||
    skill_level.value === 0 ||
    competency_level.value === 0 ||
    learn_level.value === 0 ||
    apply_level.value === 0 ||
    success_level.value === 0 ||
    achievement_strength_desc.value === "" ||
    // achievement_improve_desc.value === "" ||
    lengthconduct.value !== 4 ||
    lengthmoral_level.value !== 3 ||
    lengthdiscipline_level.value !== 5 ||
    behavior_strength_desc.value === "" ||
    // behavior_improve_desc.value === "" ||
    orientation.value === null ||
    self_learning.value === null ||
    training_seminar.value === null
  ) {
    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 === "" ||
        behavio_orther.value.text == undefined ||
        behavio_orther.value.level === undefined ||
        behavio_orther.value.level == 0))
  ) {
    hasError = true;
  }

  if (hasError === true) {
    variablesToWatch.forEach((item, index) => {
      if (item.value === 0) {
        alerts[index+2].value = true;
      }
    });
    if(lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length){
      alerts[0].value = true
    }
    if(lengthevaluate_ouptut.value !== evaluate_ouptut.value.length){
      alerts[1].value = true
    }
    if (lengthconduct.value !== 4) {
      alerts[8].value = true;
    }
    if (lengthmoral_level.value !== 3) {
      alerts[9].value = true;
    }
    if (lengthdiscipline_level.value !== 5) {
      alerts[10].value = true;
    }
    ArrayCountbotton.forEach((item, index) => {
      if (item.value === null) {
        alerts[index + 11].value = true;
      }
    });
    console.log(evaluate_expenct_level.value)

    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
  } else {
    putformData()
  }

};

const putformData = () => {
  const data = {
    evaluate_no: evaluate_no.value,
    start_date: start_date.value,
    date_finish: date_finish.value,
    evaluate_expenct_level: evaluate_expenct_level.value,
    evaluate_ouptut: evaluate_ouptut.value,
    knowledge_level: knowledge_level.value,
    skill_level: skill_level.value,
    competency_level: competency_level.value,
    learn_level: learn_level.value,
    apply_level: apply_level.value,
    success_level: success_level.value,
    achievement_other: achievement_other.value,
    // achievement_other_desc: etc_text.value,
    // achievement_other_level: ext_value.value,
    achievement_strength_desc: achievement_strength_desc.value,
    achievement_improve_desc: achievement_improve_desc.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],
    // behavio_orther_desc: etc_text2.value,
    // behavio_orther_level: ext_value2.value,
    behavio_orther: behavio_orther.value,
    behavior_strength_desc: behavior_strength_desc.value,
    behavior_improve_desc: behavior_improve_desc.value,
    orientation: Number(orientation.value),
    self_learning: Number(self_learning.value),
    training_seminar: Number(training_seminar.value),
    other_training: Number(other_training.value),
    assessor_dated: dateToISO(dateAutherise.value),
    // commander_dated: dateAutherise.value,
  };
  dialogConfirm($q, async () => await saveformdata(data));
};

const saveformdata = async (data: any) => {
  await http
    .post(config.API.createformevaluate(assignId.value), data)
    .then((res: any) => {
      success($q, "บันทึกสำเร็จ");
      router.push(
        `/probation/detail/${personalId.value}/${assignId.value}`
      );
    })
    .catch((e: any) => {
      messageError($q, e);
    });
};

variablesToWatch.forEach((variable, index) => {
  watch(variable, (item: any) => {
    if (item !== 0) {
      alerts[index+2].value = false;
    }
  });
});
ArrayCountbotton.forEach((variable, index) => {
  watch(variable, (item: any) => {
    if (item !== null) {
      alerts[index + 11].value = false;
    }
  });
});
watch(lengthevaluate_expenct_level, (newLength) => {
  if (newLength === evaluate_expenct_level.value.length) {
    console.log(true)
    alerts[0].value = false;
  }
});
watch(lengthevaluate_ouptut, (newLength) => {
  if (newLength === evaluate_ouptut.value.length) {
    console.log(true)
    alerts[1].value = false;
  }
});
watch(lengthconduct, (newLength) => {
  if (newLength === 4) {
    alerts[8].value = false;
  }
});
watch(lengthmoral_level, (newLength) => {
  if (newLength === 3) {
    alerts[9].value = false;
  }
});
watch(lengthdiscipline_level, (newLength) => {
  if (newLength === 5) {
    alerts[10].value = false;
  }
});
const getBordered = (i: boolean) => {
  return {
    border_custom: i,
  };}
</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-md">
        <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">{{ "ครั้งที่ " + round }}</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 class="col-12 text-top0 row items-center q-pl-lg">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
            </div>
            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2 ">
              ผลผลิตของงานที่คาดหวัง
            </div>
            <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[0].value)]">
              <q-list dense v-for="(list, i) in list1_1" :key="i">
                <q-item dense tag="label" v-ripple>
                  <q-item-section>
                    <q-item-label>{{ list.output_desc }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>

                    <q-rating v-model="evaluate_expenct_level[i].level" :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 < list1_1.length" />
              </q-list>
            </q-card>
          </div>
          <div class="col-12 row">
            
            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
              ผลผลิตของงานที่เกิดขึ้นจริง
            </div>
            <q-card flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[1].value)]">
              <q-list dense v-for="(list, i) in list1_2" :key="i">
                <q-item dense tag="label" v-ripple v-if="i < checkArray">
                  <q-item-section>
                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                    <q-input outlined dense v-model="evaluate_ouptut[i].text" lazy-rules autogrow
                      label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1" :rules="evaluate_ouptutRules" />
                  </q-item-section>
                  <q-item-section side>
                    <q-rating v-model="evaluate_ouptut[i].level" :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 < list1_2.length" /> -->
              </q-list>
            </q-card>
          </div>

          <div class="col-12 row">
            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
              <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.2. ความรู้ความสามารถ</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-rating v-model="knowledge_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-sm q-pl-sm" >
              <q-list dense>
                <q-item dense tag="label" v-ripple :class="getBordered(alerts[3].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="skill_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-sm q-pl-sm">
              <q-list dense>
                <q-item dense tag="label" v-ripple :class="getBordered(alerts[4].value)">
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.4. สมมรถนะ</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-rating v-model="competency_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-sm q-pl-sm">
              <q-list dense>
                <q-item dense tag="label" v-ripple :class="getBordered(alerts[5].value)">
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.5. ความสามารถในการเรียนรู้งาน</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-sm q-pl-sm">
              <q-list dense>
                <q-item dense tag="label" v-ripple :class="getBordered(alerts[6].value)">
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.6.
                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</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-sm q-pl-sm">
              <q-list dense>
                <q-item dense tag="label" v-ripple :class="getBordered(alerts[7].value)">
                  <q-item-section>
                    <q-item-label>
                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                      1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</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-sm q-pl-sm">
              <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.8 อื่นๆ
                      <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-sm q-mt-sm 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>

          <div class="row col-12 q-gutter-lg no-margin">
            <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" />
                จุดเด่น (ไม่เกิน 5 บรรทัด)
              </div>
              <q-input outlined dense v-model="achievement_strength_desc"
                class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules type="textarea" label="กรอกจุดเด่น"
                hide-bottom-space :row="5" :rules="achievement_strengthRules" ref="achievement_strengthRef" />
            </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" />
                สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
              </div>
              <q-input outlined dense v-model="achievement_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
                type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5" />
            </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 flat bordered               :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[8].value)]">
                <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 flat bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[9].value)]">
                <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 bordered :class="['col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1', getBordered(alerts[10].value)]">
                <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>
            <!-- <FormComment /> -->
            <div class="row col-12 q-gutter-lg no-margin">
              <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" />
                  จุดเด่น (ไม่เกิน 5 บรรทัด)
                </div>
                <q-input outlined dense v-model="behavior_strength_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
                  lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5" :rules="behavio_strengthRules"
                  ref="behavio_strengthRef" />
              </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" />
                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
                </div>
                <q-input outlined dense v-model="behavior_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
                  type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5" />
              </div>
            </div>
          </div>

          <!-- Part 3 -->
          <!-- <Part3 /> -->
          <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">3</q-avatar>
                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
              </div>
              <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
                <q-list dense>
                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[11].value)">
                    <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 :class="getBordered(alerts[12].value)">
                    <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 :class="getBordered(alerts[13].value)">
                    <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-card>
            </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 class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
                  label="ผู้บังคับบัญชา" option-label="name" disable />
                <div class="col-xs-12 col-sm-4">
                  <datepicker 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"
            />
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<style lang="scss" scoped>
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}

.q-rating__icon {
  text-shadow: transparent !important;
}

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
  // color: #c10015;
}
</style>
