<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useAssignDataStore } from "@/modules/05_placement/storeAssign";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

const router = useRouter();
const routeName = router.currentRoute.value.name;

const $q = useQuasar();
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const mixin = useCounterMixin();
const {
  date2Thai,
  notifyError,
  messageError,
  showLoader,
  hideLoader,
  success,
  dateToISO,
  dialogConfirm,
} = mixin;
const route = useRoute();
const assignId = ref<string>(route.params.form.toString());
const assignStore = useAssignDataStore();
const { assign } = assignStore;
const personalId = ref<string>(route.params.personalId.toString());

const edit = () => {
  status.value = true;
};

const cancel = () => {
  status.value = false;
};

const person = ref<any>([]);
const evaluate_no = ref<number>();
const evaluate_id = ref<string>("");
const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const commander = ref<any>([]);
const status = ref<boolean>(true);
const dataArr = ref<any>();

const props = defineProps({
  tab: String,
  data: Object,
  action: String,
});

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: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
  },
];

onMounted(async () => {
  if (props.tab && props.action == "edit") {
    evaluate_no.value = Number(props.tab.charAt(4));
    dataArr.value = await props.data;
    fecthAssign();
    fetchEvaluate();
  }
});

watch(props, async () => {
  if (props.tab && props.action == "edit") {
    evaluate_no.value = Number(props.tab.charAt(4));
    dataArr.value = await props.data;
    fecthAssign();
    fetchEvaluate();
  }
});

const fecthAssign = async () => {
  showLoader();
  await http
    .get(config.API.evaluateCreate(assignId.value))
    .then(async (res: any) => {
      console.log(res);
      if (props.action == "add") {
        person.value = res.data.data.person;
        // assign.value = res.data.data.assign;
        commander.value = res.data.data.commander;
        option.value.push(commander.value);
        Autherise.value = commander.value.name;
        evaluate_no.value = res.data.data.evaluate_no;
        start_date.value = res.data.data.start_date;
        date_finish.value = res.data.data.end_date;
      }
      Autherise.value = res.data.data.commander.name
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      if (props.action == "edit") {
        fetchEvaluate();
      }
      hideLoader();
    });
};
const fetchEvaluate = async () => {
  // showLoader();
  try {
    let data = await dataArr.value;
    evaluate_id.value = data.id;
    start_date.value = data.date_start;
    date_finish.value = data.date_finish;
    knowledge_level.value = data.knowledge_level;
    skill_level.value = data.skill_level;
    competency_level.value = data.competency_level;
    learn_level.value = data.learn_level;
    apply_level.value = data.apply_level;
    success_level.value = data.success_level;
    achievement_other.value.text = data.achievement_other_desc;
    achievement_other.value.level = data.achievement_other_level;
    conduct_level.value[0] = data.conduct1_level;
    conduct_level.value[1] = data.conduct2_level;
    conduct_level.value[2] = data.conduct3_level;
    conduct_level.value[3] = data.conduct4_level;
    moral_level.value[0] = data.moral1_level;
    moral_level.value[1] = data.moral2_level;
    moral_level.value[2] = data.moral3_level;
    discipline_level.value[0] = data.discipline1_level;
    discipline_level.value[1] = data.discipline2_level;
    discipline_level.value[2] = data.discipline3_level;
    discipline_level.value[3] = data.discipline4_level;
    discipline_level.value[4] = data.discipline5_level;
    behavio_orther.value.text = data.behavior_other_desc;
    behavio_orther.value.level = data.behavior_other_level;
    behavio_strength_desc.value = data.behavior_strength_desc;
    behavior_improve_desc.value = data.behavior_improve_desc;
    orientation.value = data.orientation.toString();
    self_learning.value = data.self_learning.toString();
    training_seminar.value = data.training_seminar.toString();
    other_training.value = data.other_training.toString();
    if (
      data.achievement_other_desc !== "" &&
      data.achievement_other_level !== null
    ) {
      etc.value = true;
    } else etc.value = false;
    if (data.behavior_other_desc !== "" && data.behavior_other_level !== null) {
      etc2.value = true;
    } else etc2.value = false;
    status.value = false;
    // setTimeout(() => {
    //   hideLoader();
    // }, 1000);
  } catch (error) {
    hideLoader();
  }
};

const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>([]);

