<script setup lang="ts">
import { ref, onMounted, computed, watch, defineAsyncComponent } from "vue";
import { useRoute, useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useProbationStore } from "@/modules/11_probation/store/probation";
import { useQuasar } from "quasar";

import Criterion from "@/modules/11_probation/component/Criterion.vue";

const Header = defineAsyncComponent(
  () => import("@/modules/11_probation/component/Header.vue")
);
const evaluate_id = ref<string>("");
const dataArr = ref<any>();
const dataArrayNumber = defineModel<Number>("dataArrayNumber");
const fullname = defineModel<string>("fullname");

const selectOp = computed(() => {
  return store.tabs.map((i: any) => ({
    id: i.id,
    name: `ครั้งที่${i.no}`,
    nameEn: `save${i.no}`,
  }));
});
const props = defineProps({
  fecthAssign: Function,
  data: Object,
});
const status = ref<boolean>(false);

const $q = useQuasar();
const store = useProbationStore();
const dateAutherise = ref<any>(new Date());
const behavior_improve_desc = ref<string>("");
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
  date2Thai,
  dialogMessageNotify,
  dateToISO,
} = mixin;
const route = useRoute();
const router = useRouter();

const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);

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 option = ref<any>([]);
const Autherise = ref<any>(null);
const list1_1 = ref<any>([]);
const list1_2 = [
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
  { id: "", label: "" },
];
const evaluate_expenct_level = ref<any>([]);
const evaluate_ouptut = ref<any>([]);
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 achievement_strength_desc = ref<string>("");
const achievement_improve_desc = ref<string>("");
const behavio_orther = ref<any>({ text: "", level: 0 });
const etc2 = ref<any>(false);

const orientation = ref<any>(null);
const self_learning = ref<any>(null);
const training_seminar = ref<any>(null);
const other_training = ref<any>(null);

const ArrayCountbotton = [orientation, self_learning, training_seminar];

const conduct_level = ref<any>([]);
const moral_level = ref<any>([]);
const discipline_level = ref<any>([]);
const behavior_strength_desc = ref<string>("");
const list2_1 = store.behavior_no1;
const list2_2 = store.behavior_no2;
const list2_3 = store.behavior_no3;
const variablesToWatch = [
  knowledge_level,
  skill_level,
  competency_level,
  learn_level,
  apply_level,
  success_level,
];

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 alerts = Array(20)
  .fill(null)
  .map(() => ref<boolean>(false));

//rules
const behavio_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];
const behavio_strengthRef = ref<any>(null);
const achievement_strengthRef = ref<any>(null);
const achievement_strengthRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
];
const evaluate_ouptutRules = [
  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
];
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;
});

/** get data */
async function fecthFormdata(id: string) {
  await http
    .get(config.API.formevaluateRecord(id))
    .then(async (res: any) => {
      await store.fecthAssignoutput(res.data.data);
      await fectFormfull();
    })
    .catch((e: any) => {})
    .finally(() => {});
}

/** get form รอบ */
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();
  }
}

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

/** return class เมื่อ true */
function getBordered(i: boolean) {
  return {
    border_custom: i,
  };
}

/** อัปเดต ข้อมูล */
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,
    success_level: success_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, async () => await editData(data));
}

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

  let hasError = false;

  if (
    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 === "" ||
    lengthconduct.value !== 4 ||
    lengthmoral_level.value !== 3 ||
    lengthdiscipline_level.value !== 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;
  }

  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;
      }
    });

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

/**
 * แก้ไขข้อมูล
 * @param data ข้อมูลที่อัปเดต
 */
async function editData(data: any) {
  await http
    .put(config.API.editFormEvaluate(id.value, evaluate_id.value), data)
    .then((res: any) => {
      status.value = false;
      success($q, "บันทึกสำเร็จ");
    })
    .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) {
    alerts[0].value = false;
  }
});

