<script setup lang="ts">
import { useQuasar } from "quasar";
import { ref, reactive, computed, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  MonthOption,
  CheckboxItem,
} from "@/modules/11_probation/interface/index/assign";

const OPchairmanFn = ref<any>([]);
const OPcommanderFn = ref<any>([]);
const Other5 = ref<string>("");
const Other = ref<string>("");
const OtherLaw = ref<string>("");
const other5_no1_desc = ref<string>("");
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const knowledgeCount = ref<number>(3);
const knowledge = ref<any[]>([]);
const commander = ref<any>("");
const chairman = ref<any>("");
const mixin = useCounterMixin();
const { date2Thai, dateToISO, hideLoader, messageError,dialogConfirm,showLoader ,success} = mixin;
const date_start = ref<Date>();
const group = ref<any | null>(null);
const group2 = ref<any | null>(null);
const group3 = ref<any | null>(null);
const router = useRouter();
const route = useRoute();
const main = ref<any>();
const productivityCount = ref<number>(1);
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const main2 = ref<any>();
const main3 = ref<any>();
const main4 = ref<any>();
const main5 = ref<any>();
const date1 = ref<any>();
const date2 = ref<any>();
const date3 = ref<any>();
const date4 = ref<any>();
const checkRule = ref<CheckboxItem[]>([]);
const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);
const activityCount = ref<number>(2);
const routeName = router.currentRoute.value.name;
const isDatePicker2Readonly = computed(() => {
  return date_start.value === undefined;
});
const activityArray = computed(() => {
  return Array(activityCount.value).fill("");
});
const knowledgeArray = computed(() => {
  return Array(knowledgeCount.value).fill("");
});
const ProductivityArray = computed(() => {
  return Array(productivityCount.value).fill("");
});
const skill = ref<any>();
const skill2 = ref<any>();
const skill3 = ref<any>();
const skill4 = ref<any>();
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));

const editStatus = ref<boolean>(routeName == "probationAdd" ? true : false);
const $q = useQuasar();
const mode = ref<any>($q.screen.gt.xs);

const monthSelect = ref<any>();
const fullname = ref<string>("");
const position = ref<string>("");
const date_finish = ref<any>();

const monthOp: MonthOption[] = [];

const caretaker1 = ref<any>("");
const caretaker2 = ref<any>("");
const optionCaretaker2 = ref<any>([]);
const optionCaretaker = ref<any>([]);
const OPmain = ref<
  Array<{ id: number; naem: string; description: string; level: string }>
>([]);
const OPgroup = ref<
  Array<{ id: number; title: string; description: string; level: number }>
>([]);
const OPcomputer = ref<
  Array<{ id: number; title: string; level: number; level_description: string }>
>([]);
const OPenglish = ref<
  Array<{ id: number; title: string; level: number; level_description: string }>
>([]);
const OPinfomation = ref<
  Array<{ id: number; title: string; level: number; level_description: string }>
>([]);
const OPresourse = ref<
  Array<{ id: number; title: string; level: number; level_description: string }>
>([]);
const OPknowledge = ref<
  Array<{ id: number; title: number; description: string; level: string }>
>([]);
const OPcaretaker = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
    position: string;
    positionLevel: string;
  }>[]
>([]);
const OPcommander = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
    position: string;
    positionLevel: string;
  }>[]
>([]);
const OPchairman = ref<
  Array<{
    id: string;
    prefix: string;
    firstName: string;
    lastName: string;
    name: string;
    citizenId: number;
    isDirector: boolean;
    position: string;
    positionLevel: string;
  }>[]
>([]);

/** reset ค่าวันที่สิ้นสุด */
function clearDateExam2() {
  date_finish.value = undefined;
}

function edit() {
  editStatus.value = true;
}
function cancel() {
  editStatus.value = false;
  getAssign();
}

function onSubmit() {
  console.log(111);
}

/** ฟังชั่นส่ง วันที่ไปคำนวณ */
async function postDateTime() {
  await http
    .post(config.API.calculateDate(), {
      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
      start_date: dateToISO(date_start.value as Date),
    })
    .then(async (res) => {
      const result = res.data;
      date_finish.value = result.finish_date;
    })
    .catch((e) => {})
    .finally(async () => {
      hideLoader();
    });
}

/** เช็ค จำนวนเดือน เเละ วันที่เริ่ม ไม่เท่ากับ undefined*/
watch(
  () => [monthSelect.value, date_start.value],
  () => {
    if (monthSelect.value !== undefined && date_start.value !== undefined) {
      postDateTime();
    }
  }
);