// part 1
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);
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 });
const behavio_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);
//rules
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 savaForm = () => {
  let hasError = false;
  behavio_strengthRef.value.validate();
  // behavio_inproveRef.value.validate();
  if (
    knowledge_level.value === 0 ||
    skill_level.value === 0 ||
    competency_level.value === 0 ||
    learn_level.value === 0 ||
    apply_level.value === 0 ||
    success_level.value === 0 ||
    conduct_level.value.length < 4 ||
    moral_level.value.length < 3 ||
    discipline_level.value.length < 5 ||
    behavio_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 === undefined ||
        behavio_orther.value.text == "" ||
        behavio_orther.value.level === undefined ||
        behavio_orther.value.level == 0))
  ) {
    hasError = true;
  } else save();

  if (hasError === true) {
    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
  }
};
const save = () => {
  const data = {
    evaluate_no: evaluate_no.value,
    start_date: start_date.value,
    date_finish: date_finish.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,
    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,
    behavior_strength_desc: behavio_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),
    commander_dated: dateToISO(dateAutherise.value),
  };

  dialogConfirm($q, async () => {
    await http
      .put(
        config.API.editFormEvaluateCommader(assignId.value, evaluate_id.value),
        data
      )
      .then((res: any) => {
        status.value = false;
        success($q, "บันทึกสำเร็จ");
      })
      .catch((e: any) => {
        messageError($q, e);
      });
  });
};
</script>

<template>
  <div class="row col-12 no-margin q-pa-sm">
    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
      <!-- <q-space /> -->
      <div v-if="status == false">
        <q-btn
          dense
          flat
          round
          color="primary"
          @click="edit()"
          icon="mdi-pencil-outline"
        >
          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
        </q-btn>
      </div>
      <div v-else>
        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
          <q-tooltip>ยกเลิก</q-tooltip>
        </q-btn>
        <q-btn
          dense
          class="q-ml-md"
          flat
          round
          color="public"
          @click="savaForm()"
          icon="mdi-content-save-outline"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </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>
              <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="knowledge_level"
                  max="5"
                  size="sm"
                  color="grey"
                  :color-selected="ratingColors"
                  label="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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.2. ทักษะ</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="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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.3. สมมรถนะ</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="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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-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="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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.5.
                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</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="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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.6. ความสำเร็จของงานที่ได้รับมอบหมาย</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="ระดับการประเมินพฤติกรรม"
                  :disable="!status"
                >
                  <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.7 อื่นๆ
                  <q-checkbox
                    class="q-ml-sm"
                    :disable="!status"
                    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
                    :disable="!status"
                    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"
                  :disable="!status"
                  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>

      <!-- 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"
          >
            <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"
                    :disable="!status"
                    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"
          >
            <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"
                    :disable="!status"
                    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"
          >
            <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"
                    :disable="!status"
                    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"
              :disable="!status"
              @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
                      :disable="!status"
                      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"
                    :disable="!status"
                    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="behavio_strength_desc"
              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
              lazy-rules
              type="textarea"
              :disable="!status"
              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"
              lazy-rules
              type="textarea"
              hide-bottom-space
              label="กรอกสิ่งที่ควรปรับปรุง"
              :disable="!status"
              :row="5"
              ref="behavio_inproveRef"
            />
          </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>
                <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="ดำเนินการเเล้ว"
                      :disable="!status"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      v-model="orientation"
                      :disable="!status"
                      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"
                      :disable="!status"
                      val="1"
                      label="ดำเนินการเเล้ว"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      :disable="!status"
                      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"
                      :disable="!status"
                      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"
                      :disable="!status"
                      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"
                      :disable="!status"
                      label="ดำเนินการเเล้ว"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      v-model="other_training"
                      :disable="!status"
                      val="0"
                      label=" ยังไม่ได้ดำเนินการ"
                    />
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </div>

      <!-- Footer -->
      <div class="row col-12 q-gutter-lg no-margin justify-center">
        <div class="col-xs-12 col-sm-11 row">
          <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="ผู้บังคับบัญชา"
              disable
            />
            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="dateAutherise"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                :readonly="!status"
                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="`${'ลงวันที่'}`"
                    :disable="!status"
                    :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>
      <!-- <Footer /> -->
      <q-toolbar class="text-primary" v-if="routeName == 'FormEvaluateAdd'">
        <q-space />
        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
      </q-toolbar>
    </div>
  </div>
</template>

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

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

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

.q-card {
  box-shadow: 0px 0px 0px 0px !important;
}
</style>
