<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";

import { useCounterMixin } from "@/stores/mixin";

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

import criterion from "@/modules/05_placement/components/probation/Criterion.vue";

import type { ListDataText } from "@/modules/05_placement/interface/index/Main";

const router = useRouter();
const routeName = router.currentRoute.value.name;
const $q = useQuasar();
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
const probationStore = useProbationDataStore();
const { fecthAssignoutput, assign } = probationStore;

const mixin = useCounterMixin();
const {
  date2Thai,
  success,
  notifyError,
  dateToISO,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
} = mixin;

const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());

const start_date = ref<Date>(new Date());
const date_finish = ref<Date>(new Date());
const status = ref<boolean>(false);
const evaluate_id = ref<string>("");
const evaluate_no = ref<number>(1);
const dataArr = ref<any>();

const checkArray = ref<number>(0);
const list1_1 = ref<any>([]);
const option = ref<any>([]);

// part 1
const evaluate_expenct_level = ref<any>([
  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
]);
const evaluate_ouptut = ref<any>([{ 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 etc = ref<any>(false); // checkBox 1.8
const achievement_other = ref<any>({ text: "", level: 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 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_inproveRef = ref<any>(null);
const behavio_strengthRef = ref<any>(null);
const behavio_inproveRef = ref<any>(null);

const list1_2 = [
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
];

const list2_1 = probationStore.behavior_no1;
const list2_2 = probationStore.behavior_no2;
const list2_3 = probationStore.behavior_no3;

const achievement_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];

const behavio_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];

/** รับค่า props มาจากหน้าหลัก */
const props = defineProps({
  tab: String,
  data: Object,
  action: String,
  fecthAssign: Function,
});

const optionText = ref<ListDataText[]>([
  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
]);

/** ให้ status true */
function edit() {
  status.value = true;
}

/** ให้ status false
 * เรียกใช้ ฟังชั่น จากหน้าหลัก
 */
function cancel() {
  status.value = false;
  props.fecthAssign?.(assignId.value);
}

/** get data */
async function fecthFormdata() {
  await http
    .get(config.API.formevaluateRecordCommander(assignId.value))
    .then(async (res: any) => {
      await fecthAssignoutput(res.data.result);
      await fectFormfull();
      !probationStore.checkLoad && hideLoader();
    })
    .catch((e: any) => {
      !probationStore.checkLoad && hideLoader();
    })
    .finally(() => {
      if (props.action == "edit") {
        fecthFormRound();
      }
    });
}

/** get data */
async function fectFormfull() {
  Autherise.value = probationStore.director;
  list1_1.value = probationStore.assignOutput;
  evaluate_expenct_level.value = await probationStore.assignOutput.map(
    (e: any) => ({
      id: e.id,
      labal: e.output_desc,
    })
  );
  evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({
    id: e.id,
  }));
  checkArray.value = list1_1.value.length;
  fecthFormRound();
}

/** get data */
async function fecthFormRound() {
  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;
    achievement_other.value.text = data.achievement_other_desc;
    achievement_other.value.level = data.achievement_other_level;
    achievement_strength_desc.value = data.achievement_strength_desc;
    achievement_improve_desc.value = data.achievement_improve_desc;
    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;
    behavior_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();
    dateAutherise.value = data.assessor_dated;

    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;
    if (data.achievements) {
      await data.achievements.map((e: any, index: number) => {
        evaluate_expenct_level.value[index].level = e.evaluate_expect_level;
        evaluate_ouptut.value[index].text = e.evaluate_output_desc;
        evaluate_ouptut.value[index].level = e.evaluate_output_level;
      });
    }

    status.value = false;
  } catch (error) {
    hideLoader();
  }
}

/** เช็คก่อน save */
function savaForm() {
  achievement_strengthRef.value.validate();
  achievement_inproveRef.value.validate();
  behavio_strengthRef.value.validate();
  behavio_inproveRef.value.validate();

  let hasError = false;
  if (
    knowledge_level.value === 0 ||
    skill_level.value === 0 ||
    competency_level.value === 0 ||
    learn_level.value === 0 ||
    apply_level.value === 0 ||
    achievement_strength_desc.value === "" ||
    conduct_level.value.length < 4 ||
    moral_level.value.length < 3 ||
    discipline_level.value.length < 5 ||
    behavior_strength_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;
  } else putformData();

  if (hasError === true) {
    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
  }
}

/** ยืนยัน save data */
function 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,
    achievement_other: achievement_other.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: 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),
  };

  dialogConfirm($q, () =>
    props.action == "edit" ? editData(data) : saveformdata(data)
  );
}

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

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

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