watch(lengthevaluate_ouptut, (newLength) => {
  if (newLength === evaluate_ouptut.value.length) {
    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;
  }
});

function edit() {
  status.value = true;
}

function cancel() {
  status.value = false;
  props.fecthAssign?.(id.value);
}

const evaluate_no1 = ref<number>(1);
const dataRole = ref<string>("mentor");
const tab = ref<string>("save1");
/**
 * เปลี่ยน tab
 * @param tabVal type
 */
function changeTab(tabVal: string) {
  showLoader();

  tab.value = tabVal;
  dataArrayNumber.value = Number(tabVal.charAt(4));
  setTimeout(() => {
    hideLoader();
  }, 100);
}

/** download file */
async function FileDownload(type: string) {
  let numTab = store.evaluate.find((e: any) => e.no === dataArrayNumber.value);
  //ผู้ดูเเล
  if (dataRole.value == "mentor") {
    showLoader();
    await http
      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
        responseType: "blob",
      })
      .then(async (res) => {
        downloadFile(
          res,
          `แบบบันทึกผล(ผู้ดูเเล)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
        );
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  } else {
    //ผุ้บังคับ
    showLoader();
    await http
      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
        responseType: "blob",
      })
      .then(async (res) => {
        downloadFile(
          res,
          `แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
        );
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** convert file */
function downloadFile(response: any, filename: string) {
  const link = document.createElement("a");
  var fileName = filename;
  link.href = window.URL.createObjectURL(new Blob([response.data]));
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function addData() {
  router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
}

/** เช็คค่า props */
watch(props, async () => {
  evaluate_no1.value = Number(tab.value.charAt(4));
  dataArr.value = await props.data;
  fectFormfull();
});

onMounted(async () => {
  evaluate_no1.value = Number(tab.value.charAt(4));
  dataArr.value = await props.data;
  await fecthFormdata(id.value);
});
</script>
<template>
  <Header
    v-if="store.tabs.length > 0 && $q.screen.gt.xs"
    :change-tab="changeTab"
    :add-data="addData"
    :loop="store.tabs.length"
    :FileDownload="FileDownload"
  />
  <div
    v-if="!$q.screen.gt.xs"
    class="bg-grey-2 q-pa-sm"
    style="border-radius: 10px 10px 0 0"
  >
    <q-toolbar class="q-pa-none">
      <q-select
        dense
        bg-color="white"
        v-model="tab"
        outlined
        option-label="name"
        option-value="nameEn"
        :options="selectOp"
        emit-value
        map-options
        @update:model-value="changeTab"
        style="width: 70%"
      >
      </q-select>
      <q-space />
      <q-btn flat rounded dense icon="mdi-download" color="primary">
        <q-tooltip>ดาวน์โหลด</q-tooltip>
        <q-menu>
          <q-list style="min-width: 150px">
            <q-item clickable v-close-popup @click="FileDownload('pdf')">
              <q-item-section avatar
                ><q-icon color="red" name="mdi-file-pdf"
              /></q-item-section>
              <q-item-section>ไฟล์ .PDF</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click="FileDownload('docx')">
              <q-item-section avatar
                ><q-icon color="blue" name="mdi-file-word"
              /></q-item-section>
              <q-item-section>ไฟล์ .docx</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
      <q-btn
        color="primary"
        rounded
        flat
        dense
        icon="mdi-plus"
        @click="addData"
      >
        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
      </q-btn>
    </q-toolbar>
  </div>
  <div :class="`row ${$q.screen.gt.xs ? 'q-pa-md' : 'mobileClass q-pa-sm'}`">
    <div
      :class="`toptitle text-dark col-12 row items-center ${
        $q.screen.gt.xs ? 'q-mt-md' : ''
      }`"
    >
      <div>แบบบันทึกผล (ผู้ดูเเล)</div>
      <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
          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="row text-weight-medium">
      <div class="col-12 text-grey-7 text-bold">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        ผู้ทดลองปฏิบัติหน้าที่ราชการ
        {{ store.person.name ? store.person.name : "-" }}
      </div>
      <div class="col-12">
        <span class="text-grey-7 text-weight-bold q-pl-lg"
          >ตำแหน่งในสายงาน</span
        >
        {{ store.person.positionName ? store.person.positionName : "-" }}
      </div>
      <div class="col-12">
        <span class="text-grey-7 text-weight-bold q-pl-lg">ระดับตำแหน่ง</span>
        {{
          store.person.positionLevelName ? store.person.positionLevelName : "-"
        }}
      </div>
      <div class="col-12">
        <span class="text-grey-7 text-weight-bold q-pl-lg">สังกัด</span>
        {{ store.person.Oc ? store.person.Oc : "-" }}
      </div>

      <div class="col-12 text-weight-bold row items-center text-grey-7">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
          "ครั้งที่ " + store.assign.round_no
        }}</span>
        ตั้งแต่วันที่
        <span class="text-black q-px-sm">{{
          date2Thai(store.assign.date_start)
        }}</span>
        ถึงวันที่
        <span class="text-black q-px-sm">{{
          date2Thai(store.assign.date_finish)
        }}</span>
      </div>

      <div class="col-12 text-weight-bold row items-center text-grey-7">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        บันทึกผล<span class="text-primary q-pr-sm">{{
          "ครั้งที่ " + evaluate_no1
        }}</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>

    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <q-separator size="3px" color="grey-2" />
      </div>

      <Criterion />

      <div class="col-12">
        <q-separator size="3px" color="grey-2" />
      </div>
      <div class="col-12 text-weight-medium">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
        ผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการ
      </div>
      <div class="col-12">
        <div class="row q-col-gutter-sm">
          <div class="col-12 text-weight-medium 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-sm-1 offset-md-1 text-weight-medium text-dark"
          >
            ผลผลิตของงานที่คาดหวัง
          </div>

          <div class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
            <q-card
              flat
              bordered
              :class="[' q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
            >
              <q-list
                dense
                v-for="(list, i) in evaluate_expenct_level"
                :key="i"
              >
                <q-item dense tag="label" v-ripple>
                  <q-item-section>
                    <q-item-label>{{ list.labal }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      :disable="!status"
                      v-model="evaluate_expenct_level[i].level"
                      :val="list.id"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
          >
            ผลผลิตของงานที่เกิดขึ้นจริง
          </div>
          <div
            v-if="$q.screen.gt.xs"
            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
          >
            <q-card
              flat
              bordered
              :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].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
                      :disable="!status"
                      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
                      :disable="!status"
                      v-model="evaluate_ouptut[i].level"
                      :val="list.id"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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
            v-else
            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
          >
            <q-card
              flat
              bordered
              :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].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
                      :disable="!status"
                      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>
                <q-item dense tag="label" v-ripple v-if="i < checkArray">
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="evaluate_ouptut[i].level"
                      :val="list.id"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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 v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                      :disable="!status"
                      v-model="knowledge_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
          <div v-else class="col-12 col-sm-11">
            <q-card
              bordered
              class="text-weight-medium"
              :class="getBordered(alerts[2].value)"
              style="border-radius: 20px"
            >
              <q-list dense>
                <q-item dense v-ripple>
                  <q-item-section>
                    <q-item-label class="text-start">
                      1.2. ความรู้ความสามารถ</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="knowledge_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                      :disable="!status"
                      v-model="skill_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
          <div v-else class="col-12 col-sm-11">
            <q-card
              bordered
              class="text-weight-medium"
              :class="getBordered(alerts[3].value)"
              style="border-radius: 20px"
            >
              <q-list dense>
                <q-item dense v-ripple>
                  <q-item-section>
                    <q-item-label class="text-start"> 1.3. ทักษะ</q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="skill_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                      :disable="!status"
                      v-model="competency_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
          <div v-else class="col-12 col-sm-11">
            <q-card
              bordered
              class="text-weight-medium"
              :class="getBordered(alerts[4].value)"
              style="border-radius: 20px"
            >
              <q-list dense>
                <q-item dense v-ripple>
                  <q-item-section>
                    <q-item-label class="text-start">
                      1.4. สมรรถนะ</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="competency_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                      :disable="!status"
                      v-model="learn_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
          <div v-else class="col-12 col-sm-11">
            <q-card
              bordered
              class="text-weight-medium"
              :class="getBordered(alerts[5].value)"
              style="border-radius: 20px"
            >
              <q-list dense>
                <q-item dense v-ripple>
                  <q-item-section>
                    <q-item-label class="text-start">
                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="learn_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                      :disable="!status"
                      v-model="apply_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
          <div v-else class="col-12 col-sm-11">
            <q-card
              bordered
              class="text-weight-medium"
              :class="getBordered(alerts[6].value)"
              style="border-radius: 20px"
            >
              <q-list dense>
                <q-item dense v-ripple>
                  <q-item-section>
                    <q-item-label class="text-start">
                      1.6.
                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="apply_level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                      </template>
                    </q-rating>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>

          <!-- <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
          <q-card class="text-weight-medium">
            <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="store.ratingColors"
                    label="ระดับการประเมินพฤติกรรม"
                  >
                    <template v-slot:tip-1>
                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                    </template>
                    <template v-slot:tip-2>
                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                    </template>
                    <template v-slot:tip-3>
                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                    </template>
                    <template v-slot:tip-4>
                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                    </template>
                    <template v-slot:tip-5>
                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                    </template>
                  </q-rating>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
        <div v-else class="col-12 col-sm-11">
          <q-card
            bordered
            class="text-weight-medium"
            :class="getBordered(alerts[7].value)"
            style="border-radius: 20px"
          >
            <q-list dense>
              <q-item dense v-ripple>
                <q-item-section>
                  <q-item-label class="text-start">
                    1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
                  >
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item>
                <q-item-section>
                  <q-rating
                    class="justify-center"
                    v-model="success_level"
                    max="5"
                    size="sm"
                    color="grey"
                    :color-selected="store.ratingColors"
                    label="ระดับการประเมินพฤติกรรม"
                  >
                    <template v-slot:tip-1>
                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                    </template>
                    <template v-slot:tip-2>
                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                    </template>
                    <template v-slot:tip-3>
                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                    </template>
                    <template v-slot:tip-4>
                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                    </template>
                    <template v-slot:tip-5>
                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
                    </template>
                  </q-rating>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div> -->

          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
            <q-card class="text-weight-medium">
              <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
                        :disable="!status"
                        v-model="etc"
                        @click="
                          (achievement_other.text = ''),
                            (achievement_other.level = 0)
                        "
                    /></q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
            <div class="row">
              <div
                v-if="etc"
                class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
              >
                <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
                  <q-list dense>
                    <q-item dense tag="label" v-ripple>
                      <q-item-section>
                        <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                        <q-input
                          :disable="!status"
                          v-model="achievement_other.text"
                          label="กรอกอื่นๆ"
                          dense
                          lazy-rules
                          autogrow
                          hide-bottom-space
                          outlined
                          class="bg-white"
                          :rules="[
                            (val:string) =>
                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
                          ]"
                        />
                      </q-item-section>
                      <q-item-section side>
                        <q-rating
                          :disable="!status"
                          v-model="achievement_other.level"
                          max="5"
                          size="sm"
                          color="grey"
                          :color-selected="store.ratingColors"
                          label="ระดับการประเมินพฤติกรรม"
                        >
                          <template v-slot:tip-1>
                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                          </template>
                          <template v-slot:tip-2>
                            <q-tooltip
                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
                            >
                          </template>
                          <template v-slot:tip-3>
                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                          </template>
                          <template v-slot:tip-4>
                            <q-tooltip
                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
                            >
                          </template>
                          <template v-slot:tip-5>
                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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>
          </div>

          <div
            v-else
            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
          >
            <div class="q-pb-sm text-weight-medium text-dark">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              1.8 อื่นๆ<q-checkbox
                :disable="!status"
                class="q-ml-sm"
                dense
                v-model="etc"
                @click="
                  (achievement_other.text = ''), (achievement_other.level = 0)
                "
              />
            </div>
            <q-card v-if="etc" flat bordered :class="'q-pa-sm bg-grey-1'">
              <q-list dense>
                <q-item dense tag="label" v-ripple>
                  <q-item-section>
                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                    <q-input
                      :disable="!status"
                      v-model="achievement_other.text"
                      label="กรอกอื่นๆ"
                      dense
                      lazy-rules
                      autogrow
                      hide-bottom-space
                      outlined
                      class="bg-white"
                      :rules="[
                        (val:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                      ]"
                    />
                  </q-item-section>
                </q-item>
                <q-item dense tag="label" v-ripple>
                  <q-item-section>
                    <q-rating
                      :disable="!status"
                      class="justify-center"
                      v-model="achievement_other.level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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>
      </div>
      <div class="col-12">
        <div class="row justify-center q-mb-sm">
          <div
            class="col-12 text-top0 row items-center q-pl-md text-weight-medium text-dark"
          >
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            จุดเด่น (ไม่เกิน 5 บรรทัด)
          </div>
          <div class="col-xs-12 col-sm-11 col-md-10">
            <q-input
              :disable="!status"
              outlined
              dense
              v-model="achievement_strength_desc"
              lazy-rules
              type="textarea"
              label="กรอกจุดเด่น"
              hide-bottom-space
              :row="5"
              :rules="achievement_strengthRules"
              ref="achievement_strengthRef"
            />
          </div>
        </div>
        <div class="row justify-center q-mb-sm text-weight-medium text-dark">
          <div class="col-12 text-top0 row items-center q-pl-md">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
          </div>
          <q-input
            :disable="!status"
            outlined
            dense
            v-model="achievement_improve_desc"
            class="col-xs-12 col-sm-11 col-md-10"
            type="textarea"
            hide-bottom-space
            label="กรอกสิ่งที่ควรปรับปรุง"
            :row="5"
          />
        </div>
      </div>

      <div class="col-12 text-weight-medium">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
        พฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการ
      </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.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
                  :disable="!status"
                  v-model="conduct_level[i]"
                  :val="list.id"
                  max="5"
                  size="sm"
                  color="grey"
                  :color-selected="store.ratingColors"
                  label="ระดับการประเมินพฤติกรรม"
                >
                  <template v-slot:tip-1>
                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                  </template>
                  <template v-slot:tip-2>
                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                  </template>
                  <template v-slot:tip-3>
                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                  </template>
                  <template v-slot:tip-4>
                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                  </template>
                  <template v-slot:tip-5>
                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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
                  :disable="!status"
                  v-model="moral_level[i]"
                  :val="list.id"
                  max="5"
                  size="sm"
                  color="grey"
                  :color-selected="store.ratingColors"
                  label="ระดับการประเมินพฤติกรรม"
                >
                  <template v-slot:tip-1>
                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                  </template>
                  <template v-slot:tip-2>
                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                  </template>
                  <template v-slot:tip-3>
                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                  </template>
                  <template v-slot:tip-4>
                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                  </template>
                  <template v-slot:tip-5>
                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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
                  :disable="!status"
                  v-model="discipline_level[i]"
                  :val="list.id"
                  max="5"
                  size="sm"
                  color="grey"
                  :color-selected="store.ratingColors"
                  label="ระดับการประเมินพฤติกรรม"
                >
                  <template v-slot:tip-1>
                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                  </template>
                  <template v-slot:tip-2>
                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                  </template>
                  <template v-slot:tip-3>
                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                  </template>
                  <template v-slot:tip-4>
                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                  </template>
                  <template v-slot:tip-5>
                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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 v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
        <q-card class="text-weight-medium">
          <q-list dense>
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-item-label class="q-pl-sm">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  2.4 อื่นๆ<q-checkbox
                    :disable="!status"
                    class="q-ml-sm"
                    dense
                    v-model="etc2"
                    @click="
                      (behavio_orther.text = ''), (behavio_orther.level = 0)
                    "
                /></q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
        <div class="row">
          <div
            v-if="etc2"
            class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
          >
            <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
              <q-list dense>
                <q-item dense tag="label" v-ripple>
                  <q-item-section>
                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                    <q-input
                      :disable="!status"
                      v-model="behavio_orther.text"
                      label="กรอกอื่นๆ"
                      dense
                      lazy-rules
                      autogrow
                      hide-bottom-space
                      outlined
                      class="bg-white"
                      :rules="[
                        (val:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                      ]"
                    />
                  </q-item-section>
                  <q-item-section side>
                    <q-rating
                      :disable="!status"
                      v-model="behavio_orther.level"
                      max="5"
                      size="sm"
                      color="grey"
                      :color-selected="store.ratingColors"
                      label="ระดับการประเมินพฤติกรรม"
                    >
                      <template v-slot:tip-1>
                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                      </template>
                      <template v-slot:tip-2>
                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                      </template>
                      <template v-slot:tip-3>
                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                      </template>
                      <template v-slot:tip-4>
                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                      </template>
                      <template v-slot:tip-5>
                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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>
      </div>

      <div v-else class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
        <div class="q-pb-sm text-weight-medium text-dark">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          2.4 อื่นๆ<q-checkbox
            :disable="!status"
            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="'q-pa-sm bg-grey-1'">
          <q-list dense>
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                <q-input
                  :disable="!status"
                  v-model="behavio_orther.text"
                  label="กรอกอื่นๆ"
                  dense
                  lazy-rules
                  autogrow
                  hide-bottom-space
                  outlined
                  class="bg-white"
                  :rules="[
                    (val:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                  ]"
                />
              </q-item-section>
            </q-item>
            <q-item dense tag="label" v-ripple>
              <q-item-section>
                <q-rating
                  :disable="!status"
                  class="justify-center"
                  v-model="behavio_orther.level"
                  max="5"
                  size="sm"
                  color="grey"
                  :color-selected="store.ratingColors"
                  label="ระดับการประเมินพฤติกรรม"
                >
                  <template v-slot:tip-1>
                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                  </template>
                  <template v-slot:tip-2>
                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
                  </template>
                  <template v-slot:tip-3>
                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                  </template>
                  <template v-slot:tip-4>
                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
                  </template>
                  <template v-slot:tip-5>
                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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">
        <div class="row justify-center q-mb-sm">
          <div
            class="col-12 text-top0 row items-center q-pl-lg text-weight-medium text-dark"
          >
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            จุดเด่น (ไม่เกิน 5 บรรทัด)
          </div>
          <div class="col-xs-12 col-sm-11 col-md-10">
            <q-input
              :disable="!status"
              outlined
              dense
              v-model="behavior_strength_desc"
              class="col-xs-12 col-sm-11 col-md-10"
              lazy-rules
              type="textarea"
              label="กรอกจุดเด่น"
              hide-bottom-space
              :row="5"
              :rules="behavio_strengthRules"
              ref="behavio_strengthRef"
            />
          </div>
        </div>
        <div class="row justify-center q-mb-sm text-weight-medium text-dark">
          <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
            :disable="!status"
            outlined
            dense
            v-model="behavior_improve_desc"
            class="col-xs-12 col-sm-11 col-md-10"
            type="textarea"
            hide-bottom-space
            label="กรอกสิ่งที่ควรปรับปรุง"
            :row="5"
          />
        </div>
      </div>

      <div class="col-12 text-weight-medium">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
        การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
      </div>

      <div class="col-12">
        <q-card
          flat
          bordered
          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
        >
          <q-list v-if="$q.screen.gt.xs" 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
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="orientation"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    :disable="!status"
                    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
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="self_learning"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    :disable="!status"
                    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
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="training_seminar"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    :disable="!status"
                    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
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </div>
              </q-item-section>
            </q-item>
          </q-list>

          <div v-else>
            <q-list
              dense
              :class="[getBordered(alerts[11].value), 'item-custom']"
            >
              <q-item dense>
                <q-item-section>
                  <q-item-label>1. การปฐมนิเทศ</q-item-label>
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item
                dense
                tag="label"
                style="padding-left: 0 !important; padding-right: 0 !important"
              >
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="orientation"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                </q-item-section>
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="orientation"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </q-item-section>
              </q-item>
            </q-list>
            <q-separator class="q-my-xs" />
            <q-list
              dense
              :class="[getBordered(alerts[11].value), 'item-custom']"
            >
              <q-item dense>
                <q-item-section>
                  <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item
                dense
                tag="label"
                style="padding-left: 0 !important; padding-right: 0 !important"
              >
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="self_learning"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                </q-item-section>
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="self_learning"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </q-item-section>
              </q-item>
            </q-list>
            <q-separator class="q-my-xs" />
            <q-list
              dense
              :class="[getBordered(alerts[11].value), 'item-custom']"
            >
              <q-item dense>
                <q-item-section>
                  <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item
                dense
                tag="label"
                style="padding-left: 0 !important; padding-right: 0 !important"
              >
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="training_seminar"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                </q-item-section>
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="training_seminar"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </q-item-section>
              </q-item>
            </q-list>
            <q-separator class="q-my-xs" />
            <q-list dense :class="'item-custom'">
              <q-item dense>
                <q-item-section>
                  <q-item-label
                    >4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
                  >
                </q-item-section>
              </q-item>
              <q-separator />
              <q-item
                dense
                tag="label"
                style="padding-left: 0 !important; padding-right: 0 !important"
              >
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="1"
                    label="ดำเนินการเเล้ว"
                  />
                </q-item-section>
                <q-item-section>
                  <q-radio
                    :disable="!status"
                    checked-icon="task_alt"
                    unchecked-icon="panorama_fish_eye"
                    v-model="other_training"
                    val="0"
                    label=" ยังไม่ได้ดำเนินการ"
                  />
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </q-card>
      </div>

      <div class="col-12">
        <div class="row justify-center">
          <div class="col-xs-12 col-sm-11">
            <div class="col-12 text-weight-medium items-center">
              ผู้บังคับบัญชา/ผู้มอบหมายงาน
            </div>
            <div class="col-12 row q-col-gutter-sm">
              <q-select
                class="col-xs-12 col-sm-8"
                dense
                v-model="Autherise"
                outlined
                :options="option"
                label="ผู้บังคับบัญชา"
                option-label="label"
                disable
              />
              <div class="col-xs-12 col-sm-4">
                <datepicker
                  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
                      :disable="!status"
                      outlined
                      dense
                      hide-bottom-space
                      class="full-width datepicker col-3"
                      :model-value="
                        dateAutherise != null ? date2Thai(dateAutherise) : null
                      "
                      :label="`${'ลงวันที่'}`"
                      :rules="[(val:string) => !!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>
    </div>
  </div>
</template>
<style scoped>
.border_custom {
  border: 2px solid #c10015;
  border-radius: 5px;
}
.item-custom {
  border: 1px #ededed solid;
  border-radius: 5px;
  background-color: #fff;
}

.mobileClass {
  background-color: #fff;
  border-radius: 10px;
}
</style>