/** get ข้อมูล */
async function getUser() {
  await http
    .get(config.API.orgProfilePlacement(profileId.value))
    .then((res: any) => {
      const data = res.data.result;

      OPcaretaker.value = data.caregiver.map((item: any) => ({
        id: item.id,
        name: item.prefix + item.firstName + " " + item.lastName,
        label: item.position
          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
              item.position
            }${
              item.posLevel && item.posType
                ? ", " + item.posType + ": " + item.posLevel
                : ""
            })`
          : `${item.prefix} ${item.firstName} ${item.lastName}`,
        citizenId: item.citizenId,
        isDirector: item.isDirector,
        posLevel: item.posLevel,
        posType: item.posType,
        position: item.position,
      }));

      OPcommander.value = data.commander.map((item: any) => ({
        id: item.id,
        name: item.prefix + item.firstName + " " + item.lastName,
        label: item.position
          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
              item.position
            }${
              item.posLevel && item.posType
                ? ", " + item.posType + ": " + item.posLevel
                : ""
            })`
          : `${item.prefix} ${item.firstName} ${item.lastName}`,
        citizenId: item.citizenId,
        posLevel: item.posLevel,
        posType: item.posType,
        position: item.position,
      }));

      OPchairman.value = data.chairman.map((item: any) => ({
        id: item.id,
        name: item.prefix + item.firstName + " " + item.lastName,
        label: item.position
          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
              item.position
            }${
              item.posLevel && item.posType
                ? ", " + item.posType + ": " + item.posLevel
                : ""
            })`
          : `${item.prefix} ${item.firstName} ${item.lastName}`,
        citizenId: item.citizenId,
        posLevel: item.posLevel,
        posType: item.posType,
        position: item.position,
      }));
    });
}

/**
 *ดึงข้อมูลที่ได้รับมอบหมาย
 * @param id personal id
 */
async function getAssignNew(id: string) {
  await http.get(config.API.newAssign(id)).then((res: any) => {
    const data = res.data.data;

    const monthOption = {
      value: data.assign_month,
      label: `${data.assign_month} เดือน`,
    };
    monthOp.push(monthOption);
    monthSelect.value = `${data.assign_month} เดือน`;
    fullname.value =
      data.person.prefixName +
      data.person.firstName +
      " " +
      data.person.lastName;
    position.value = data.person.positionName;
  });
}

/**
 * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
 * @param val รับค่า input
 * @param update fn
 */
function filterFnCaretaker(val: string, update: any) {
  if (val == "") {
    update(() => {
      optionCaretaker.value = filtermantor(OPcaretaker.value, [
        caretaker2.value,
      ]);
    });
  } else {
    update(() => {
      optionCaretaker.value = filtermantor(OPcaretaker.value, [
        caretaker2.value,
      ]).filter((e: any) => e.name.search(val) !== -1);
    });
  }
}

/**
 * ฟังก์ชันกรองข้อมูล
 * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
 * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
 * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
 */
function filtermantor(options: any[], excludedGroups: any[]) {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
}

/**
 * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
 * @param val รับค่า input
 * @param update fn
 */

function filterFnCaretaker2(val: string, update: any) {
  if (val == "") {
    update(() => {
      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
        caretaker1.value,
      ]);
    });
  } else {
    update(() => {
      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
        caretaker1.value,
      ]).filter((e: any) => e.name.search(val) !== -1);
    });
  }
}

/** เพิ่ม ผลการปฏิบัติงาน*/
function addActivity() {
  activityCount.value++;
}

/**
 * ลบ ผลการปฏิบัติงาน
 * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
 */
function deleteactivity(item: number) {
  activity_desc.value.splice(item, 1);
  goal_desc.value.splice(item, 1);
  if (activityCount.value > 2) {
    activityCount.value--;
  }
}

/**
 * get ข้อมูล ความรู้เรื่องกฎหมายและกฎระเบียบ
 * @param id personal id
 */
async function getLaw(id: string) {
  await http.get(config.API.lawOptions(id)).then((res: any) => {
    checkRule.value = res.data.data;
  });
}

/**
 * get ข้อมูล ทักษะ
 * @param id personal id
 */
async function getSkill(id: string) {
  await http.get(config.API.skillOptions(id)).then((res: any) => {
    const skillData = res.data.data;
    OPcomputer.value = [skillData.computer];
    OPenglish.value = [skillData.english];
    OPinfomation.value = [skillData.information];
    OPresourse.value = [skillData.resourse];
    skill.value = skillData.computer;
    skill2.value = skillData.english;
    skill3.value = skillData.information;
    skill4.value = skillData.resourse;
  });
}

/**
 * get ข้อมูล ความรู้ความสามารถในการปฏิบัติงาน
 * @param id personal id
 */
async function getKnowledge(id: string) {
  await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
    OPknowledge.value = res.data.data;
  });
}

/**
 * get ข้อมูล สมรรถนะหลัก
 * @param id personal id
 */
const assign_competencyMain = ref<any>();
async function getcompetency(id: string) {
  http
    .get(config.API.kpiCapacity + `/head`)
    .then((res) => {
      const data = res.data.result;
      assign_competencyMain.value = data;
      main.value = data[0];
      main2.value = data[1];
      main3.value = data[2];
      main4.value = data[3];
      main5.value = data[4];
      console.log(main.value);
    })
    .catch((err) => {
      messageError($q, err);
    });
  // await http.get(config.API.competencyOptions(id)).then((res: any) => {
  //   const data = res.data.data;

  //   console.log(data);

  //   OPmain.value = data;
  //   main.value = data[0];
  //   main2.value = data[1];
  //   main3.value = data[2];
  //   main4.value = data[3];
  //   main5.value = data[4];
  // });
}

/**
 * get ข้อมูล สมรรถนะประจํากลุ่มงาน
 * @param id personal id
 */
const assign_competencyGroupMain = ref<any>();
async function getCompetencyGroup(id: string) {
  console.log(position.value);
  http
    .get(config.API.kpiCapacity + `/group?positionName=${position.value}`)
    .then((res) => {
      const data = res.data.result;
      assign_competencyGroupMain.value = data;

      OPgroup.value = data;
      group.value = data[0];
      group2.value = data[1];
      group3.value = data[2];
    })
    .catch((err) => {
      messageError($q, err);
    });

  // await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
  //   const data = res.data.data;
  //   OPgroup.value = data;
  //   group.value = data[0];
  //   group2.value = data[1];
  //   group3.value = data[2];
  // });
}

/** get ข้อมูลรายการมอบหมาย */
async function getAssign() {
  await http.get(config.API.probationsGetAssign(id.value)).then((res) => {
    editStatus.value = false;
    const data = res.data.data;
    fullname.value = data.profile.name;
    position.value = data.profile.positionName;
    date_start.value = data.assign.date_start;
    date_finish.value = data.assign.date_finish;
    date1.value = data.assign.experimenter_dated;
    if (data.mentors.length > 1) {
      date2.value = data.mentors[0].dated;
      caretaker1.value = data.mentors[0];
      date3.value = data.mentors[1].dated;
      caretaker2.value = data.mentors[1];
    } else {
      date2.value = data.mentors[0].dated;
      caretaker1.value = data.mentors[0];
    }

    date4.value = data.commander.dated;
    activity_desc.value = data.jobs.map((job: any) => job.activity_desc);
    goal_desc.value = data.jobs.map((job: any) => job.goal_desc);
    activityCount.value = data.jobs.length;

    chairman.value = data.chairman;
    commander.value = data.commander;
    knowledge.value = data.knowledges.map((id: any) => id.id);
    knowledgeCount.value = data.knowledges.length;
    other_desc.value = data.assign.other_desc;
    other4_desc.value = data.assign.other4_desc;
    other5_no1_desc.value = data.assign.other5_no1_desc;

    const skills = data.skills.map((skills: any) => ({
      id: skills.id,
      title: skills.title,
      level: skills.level,
      level_description: skills.description,
    }));
    [skill.value, skill2.value, skill3.value, skill4.value] = skills;

    main.value = data.competencys[0];
    main2.value = data.competencys[1];
    main3.value = data.competencys[2];
    main4.value = data.competencys[3];
    main5.value = data.competencys[4];

    group.value = data.competency_groups[0];
    group2.value = data.competency_groups[1];
    group3.value = data.competency_groups[2];

    output_desc.value = data.outputs.map((output: any) => output.output_desc);
    indicator_desc.value = data.outputs.map(
      (output: any) => output.indicator_desc
    );
    productivityCount.value = data.outputs.length;

    checkRule.value = data.laws.map((law: any) => ({
      id: law.id,
      checked: law.selected,
      description: law.description,
      status_select: law.status_select,
    }));
  });
}

/** เพิ่มความรู้ความสามารถ โดย สูงสุดที่ 6 item */
function addKnowledge() {
  if (knowledgeCount.value < 6) {
    knowledgeCount.value++;
  }
}

/**
 * ลบ ความรู้ความสามารถ
 * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
 */
function deleteknowledge(item: number) {
  knowledge.value.splice(item, 1);
  if (knowledgeCount.value > 3) {
    knowledgeCount.value--;
  }
}

/**
 * ฟังก์ชันกรองข้อมูล
 * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
 * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
 * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
 */
function filterMain(options: any[], excludedGroups: any[]) {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
}

/**
 * ฟังก์ชันกรองข้อมูล
 * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
 * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
 * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
 */
function filterData(options: any[], excludedGroups: any[]) {
  return options.filter(
    (item) => !excludedGroups.some((group) => group && group.id === item.id)
  );
}

/** เพิ่ม ผลผลิตของงาน*/
function addProductivity() {
  productivityCount.value++;
}

/**
 * ลบ ผลผลิตของงาน
 * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
 */
function deleteProductivitys(item: number) {
  output_desc.value.splice(item, 1);
  indicator_desc.value.splice(item, 1);
  if (productivityCount.value > 1) {
    productivityCount.value--;
  }
}

/**
 * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
 * @param val รับค่า input
 * @param update fn
 */

function filterFnCommander(val: string, update: any) {
  if (val == "") {
    update(() => {
      OPcommanderFn.value = OPcommander.value;
    });
  } else {
    update(() => {
      OPcommanderFn.value = OPcommander.value.filter(
        (e: any) => e.name.search(val) !== -1
      );
    });
  }
}

/**
 * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
 * @param val รับค่า input
 * @param update fn
 */

function filterFnChairman(val: string, update: any) {
  if (val == "") {
    update(() => {
      OPchairmanFn.value = OPchairman.value;
    });
  } else {
    update(() => {
      OPchairmanFn.value = OPchairman.value.filter(
        (e: any) => e.name.search(val) !== -1
      );
    });
  }
}

/**
 * pop up confirm
 * @param id personal id
 */
 function saveEdit(id: string) {
  dialogConfirm($q, async () => await dataEdit(id));
}

/**
 * เช็คข้อมูลก่อนบันทึก
 * @param id personal id
 */
 async function saveData(id: string) {
  dialogConfirm($q, async () => await DataSave(id));

}

/**
 * update edit
 * @param id personal id
 */
 async function dataEdit(id: string) {
  // await myForm.value.validate().then((result: boolean) => {
  //   if (result) {
      showLoader();
      const data = putDataEdit(id);
      http
        .put(config.API.saveEditAssign(id), data)
        .then(() => {})
        .catch(() => {})
        .finally(async () => {
          editStatus.value = false;
          getAssign();
          hideLoader();
        });
    // } else {
    //   dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
    // }
  // });
}

/** ฟังชั่น อัพเดต ข้อมูลที่จะส่ง
 * @param id personal
 */
 function putDataEdit(id: string) {
  const GUID = profileId.value;
  const assign_job = activityArray.value.map((item, index) => {
    const activityDesc = activity_desc.value[index]?.trim();
    const goalDesc = goal_desc.value[index]?.trim();

    if (activityDesc !== "" && goalDesc !== "") {
      return {
        activity_desc: activityDesc,
        goal_desc: goalDesc,
      };
    } else {
      return null;
    }
  });

  const know_ledge = knowledge.value.map((item) => ({
    level: item ? item.level : null,
  }));

  const Productivity_assign = ProductivityArray.value.map((item, index) => {
    const outputDesc = output_desc.value[index]?.trim();
    const indicatorDesc = indicator_desc.value[index]?.trim();

    if (outputDesc !== "" && indicatorDesc !== "") {
      return {
        output_desc: outputDesc,
        indicator_desc: indicatorDesc,
      };
    } else {
      return null;
    }
  });

  const allGroup = [];
  if (group.value) allGroup.push({ level: group.value.level });
  if (group2.value) allGroup.push({ level: group2.value.level });
  if (group3.value) allGroup.push({ level: group3.value.level });

  const allSkills = [];
  if (skill.value) allSkills.push({ level: skill.value.level });
  if (skill2.value) allSkills.push({ level: skill2.value.level });
  if (skill3.value) allSkills.push({ level: skill3.value.level });
  if (skill4.value) allSkills.push({ level: skill4.value.level });

  const allCompetency = [];
  if (main.value) allCompetency.push(main.value);
  if (main2.value) allCompetency.push(main2.value);
  if (main3.value) allCompetency.push(main3.value);
  if (main4.value) allCompetency.push(main4.value);
  if (main5.value) allCompetency.push(main5.value);

  const assign_director = [
    {
      personal_id:
        caretaker1.value.id != null
          ? caretaker1.value.id
          : caretaker1.value.personal_id,
      role: "mentor",
      name: caretaker1.value.name,
      position: caretaker1.value.position,
      posType: caretaker1.value.posType,
      posLevel: caretaker1.value.posLevel,
      dated:
        date2.value instanceof Date
          ? dateToISO(date2.value)
          : dateToISO(new Date(date2.value)),
    },
    {
      personal_id:
        commander.value.id != null
          ? commander.value.id
          : commander.value.personal_id,
      role: "commander",
      name: commander.value.name,
      position: commander.value.position,
      posType: commander.value.posType,
      posLevel: commander.value.posLevel,
      dated:
        date4.value instanceof Date
          ? dateToISO(date4.value)
          : dateToISO(new Date(date4.value)),
    },
    {
      personal_id:
        chairman.value.id != null
          ? chairman.value.id
          : chairman.value.personal_id,
      role: "chairman",
      name: chairman.value.name,
      position: chairman.value.position,
      posType: chairman.value.posType,
      posLevel: chairman.value.posLevel,
    },
  ];

  if (caretaker2.value) {
    assign_director.push({
      personal_id:
        caretaker2.value.id != null
          ? caretaker2.value.id
          : caretaker2.value.personal_id,
      name: caretaker2.value.name,
      position: caretaker2.value.position,
      posType: caretaker2.value.posType,
      posLevel: caretaker2.value.posLevel,
      role: "mentor",
      dated:
        date3.value instanceof Date
          ? dateToISO(date3.value)
          : dateToISO(new Date(date3.value)),
    });
  }
  const data = {
    personal_id: GUID,
    fullname: fullname.value,
    position: position.value,
    monthSelect:
      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
    date_start:
      date_start.value instanceof Date
        ? dateToISO(date_start.value)
        : new Date(),
    date_finish:
      date_finish.value instanceof Date
        ? dateToISO(date_finish.value)
        : dateToISO(new Date(date_finish.value)),
    assign_knowledges: know_ledge,
    assign_jobs: assign_job.filter((item) => item !== null),
    other_desc: OtherLaw.value,
    assign_skill: allSkills,
    assign_competency: assign_competencyMain.value,
    assign_competency_group: assign_competencyGroupMain.value,
    other4_desc: Other.value,
    other5_no1_desc: Other5.value,
    assign_outputs: Productivity_assign.filter((item) => item !== null),
    assign_director: assign_director,
    experimenter_dated:
      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
    assign_law: checkRule.value
      .filter((item) => item.checked === 1)
      .map((item) => ({
        id: item.id,
        checked: item.checked,
      })),
  };
  return data;
}

/** ฟังชั่น สร้างข้อมูลที่จะส่ง
 * @param id personal
 */
 function putData(id: string) {
  const GUID = profileId.value;
  const assign_job = activityArray.value.map((item, index) => {
    const activityDesc = activity_desc.value[index]?.trim();
    const goalDesc = goal_desc.value[index]?.trim();

    if (activityDesc !== "" && goalDesc !== "") {
      return {
        activity_desc: activityDesc,
        goal_desc: goalDesc,
      };
    } else {
      return null;
    }
  });
  const know_ledge = knowledge.value.map((item) => ({
    level: item ? item.level : null,
  }));

  const Productivity_assign = ProductivityArray.value.map((item, index) => {
    const outputDesc = output_desc.value[index]?.trim();
    const indicatorDesc = indicator_desc.value[index]?.trim();

    if (outputDesc !== "" && indicatorDesc !== "") {
      return {
        output_desc: outputDesc,
        indicator_desc: indicatorDesc,
      };
    } else {
      return null;
    }
  });

  const allGroup = [];
  if (group.value) allGroup.push({ level: group.value.level });
  if (group2.value) allGroup.push({ level: group2.value.level });
  if (group3.value) allGroup.push({ level: group3.value.level });

  const allSkills = [];
  if (skill.value) allSkills.push({ level: skill.value.level });
  if (skill2.value) allSkills.push({ level: skill2.value.level });
  if (skill3.value) allSkills.push({ level: skill3.value.level });
  if (skill4.value) allSkills.push({ level: skill4.value.level });

  const allCompetency = assign_competencyMain.value;

  const assign_director = [
    {
      personal_id: caretaker1.value.id,
      name: caretaker1.value.name,
      position: caretaker1.value.position,
      posType: caretaker1.value.posType,
      posLevel: caretaker1.value.posLevel,
      role: "mentor",
      dated:
        date2.value instanceof Date
          ? dateToISO(date2.value)
          : dateToISO(new Date(date2.value)),
    },
    {
      personal_id: commander.value.id,
      role: "commander",
      name: commander.value.name,
      position: commander.value.position,
      posType: commander.value.posType,
      posLevel: commander.value.posLevel,
      dated:
        date4.value instanceof Date
          ? dateToISO(date4.value)
          : dateToISO(new Date(date4.value)),
    },
    {
      personal_id: chairman.value.id,
      role: "chairman",
      name: chairman.value.name,
      position: chairman.value.position,
      posType: chairman.value.posType,
      posLevel: chairman.value.posLevel,
    },
  ];

  if (caretaker2.value) {
    assign_director.push({
      personal_id: caretaker2.value.id,
      name: caretaker2.value.name,
      position: caretaker2.value.position,
      posType: caretaker2.value.posType,
      posLevel: caretaker2.value.posLevel,
      role: "mentor",
      dated:
        date3.value instanceof Date
          ? dateToISO(date3.value)
          : dateToISO(new Date(date3.value)),
    });
  }
  const data = {
    personalId: GUID,
    fullname: fullname.value,
    position: position.value,
    monthSelect:
      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
    date_start:
      date_start.value instanceof Date
        ? dateToISO(date_start.value)
        : new Date(),
    date_finish:
      date_finish.value instanceof Date
        ? dateToISO(date_finish.value)
        : dateToISO(new Date(date_finish.value)),

    assign_knowledges: know_ledge,
    assign_jobs: assign_job.filter((item) => item !== null),
    other_desc: OtherLaw.value,
    assign_skill: allSkills,
    assign_competency: assign_competencyMain.value,
    assign_competency_group: assign_competencyGroupMain.value,
    other4_desc: Other.value,
    other5_no1_desc: Other5.value,
    assign_outputs: Productivity_assign.filter((item) => item !== null),

    assign_director: assign_director,
    experimenter_dated:
      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),

    assign_law: checkRule.value
      .filter((item) => item.checked === 1)
      .map((item) => ({
        id: item.id,
        checked: item.checked,
      })),
  };
  return data;
}

/**
 * บันทึก
 * @param id personal id
 */
 async function DataSave(id: string) {
  const data = putData(id);
  await http
    .post(config.API.saveFinish(id), data)
    .then(() => {
      router.push(`/probation/detail/${profileId.value}/${id}`);
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * download file
 * @param type type file
 */
 async function clickdownloadFile(type: string) {
  showLoader();
  await http
    .get(config.API.reportAssign(type, id.value), {
      responseType: "blob",
    })
    .then((res) => {
      downloadFile(
        res,
        `แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ-${fullname.value}.${type}`
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * download file
 * @param response ไฟล์
 * @param filename ชื่อไฟล์
 */
 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);
}

onMounted(async () => {
  await showLoader()
  await getUser();
  await getAssignNew(profileId.value);
  await getLaw(profileId.value);
  await getSkill(profileId.value);
  await getKnowledge(profileId.value);
  await getcompetency(profileId.value);
  await getCompetencyGroup(profileId.value);
  if (id.value !== undefined) {
    await getAssign();
  }
  await hideLoader()
});
</script>
<template>
  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
    <div
      v-if="routeName !== 'probationAdd'"
      class="toptitle text-white col-12 row items-center"
    >
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      <div>แบบมอบหมายงาน ฯ</div>
    </div>
  </div>
  <q-form greedy @submit.prevent @validation-success="id !== undefined ? saveEdit(id) : saveData(profileId)">
    <div
      :class="
        $q.screen.gt.xs
          ? `row q-col-gutter-y-md q-col-gutter-x-sm`
          : routeName == 'probationAdd'
          ? `row q-col-gutter-y-md q-col-gutter-x-sm`
          : `row q-col-gutter-y-md q-col-gutter-x-sm mobileClass q-mt-sm `
      "
    >
      <div
        v-if="routeName !== 'probationAdd'"
        class="col-12 row items-center q-col-gutter-x-sm"
      >
        <span class="text-weight-bold text-dark text-body1"
          >แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</span
        >
        <div v-if="!editStatus">
          <q-btn
            v-if="!editStatus"
            round
            flat
            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="clickdownloadFile('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="clickdownloadFile('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
            flat
            icon="edit"
            dense
            color="edit"
            round
            @click="edit"
          >
        <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn>
        </div>
        <div v-else>
          <q-btn
            flat
            icon="mdi-undo"
            dense
            color="red"
            round
            @click="cancel"
          ><q-tooltip>ยกเลิก</q-tooltip></q-btn>
          <q-btn
            flat
            icon="mdi-content-save-outline"
            dense
            color="public"
            round
            type="submit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn>
        </div>
      </div>

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

      <div class="col-12 col-sm-6">
        <q-input
          hide-bottom-space
          readonly
          dense
          borderless
          outlined
          v-model="fullname"
          label="ชื่อ-นามสกุล"
          bg-color="white"
        />
      </div>
      <div class="col-12 col-sm-6">
        <q-input
          hide-bottom-space
          readonly
          dense
          borderless
          outlined
          v-model="position"
          label="ตำแหน่ง"
          bg-color="white"
        />
      </div>

      <div class="col-12 text-weight-bold text-dark items-center">
        ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
      </div>

      <div class="col-xs-12 col-sm-4">
        <q-select
          :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
          hide-bottom-space
          :options="monthOp"
          :readonly="editStatus != true"
          dense
          borderless
          option-label="label"
          option-value="value"
          :outlined="editStatus == true"
          v-model="monthSelect"
          :label="`ระยะเวลา (เดือน)`"
          bg-color="white"
        />
      </div>
      <div class="col-xs-12 col-sm-4">
        <datepicker
          menu-class-name="modalfix"
          v-model="date_start"
          :locale="'th'"
          autoApply
          borderless
          :enableTimePicker="false"
          week-start="0"
          :readonly="editStatus != true"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              dense
              borderless
              :readonly="editStatus != true"
              :outlined="editStatus == true"
              :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
              hide-bottom-space
              class="full-width datepicker"
              :model-value="
                date_start != null ? date2Thai(date_start) : undefined
              "
              :label="`${'ตั้งเเต่วันที่'}`"
              bg-color="white"
            >
            </q-input>
          </template>
        </datepicker>
      </div>
      <div class="col-xs-12 col-sm-4">
        <datepicker
          menu-class-name="modalfix"
          v-model="date_finish"
          :locale="'th'"
          autoApply
          borderless
          :readonly="isDatePicker2Readonly || editStatus != true"
          :enableTimePicker="false"
          week-start="0"
        >
          <template #year="{ year }">
            {{ year + 543 }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ parseInt(value + 543) }}
          </template>
          <template #trigger>
            <q-input
              hide-bottom-space
              dense
              borderless
              :outlined="editStatus == true"
              readonly
              class="full-width datepicker"
              :model-value="
                date_finish != null ? date2Thai(date_finish) : undefined
              "
              :label="`${'ถึงวันที่'}`"
              clearable
              bg-color="white"
              @clear="clearDateExam2"
            >
            </q-input>
          </template>
        </datepicker>
      </div>
      <div class="col-12">
        <q-separator size="3px" color="grey-2" />
      </div>
      <div class="col-12 text-weight-bold text-dark items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
        ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
      </div>
      <div class="col-xs-12 col-sm-6">
        <q-select
          :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
          option-value="id"
          :options="optionCaretaker"
          :readonly="editStatus != true"
          dense
          hide-bottom-space
          borderless
          :outlined="editStatus == true"
          v-model="caretaker1"
          :label="`ผู้ดูแลคนที่ 1`"
          option-label="label"
          @filter="filterFnCaretaker"
          use-input
          behavior="menu"
          bg-color="white"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>

      <div class="col-xs-12 col-sm-6">
        <q-select
          clearable
          :options="optionCaretaker2"
          option-value="id"
          option-label="label"
          hide-bottom-space
          :readonly="editStatus != true"
          dense
          borderless
          :outlined="editStatus == true"
          v-model="caretaker2"
          :label="`ผู้ดูแลคนที่ 2`"
          @filter="filterFnCaretaker2"
          use-input
          behavior="menu"
          bg-color="white"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>

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

      <div class="col-12 text-weight-bold text-dark items-center">
        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
        ผลการปฏิบัติงาน
      </div>

      <div class="col-12 text-top2 row items-center no-wrap">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
        <q-btn
          v-if="editStatus == true"
          round
          color="primary"
          dense
          icon="mdi-plus"
          flat
          class="q-ml-sm"
          @click="addActivity"
        />
      </div>
      <div class="col-12 row q-gutter-sm">
        <q-card
          v-for="(item, index) in activityArray"
          :key="index"
          flat
          bordered
          class="col-12 q-pa-sm bg-grey-1"
        >
          <div class="col-12 row q-col-gutter-sm">
            <div class="col-xs-12 col-sm-6">
              <q-input
                :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []"
                hide-bottom-space
                :readonly="editStatus != true"
                dense
                borderless
                :outlined="editStatus == true"
                class="bg-white"
                type="textarea"
                v-model="activity_desc[index]"
                label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
              />
            </div>
            <div class="col-xs-12 col-sm-5">
              <q-input
                :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []"
                hide-bottom-space
                :readonly="editStatus != true"
                dense
                borderless
                :outlined="editStatus == true"
                class="bg-white"
                type="textarea"
                v-model="goal_desc[index]"
                label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
              />
            </div>
            <!-- delete -->
            <div
              v-if="index > 1"
              class="col-xs-12 col-sm-1 flex justify-center items-center"
            >
              <q-btn
                flat
                round
                color="red"
                icon="mdi-trash-can-outline"
                @click="deleteactivity(index)"
                v-if="editStatus == true"
              />
            </div>
          </div>
        </q-card>
      </div>

      <div class="col-12 text-weight-bold text-dark">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
      </div>

      <div class="col-12">
        <q-card bordered flat class="q-pa-sm bg-grey-1 row q-col-gutter-y-md">
          <div class="col-12">
            <div class="col-12 text-top2 row items-center">
              ความรู้ความสามารถในการปฏิบัติงาน
              <q-btn
                v-if="editStatus == true"
                round
                color="primary"
                dense
                icon="mdi-plus"
                flat
                class="q-ml-sm"
                @click="addKnowledge"
              />
            </div>
            <div
              v-for="(item, index) in knowledgeArray"
              :key="index"
              class="col-12 row q-col-gutter-sm"
            >
              <div class="col-xs-12 col-sm-11 q-my-xs">
                <q-select
                  :option-label="(item) => `${item.title}-${item.description}`"
                  option-value="id"
                  map-options
                  :rules="
                    index < 3 ? [(val) => !!val || 'กรุณาเลือกความสามารถ'] : []
                  "
                  hide-bottom-space
                  :options="OPknowledge"
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="knowledge[index]"
                  :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
                />
              </div>
              <div
                v-if="index > 2"
                class="col-xs-12 col-sm-1 flex justify-center items-center"
              >
                <q-btn
                  v-if="editStatus == true"
                  flat
                  round
                  color="red"
                  icon="mdi-trash-can-outline"
                  @click="deleteknowledge(index)"
                />
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="col-12 text-top2 row items-center">
              ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
            </div>
            <q-card
              flat
              bordered
              class="col-12"
              style="max-height: 500px; overflow-y: scroll"
            >
              <div class="example-row-column-width">
                <div class="bg-grey-3 q-py-xs">
                  <div
                    class="row"
                    v-for="(item, index) in checkRule"
                    :key="item.id"
                  >
                    <div
                      v-if="index === 0"
                      :class="`${
                        $q.screen.gt.xs
                          ? 'col-1 text-center'
                          : 'col-2 text-center'
                      } `"
                    >
                      <q-checkbox
                        :true-value="1"
                        :false-value="0"
                        v-if="item.status_select === 1"
                        v-model="item.checked"
                        dense
                        :disable="editStatus != true"
                      />
                    </div>
                    <div
                      v-if="index === 0"
                      :class="`${$q.screen.gt.xs ? 'col-11' : 'col-10'}`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>
                <div v-for="(item, index) in checkRule" :key="item.id">
                  <div
                    v-if="index === 1"
                    class="row bg-grey-2 q-py-xs borderCheck"
                  >
                    <div
                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
                    ></div>
                    <div class="col-10">
                      {{ item.description }}
                    </div>
                  </div>
                </div>
                <div v-for="(item, index) in checkRule" :key="item.id">
                  <div
                    v-if="index === 2"
                    class="row bg-grey-2 q-py-xs borderCheck"
                  >
                    <div
                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
                    ></div>
                    <div
                      :class="`col-10 ${
                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                  <div
                    v-else-if="index > 2 && index < 9"
                    class="row borderCheck border_y q-py-xs items-center"
                  >
                    <div
                      :class="`${
                        $q.screen.gt.xs
                          ? 'col-1 text-center'
                          : 'col-2 text-center'
                      } `"
                    >
                      <q-checkbox
                        :true-value="1"
                        :false-value="0"
                        v-model="item.checked"
                        dense
                        :disable="editStatus != true"
                      />
                    </div>

                    <div
                      :class="`${
                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>
                <div v-for="(item, index) in checkRule" :key="item.id">
                  <div
                    v-if="index === 9"
                    class="row bg-grey-2 q-py-xs borderCheck"
                  >
                    <div
                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
                    ></div>
                    <div
                      :class="`col-10 ${
                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                  <div
                    v-else-if="index > 9 && index < 16"
                    class="row borderCheck border_y q-py-xs"
                  >
                    <div
                      :class="`${
                        $q.screen.gt.xs
                          ? 'col-1 text-center'
                          : 'col-2 text-center'
                      } `"
                    >
                      <q-checkbox
                        :true-value="1"
                        :false-value="0"
                        v-model="item.checked"
                        dense
                        :disable="editStatus != true"
                      />
                    </div>
                    <div
                      :class="`${
                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>

                <div v-for="(item, index) in checkRule" :key="item.id">
                  <div
                    v-if="index === 16"
                    class="row bg-grey-2 q-py-xs borderCheck"
                  >
                    <div
                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
                    ></div>
                    <div
                      :class="`col-10 ${
                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>

                  <div
                    v-else-if="index > 16 && index < 19"
                    class="row borderCheck border_y q-py-xs"
                  >
                    <div
                      :class="`${
                        $q.screen.gt.xs
                          ? 'col-1 text-center'
                          : 'col-2 text-center'
                      } `"
                    >
                      <q-checkbox
                        :true-value="1"
                        :false-value="0"
                        v-model="item.checked"
                        dense
                        :disable="editStatus != true"
                      />
                    </div>
                    <div
                      :class="`${
                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>

                <div v-for="(item, index) in checkRule" :key="item.id">
                  <div
                    v-if="index === 19"
                    class="row bg-grey-2 q-py-xs borderCheck"
                  >
                    <div
                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
                    ></div>
                    <div
                      :class="`col-10 ${
                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                  <div
                    v-else-if="index > 19 && index < 30"
                    class="row borderCheck border_y q-py-xs"
                  >
                    <div
                      :class="`${
                        $q.screen.gt.xs
                          ? 'col-1 text-center'
                          : 'col-2 text-center'
                      } `"
                    >
                      <q-checkbox
                        :true-value="1"
                        :false-value="0"
                        v-model="item.checked"
                        dense
                        :disable="editStatus != true"
                      />
                    </div>
                    <div
                      :class="`${
                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
                      }`"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="col-12">
            <div class="col-12 text-top2">
              กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
            </div>
            <div class="col-12 row q-col-gutter-md">
              <div class="col-12">
                <q-input
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="OtherLaw"
                  type="textarea"
                />
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="col-12 text-top2">ทักษะ</div>
            <div class="col-12 row q-col-gutter-sm">
              <div class="col-xs-12 col-sm-6">
                <q-select
                  :option-label="
                    (item) => `${item.title} - ${item.level_description}`
                  "
                  option-value="id"
                  hide-bottom-space
                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
                  :options="OPcomputer"
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  map-options
                  :outlined="editStatus == true"
                  v-model="skill"
                  label="ด้านที่ 1"
                >
                  <template v-slot:selected-item="scope">
                    <div class="ellipsis-2-lines">
                      {{ scope.opt.title }} -
                      {{ scope.opt.level_description }}
                    </div>
                  </template></q-select
                >
              </div>

              <div class="col-xs-12 col-sm-6">
                <q-select
                  ellipsis-2-lines
                  :option-label="
                    (item) => `${item.title} - ${item.level_description}`
                  "
                  option-value="id"
                  map-options
                  hide-bottom-space
                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
                  :options="OPenglish"
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="skill2"
                  label="ด้านที่ 2"
                >
                  <template v-slot:selected-item="scope">
                    <div class="ellipsis-2-lines">
                      {{ scope.opt.title }} -
                      {{ scope.opt.level_description }}
                    </div>
                  </template></q-select
                >
              </div>

              <div class="col-xs-12 col-sm-6">
                <q-select
                  :option-label="
                    (item) => `${item.title} - ${item.level_description}`
                  "
                  option-value="id"
                  hide-bottom-space
                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
                  :options="OPinfomation"
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  map-options
                  borderless
                  :outlined="editStatus == true"
                  v-model="skill3"
                  label="ด้านที่ 3"
                >
                  <template v-slot:selected-item="scope">
                    <div class="ellipsis-2-lines">
                      {{ scope.opt.title }} -
                      {{ scope.opt.level_description }}
                    </div>
                  </template></q-select
                >
              </div>

              <div class="col-xs-12 col-sm-6">
                <q-select
                  :option-label="
                    (item) => `${item.title} - ${item.level_description}`
                  "
                  option-value="id"
                  hide-bottom-space
                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
                  :options="OPresourse"
                  class="bg-white"
                  :readonly="editStatus != true"
                  dense
                  map-options
                  borderless
                  :outlined="editStatus == true"
                  v-model="skill4"
                  label="ด้านที่ 4"
                >
                  <template v-slot:selected-item="scope">
                    <div class="ellipsis-2-lines">
                      {{ scope.opt.title }} -
                      {{ scope.opt.level_description }}
                    </div>
                  </template></q-select
                >
              </div>
            </div>
          </div>
        </q-card>
      </div>

      <div class="col-12 text-weight-bold text-dark">
        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
        3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
      </div>
      <div class="col-12">
        <q-card bordered flat class="q-pa-md bg-grey-1">
          <div class="row q-col-gutter-sm">
            <div class="col-12 text-top2">สมรรถนะหลัก</div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                :options="filterMain(OPmain, [main2, main3, main4, main5])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                map-options
                :outlined="editStatus == true"
                v-model="main"
                label="ตัวที่ 1"
              >
                <!-- <template v-slot:selected-item="scope">
                  <div class="ellipsis-2-lines">
                    {{ scope.opt.title }} -
                    {{ scope.opt.description }}
                  </div>
                </template> -->
              </q-select>
            </div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                :options="filterMain(OPmain, [main, main3, main4, main5])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                map-options
                :outlined="editStatus == true"
                v-model="main2"
                label="ตัวที่ 2"
              >
                <!-- <template v-slot:selected-item="scope">
                  <div class="ellipsis-2-lines">
                    {{ scope.opt.title }} -
                    {{ scope.opt.description }}
                  </div>
                </template> -->
              </q-select>
            </div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                :options="filterMain(OPmain, [main, main2, main4, main5])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                map-options
                borderless
                :outlined="editStatus == true"
                v-model="main3"
                label="ตัวที่ 3"
              >
                <!-- <template v-slot:selected-item="scope">
                  <div class="ellipsis-2-lines">
                    {{ scope.opt.title }} -
                    {{ scope.opt.description }}
                  </div>
                </template> -->
              </q-select>
            </div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                :options="filterMain(OPmain, [main, main2, main3, main5])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                map-options
                :outlined="editStatus == true"
                v-model="main4"
                label="ตัวที่ 4"
              >
                <!-- <template v-slot:selected-item="scope">
                  <div class="ellipsis-2-lines">
                    {{ scope.opt.title }} -
                    {{ scope.opt.description }}
                  </div>
                </template> -->
              </q-select>
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-select
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                :options="filterMain(OPmain, [main, main2, main3, main4])"
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
                "
                option-value="id"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                map-options
                borderless
                :outlined="editStatus == true"
                v-model="main5"
                label="ตัวที่ 5"
              >
                <!-- <template v-slot:selected-item="scope">
                              <div class="ellipsis-2-lines">
                                {{ scope.opt.title }} -
                                {{ scope.opt.description }}
                              </div>
                            </template> -->
              </q-select>
            </div>
            <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
                :options="filterData(OPgroup, [group2, group3])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                map-options
                :outlined="editStatus == true"
                v-model="group"
                label="ตัวที่ 1"
              >
                <!-- <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template> -->
              </q-select>
            </div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
                "
                option-value="id"
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
                :options="filterData(OPgroup, [group, group3])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                map-options
                :outlined="editStatus == true"
                v-model="group2"
                label="ตัวที่ 2"
              >
                <!-- <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template> -->
              </q-select>
            </div>

            <div class="col-xs-12 col-sm-6">
              <q-select
                :options-html="true"
                :option-label="
                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
                "
                option-value="id"
                map-options
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
                :options="filterData(OPgroup, [group, group2])"
                class="bg-white"
                :readonly="editStatus != true"
                dense
                borderless
                :outlined="editStatus == true"
                v-model="group3"
                label="ตัวที่ 3"
              >
                <!-- <template v-slot:selected-item="scope">
                            <div class="ellipsis-2-lines">
                              {{ scope.opt.title }} -
                              {{ scope.opt.description }}
                            </div>
                          </template> -->
              </q-select>
            </div>
          </div>
        </q-card>
      </div>

      <div class="col-12 row">
        <div class="col-12 text-weight-bold text-dark row items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
            class="text-weight-regular q-pl-sm"
          >
            ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
          >
        </div>
        <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
          <div class="row col-12 q-gutter-lg">
            <div class="col-12 row">
              <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
                  <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
                  <li>
                    ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
                    เอาใจใส่เป็นมาตรฐานเดียวกัน
                  </li>
                  <li>
                    ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
                  </li>
                </div>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>
                    อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
                  </li>
                  <li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
                  <li>
                    ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
                    อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                    และพระมหากษัตริย์
                  </li>
                </div>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
                  <li>
                    แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                  </li>
                  <li>
                    ไม่กระทำการใด ๆ
                    อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
                  </li>
                  <li>
                    ไม่กระทำการใด ๆ
                    อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                  </li>
                  <li>
                    ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
                  </li>
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>

      <div class="col-12 row">
        <div class="col-12 text-weight-bold text-dark">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          3.5 อื่น ๆ (ถ้ามี)
        </div>
        <div class="col-12">
          <q-input
            :readonly="editStatus != true"
            dense
            borderless
            :outlined="editStatus == true"
            v-model="Other"
            bg-color="white"
          />
        </div>
      </div>

      <div class="col-12 row">
        <div class="col-12 text-weight-bold text-dark row items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
          <q-btn
            v-if="editStatus == true"
            round
            color="primary"
            dense
            icon="mdi-plus"
            flat
            class="q-ml-sm"
            @click="addProductivity"
          />
        </div>
        <div class="col-12 row q-gutter-md">
          <q-card
            v-for="(item, index) in ProductivityArray"
            :key="index"
            flat
            bordered
            class="col-12 q-pa-sm bg-grey-1"
          >
            <div class="col-12 row q-col-gutter-sm">
              <div class="col-xs-12 col-sm-6">
                <q-input
                  hide-bottom-space
                  :rules="
                    index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                  "
                  type="textarea"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="output_desc[index]"
                  label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                  bg-color="white"
                />
              </div>

              <div class="col-xs-12 col-sm-5">
                <q-input
                  :rules="
                    index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                  "
                  hide-bottom-space
                  bg-color="white"
                  type="textarea"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="indicator_desc[index]"
                  label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                />
              </div>

              <div
                v-if="index > 0"
                class="col-xs-12 col-sm-1 flex justify-center items-center"
              >
                <q-btn
                  flat
                  v-if="editStatus == true"
                  round
                  color="red"
                  icon="mdi-trash-can-outline"
                  @click="deleteProductivitys(index)"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

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

        <div class="col-12 text-top2">
          ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
          ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          4.2
          การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          4.3
          การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
        </div>
      </div>
      <div class="col-12">
        <q-separator size="3px" color="grey-2" />
      </div>

      <div class="col-12 row q-col-gutter-y-sm">
        <div class="col-12 text-weight-bold text-dark items-center">
          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
          การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          5.1
          ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
        </div>
        <div class="col-12">
          <q-card flat bordered class="q-pa-sm bg-grey-1">
            <div class="row q-col-gutter-y-sm">
              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
              <div class="col-12">
                <div class="column q-ml-md">
                  <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
                  <li>ทักษะที่ ก.ก. กำหนด</li>
                  <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
                  <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
                  <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
                  <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                  <li>อื่นๆ (ถ้ามี)</li>
                </div>
              </div>
              <div class="col-12">
                <q-input
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  v-model="Other5"
                  label="กรอกอื่นๆ"
                  bg-color="white"
                />
              </div>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row">
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          5.3
          ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
        </div>
        <div class="col-12">
          <q-card flat bordered class="q-pa-sm bg-grey-1">
            <div class="column q-ml-md">
              <li>
                บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
              </li>
              <li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
              <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
            </div>
          </q-card>
        </div>
      </div>

      <div class="col-12 row">
        <div class="col-12 text-top2 items-center">
          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
          5.4 สัดส่วนของคะแนนและมาตรฐานการประเมิน
        </div>
        <div class="col-12">
          <q-card flat bordered class="q-pa-sm bg-grey-1">
            <div class="q-col-gutter-md">
              <div class="q-ml-md">
                <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
                <div class="q-pl-lg">
                  ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ
                  50
                </div>
                <div class="q-pl-lg">
                  ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
                  50
                </div>
                <div class="q-pl-lg">
                  มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
                </div>
                <li>
                  สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
                </li>
                <div class="q-pl-lg">
                  คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
                </div>
                <div>
                  <span style="text-decoration: underline">หมายเหตุ</span>
                  ให้นำคะแนนรวมทั้ง 2
                  ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
                  จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>

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

      <div class="col-12 row q-col-gutter-y-sm">
        <div class="col-12 text-weight-bold text-dark items-center">
          การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div class="col-12">
          <div class="col-12 text-top2 items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ผู้ทดลองปฏิบัติหน้าที่ราชการ
          </div>
        </div>
        <div class="col-12">
          <div class="row q-col-gutter-sm">
            <div class="col-xs-12 col-sm-4">
              <q-input
                :readonly="editStatus != true"
                dense
                borderless
                :outlined="editStatus == true"
                v-model="fullname"
                label="ชื่อ-นามสกุล"
                bg-color="white"
              />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-input
                :readonly="editStatus != true"
                dense
                borderless
                :outlined="editStatus == true"
                v-model="position"
                label="ตำแหน่ง"
                bg-color="white"
              />
            </div>

            <div class="col-xs-12 col-sm-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="date1"
                :locale="'th'"
                autoApply
                :readonly="editStatus != true"
                borderless
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    hide-bottom-space
                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                    :readonly="editStatus != true"
                    dense
                    borderless
                    :outlined="editStatus == true"
                    class="full-width datepicker"
                    :model-value="date1 != null ? date2Thai(date1) : null"
                    label="ลงวันที่"
                    bg-color="white"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="row q-col-gutter-sm">
          <div class="col-12 text-top2 items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-xs-12 col-sm-8">
            <q-select
              v-if="editStatus == true"
              :options="optionCaretaker"
              option-label="label"
              :readonly="editStatus != true"
              dense
              borderless
              :outlined="editStatus == true"
              v-model="caretaker1"
              label="ผู้ดูแลคนที่ 1"
              @filter="filterFnCaretaker"
              use-input
              behavior="menu"
              bg-color="white"
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
            <q-select
              v-else
              :options="optionCaretaker"
              option-value="id"
              option-label="label"
              class="col-xs-12 col-sm-8"
              :readonly="!editStatus"
              dense
              borderless
              :outlined="editStatus"
              v-model="caretaker1"
              label="ผู้ดูแลคนที่ 1"
              @filter="filterFnCaretaker"
              use-input
              behavior="menu"
              bg-color="white"
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>

          <div class="col-xs-12 col-sm-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="date2"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              :readonly="editStatus != true"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  hide-bottom-space
                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                  :readonly="editStatus != true"
                  dense
                  borderless
                  :outlined="editStatus == true"
                  class="full-width datepicker"
                  :model-value="date2 != null ? date2Thai(date2) : null"
                  label="ลงวันที่"
                  bg-color="white"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>

          <q-select
            clearable
            v-if="editStatus == true"
            :options="optionCaretaker2"
            option-label="label"
            class="col-xs-12 col-sm-8"
            :readonly="editStatus != true"
            dense
            borderless
            :outlined="editStatus == true"
            v-model="caretaker2"
            label="ผู้ดูแลคนที่ 2"
            @filter="filterFnCaretaker2"
            use-input
            behavior="menu"
            bg-color="white"
            ><template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
              </q-item>
            </template>
          </q-select>

          <q-select
            clearable
            v-else
            :options="optionCaretaker2"
            option-value="id"
            option-label="label"
            class="col-xs-12 col-sm-8"
            :readonly="!editStatus"
            dense
            borderless
            :outlined="editStatus"
            v-model="caretaker2"
            label="ผู้ดูแลคนที่ 2"
            @filter="filterFnCaretaker2"
            use-input
            behavior="menu"
            bg-color="white"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
              </q-item>
            </template>
          </q-select>

          <div class="col-xs-12 col-sm-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="date3"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
              :readonly="editStatus != true || !caretaker2"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  hide-bottom-space
                  :disable="!caretaker2"
                  :readonly="editStatus != true"
                  dense
                  :rules="
                    caretaker2 ? [(val) => !!val || 'กรุณาเลือกวันที่'] : []
                  "
                  borderless
                  :outlined="editStatus == true"
                  class="full-width datepicker"
                  :model-value="caretaker2 != null ? date2Thai(date3) : null"
                  label="ลงวันที่"
                  bg-color="white"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="row q-col-gutter-sm">
          <div class="col-12 text-top2 items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ผู้บังคับบัญชาผู้มอบหมายงาน
          </div>

          <div class="col-12">
            <div class="row q-col-gutter-sm">
              <q-select
                v-if="editStatus == true"
                :options="OPcommanderFn"
                option-label="label"
                class="col-xs-12 col-sm-8"
                :readonly="editStatus != true"
                dense
                borderless
                :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
                :outlined="editStatus == true"
                v-model="commander"
                hide-bottom-space
                label="ผู้บังคับบัญชา"
                use-input
                behavior="menu"
                @filter="filterFnCommander"
                bg-color="white"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>

              <q-select
                v-else
                :options="OPcommanderFn"
                option-value="id"
                option-label="label"
                class="col-xs-12 col-sm-8"
                :readonly="!editStatus"
                dense
                :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
                borderless
                hide-bottom-space
                :outlined="editStatus"
                v-model="commander"
                label="ผู้บังคับบัญชา"
                use-input
                behavior="menu"
                @filter="filterFnCommander"
                bg-color="white"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>

              <div class="col-xs-12 col-sm-4">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="date4"
                  :locale="'th'"
                  autoApply
                  borderless
                  :readonly="editStatus != true"
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      hide-bottom-space
                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                      :readonly="editStatus != true"
                      dense
                      borderless
                      :outlined="editStatus == true"
                      class="full-width datepicker"
                      :model-value="date4 != null ? date2Thai(date4) : null"
                      label="ลงวันที่"
                      bg-color="white"
                    >
                      <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 class="col-12">
        <div class="row q-col-gutter-y-sm">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ประธานกรรมการ
          </div>
          <div class="col-12">
            <div class="row q-col-gutter-sm">
              <q-select
                v-if="editStatus == true"
                :options="OPchairmanFn"
                option-label="label"
                class="col-xs-12 col-sm-8"
                :readonly="editStatus != true"
                dense
                hide-bottom-space
                borderless
                :outlined="editStatus == true"
                v-model="chairman"
                label="ประธานกรรมการ"
                :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
                use-input
                behavior="menu"
                @filter="filterFnChairman"
                bg-color="white"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>

              <q-select
                v-else
                :options="OPchairmanFn"
                option-value="id"
                option-label="label"
                class="col-xs-12 col-sm-8"
                :readonly="!editStatus"
                dense
                hide-bottom-space
                borderless
                :outlined="editStatus"
                v-model="chairman"
                :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
                label="ประธานกรรมการ"
                use-input
                behavior="menu"
                @filter="filterFnChairman"
                bg-color="white"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <div v-if="routeName == 'probationAdd'" class="full-width" align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </div>
      </div>
    </div>
  </q-form>
</template>
<style scoped>
.mobileClass {
  background-color: #fff;
  border-radius: 10px;
  padding-right: 16px;
  padding-bottom: 16px;
  margin-left: 0px;
}

.border_y {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}

.borderCheck {
  border-bottom: 1px solid #d8d8d8;
}

.text-top2 {
  font-weight: 500;
  color: rgb(70, 68, 68);
}

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

.text-Hd {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 5px;
  color: #02a998;
}

.bin {
  align-items: center;
  justify-content: center;
}

.q-item span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