onMounted(async () => {
  if (props.tab && props.action == "edit") {
    evaluate_no.value = Number(props.tab.charAt(4));
    dataArr.value = await props.data;
    fecthFormdata();
  }
});
</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>
      <div v-if="status == false">
        <q-btn
          v-if="
            !checkRoutePermisson && probationStore.dataPermissions?.tab3.isEdit
          "
          dense
          flat
          round
          color="edit"
          @click="edit()"
          icon="edit"
        >
          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
        </q-btn>
      </div>
      <div v-else>
        <q-btn
          v-if="!checkRoutePermisson"
          dense
          flat
          round
          color="red"
          @click="cancel()"
          icon="mdi-undo"
        >
          <q-tooltip>ยกเลิก</q-tooltip>
        </q-btn>
        <q-btn
          v-if="!checkRoutePermisson"
          dense
          flat
          round
          class="q-ml-md"
          color="public"
          @click="savaForm()"
          icon="mdi-content-save-outline"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </div>
    </div>

    <div class="col-12 row q-gutter-lg">
      <div class="col-12 row">
        <div class="col-12 row text-top0">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
        </div>

        <div class="col-12 q-pl-md q-pb-md">
          <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
            {{ probationStore.person.positionName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">ระดับตำแหน่ง</span>
            {{ probationStore.person.positionLevelName }}
          </div>
          <div class="col-12">
            <span class="text-top0 q-pl-sm">สังกัด</span>
            {{ probationStore.person.Oc ? probationStore.person.Oc : "-" }}
          </div>
        </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">{{
            "ครั้งที่ " + assign.round_no
          }}</span>
          ตั้งแต่วันที่
          <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>
        <criterion />
        <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"
        >
          <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-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="
                      evaluate_expenct_level[i]?.level == item.toString() &&
                      'active'
                    "
                    outline
                    color="grey-6"
                    :label="item"
                    @click="evaluate_expenct_level[i].level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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"
        >
          <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-input
                  outlined
                  dense
                  v-model="evaluate_ouptut[i].text"
                  lazy-rules
                  autogrow
                  hide-bottom-space
                  :row="1"
                  :rules="evaluate_ouptutRules"
                  :readonly="!status"
                />
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="
                      evaluate_ouptut[i]?.level == item.toString() && 'active'
                    "
                    outline
                    color="grey-6"
                    :label="item"
                    @click="evaluate_ouptut[i].level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>

      <div class="col-12 row">
        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs 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.2. ความรู้ความสามารถ</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="knowledge_level == item && 'active'"
                    outline
                    color="grey-6"
                    :label="item"
                    @click="knowledge_level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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-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.3. ทักษะ</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :class="skill_level == item && 'active'"
                    outline
                    :disable="!status"
                    color="grey-6"
                    :label="item"
                    @click="skill_level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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-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.4. สมมรถนะ</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="competency_level == item && 'active'"
                    outline
                    color="grey-6"
                    :label="item"
                    @click="competency_level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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-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.5. ความสามารถในการเรียนรู้งาน</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="learn_level == item && 'active'"
                    outline
                    color="grey-6"
                    :label="item"
                    @click="learn_level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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-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.6.
                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
                >
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="apply_level == item && 'active'"
                    outline
                    color="grey-6"
                    :label="item"
                    @click="apply_level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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-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.7 อื่นๆ
                  <q-checkbox
                    class="q-ml-sm"
                    dense
                    v-model="etc"
                    @click="
                      (achievement_other.text = ''),
                        (achievement_other.level = 0)
                    "
                    :disable="!status"
                /></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:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                    :readonly="!status"
                  />
                </q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-btn-group outline>
                  <q-btn
                    v-for="(item, index) in 5"
                    :disable="!status"
                    :class="achievement_other.level == item && 'active'"
                    outline
                    color="grey-6"
                    :label="item"
                    @click="achievement_other.level = item"
                  >
                    <q-tooltip>
                      <div class="text-body2">
                        <span>{{ optionText[index].label }}</span>
                      </div>
                    </q-tooltip>
                  </q-btn>
                </q-btn-group>
              </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"
            :readonly="!status"
          />
        </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"
            lazy-rules
            type="textarea"
            hide-bottom-space
            label="กรอกสิ่งที่ควรปรับปรุง"
            :row="5"
            ref="achievement_inproveRef"
            :readonly="!status"
          />
        </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"
          >
            <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-btn-group outline>
                    <q-btn
                      v-for="(item, index) in 5"
                      :disable="!status"
                      :class="conduct_level[i] == item && 'active'"
                      outline
                      color="grey-6"
                      :label="item"
                      @click="conduct_level[i] = item"
                    >
                      <q-tooltip>
                        <div class="text-body2">
                          <span>{{ optionText[index].label }}</span>
                        </div>
                      </q-tooltip>
                    </q-btn>
                  </q-btn-group>
                </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-btn-group outline>
                    <q-btn
                      v-for="(item, index) in 5"
                      :disable="!status"
                      :class="moral_level[i] == item && 'active'"
                      outline
                      color="grey-6"
                      :label="item"
                      @click="moral_level[i] = item"
                    >
                      <q-tooltip>
                        <div class="text-body2">
                          <span>{{ optionText[index].label }}</span>
                        </div>
                      </q-tooltip>
                    </q-btn>
                  </q-btn-group>
                </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-btn-group outline>
                    <q-btn
                      v-for="(item, index) in 5"
                      :disable="!status"
                      :class="discipline_level[i] == item && 'active'"
                      outline
                      color="grey-6"
                      :label="item"
                      @click="discipline_level[i] = item"
                    >
                      <q-tooltip>
                        <div class="text-body2">
                          <span>{{ optionText[index].label }}</span>
                        </div>
                      </q-tooltip>
                    </q-btn>
                  </q-btn-group>
                </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)"
              :disable="!status"
            />
          </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:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                      ]"
                      :readonly="!status"
                    />
                  </q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-btn-group outline>
                    <q-btn
                      v-for="(item, index) in 5"
                      :disable="!status"
                      :class="behavio_orther.level == item && 'active'"
                      outline
                      color="grey-6"
                      :label="item"
                      @click="behavio_orther.level = item"
                    >
                      <q-tooltip>
                        <div class="text-body2">
                          <span>{{ optionText[index].label }}</span>
                        </div>
                      </q-tooltip>
                    </q-btn>
                  </q-btn-group>
                </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="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"
              :readonly="!status"
            />
          </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="กรอกสิ่งที่ควรปรับปรุง"
              :row="5"
              ref="behavio_inproveRef"
              :readonly="!status"
            />
          </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"
                      val="0"
                      label=" ยังไม่ได้ดำเนินการ"
                      :disable="!status"
                    />
                  </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="ดำเนินการเเล้ว"
                      :disable="!status"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      v-model="self_learning"
                      val="0"
                      label=" ยังไม่ได้ดำเนินการ"
                      :disable="!status"
                    />
                  </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="ดำเนินการเเล้ว"
                      :disable="!status"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      v-model="training_seminar"
                      val="0"
                      label=" ยังไม่ได้ดำเนินการ"
                      :disable="!status"
                    />
                  </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="ดำเนินการเเล้ว"
                      :disable="!status"
                    />
                    <q-radio
                      checked-icon="task_alt"
                      unchecked-icon="panorama_fish_eye"
                      v-model="other_training"
                      val="0"
                      label=" ยังไม่ได้ดำเนินการ"
                      :disable="!status"
                    />
                  </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 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"
              option-label="label"
              label="ผู้บังคับบัญชา"
              readonly
            />
            <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"
                :readonly="!status"
              >
                <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:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                    :readonly="!status"
                  >
                    <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>

      <q-toolbar
        class="text-primary"
        v-if="routeName == 'probationFormAddresult'"
      >
        <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;
}
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
  border-right: 1px solid #c4c4c4;
}
.q-btn-group--outline > .q-btn-item.active {
  color: #2196f3 !important;
  background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
  border-left: 1px solid #2196f3 !important;
  background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
  border: 1px solid #2196f3;
  background-color: #cde6fb;
}
</style>
