<!-- page:จัดการรอบการสอบ สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type {
  RequestPosition,
  RequestPayment,
} from "@/modules/03_recruiting/interface/request/Period";
import type {
  ResponsePosition,
  ResponsePayment,
} from "@/modules/03_recruiting/interface/response/Period";
import type {
  DataOption2,
  UploadType,
} from "@/modules/02_organization/interface/index/Main";

import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
  mixin;

const checkRoutePermisson = ref<boolean>(
  route.name == "qualifyPeriodEditDetail"
); //เช็คชื่อ route
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const editorCondition = ref<string>(
  `<div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;">ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล</span><br></div><div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;"><br></span></div><div><p style="margin-bottom: 16px;"><span style="font-size: 14px;">&nbsp; &nbsp;&nbsp;ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้ายินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></p></div>`
);
const editorConfirm = ref<string>(
  `<div style="text-align: center;"><span style="color: rgb(93, 190, 21); font-weight: 700; letter-spacing: 0.14992px;">คำรับรอง</span><br></div><div><div style=""><div style=""><font color="#35473c"><span style="font-size: 14px;"><br></span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">1.<span style="white-space: pre;"> </span>ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นเป็นจริงทุกประการ และข้าพเจ้ามีคุณสมบัติทั่วไปและไม่มีลักษณะต้องห้ามตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">2.<span style="white-space:pre"> </span>กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นคำขอยกเว้นฯ ภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">3.<span style="white-space:pre"> </span>ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่า เป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ หากมีการตรวจสอบหลักฐานและเอกสาร และหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลังปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่า ข้าพเจ้าเป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่มีสิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จ อาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงาน ตามประมวลกฎหมายอาญา มาตรา 137</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">4.<span style="white-space:pre"> </span>ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้าขอแสดงความยินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">5.<span style="white-space:pre"> </span>ข้าพเจ้ารับทราบว่าการส่งใบสมัครคัดเลือกฯ พร้อมเอกสารนี้ ยังไม่ได้รับการตรวจสอบคุณสมบัติตามหลักเกณฑ์ ประกาศรับสมัครคัดเลือก และเงื่อนไขต่าง ๆ โดยจะได้รับการตรวจสอบคุณสมบัติเมื่อเป็นผู้สอบผ่านข้อเขียนภาคความรู้ความสามารถที่ใช้เฉพาะตำแหน่งแล้วเท่านั้น</span></font></div></div>`
);
const checkDocument = ref<boolean>(false);
const checkDisability = ref<boolean>(false);
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const nameRaw = ref<number | null>(null);
const roundRaw = ref<number | null>(null);
const yearlyRaw = ref<number | null>(null);
const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
const dateAnnounce = ref<Date | null>(null); //วันประกาศผลสอบ
const dateExam = ref<Date | null>(null); //วันที่สอบ
const myFormPayment = ref<any>();
const myFormPosition = ref<any>();
const positionPathOptions = ref<DataOption2[]>([]);
const positionPathFilters = ref<DataOption2[]>([]);
const positionLevelOptions = ref<DataOption2[]>([]);
const positionLevelFilters = ref<DataOption2[]>([]);
const organizationShortName = ref<DataOption2>();
const organizationName = ref<DataOption2>();
const examTypeOptions = [
  { name: "ทั่วไป", id: "normol" },
  { name: "แพทย์", id: "docter" },
];
const category = ref<string>("");

const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const pay = ref<string>("payment1");
const filterPayment = ref<string>(""); //search data table
const filterPosition = ref<string>(""); //search data table
const edit = ref<boolean>(false);
const rowsPayment = ref<ResponsePayment[]>([]);
const rowsPosition = ref<any>([]);
const visibleColumnsPayment = ref<String[]>([
  "accountNumber",
  "bankName",
  "accountName",
]);
const columnsPayment = ref<QTableProps["columns"]>([
  {
    name: "accountNumber",
    align: "left",
    label: "เลขบัญชี",
    sortable: true,
    field: "accountNumber",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "bankName",
    align: "left",
    label: "ธนาคาร",
    sortable: true,
    field: "bankName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "accountName",
    align: "left",
    label: "ชื่อบัญชี",
    sortable: true,
    field: "accountName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const visibleColumnsPosition = ref<String[]>([
  "code",
  "position",
  "level",
  "type",
  "highDegree",
]);
const columnsPosition = ref<QTableProps["columns"]>([
  {
    name: "code",
    align: "left",
    label: "รหัสประจำตำแหน่งที่สอบ",
    sortable: true,
    field: "code",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "highDegree",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "highDegree",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "type",
    align: "left",
    label: "ประเภทแบบฟอร์ม",
    sortable: true,
    field: "type",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/** ย้อนกลับไปหน้าหลัก */
function clickBack() {
  router.push({ name: "qualifyPeriod" });
}

/** ดึงข้อมูล */
async function fetchData() {
  showLoader();
  await http
    .get(config.API.periodExamId(id.value))
    .then((res) => {
      const data = res.data.result;
      const positionData: ResponsePosition[] = [];
      data.positionExam.map((r: RequestPosition) => {
        positionData.push({
          id: r.id,
          position: {
            id: r.positionId,
            name: r.positionName,
          },
          level: {
            id: r.positionLevelId,
            name: r.positionLevelName,
          },
          type: {
            id: r.typeId,
            name: r.typeName,
          },
          code: r.code,
          highDegree: r.highDegree == true ? "1" : "0",
        });
      });
      const bankData: ResponsePayment[] = [];
      data.bankExam.map((r: RequestPayment) => {
        bankData.push({
          id: r.id,
          accountNumber: r.accountNumber,
          bankName: r.bankName,
          accountName: r.accountName,
        });
      });
      id.value = data.id;
      name.value = data.name;
      nameRaw.value = data.name;
      checkDocument.value = data.checkDocument;
      checkDisability.value = data.checkDisability;
      announcementExam.value = data.announcementExam;
      round.value = data.round;
      yearly.value = data.year;
      roundRaw.value = data.round;
      yearlyRaw.value = data.year;
      fee.value = data.fee;
      dateAnnounce.value =
        data.announcementDate != null ? new Date(data.announcementDate) : null;
      dateAnnouncement.value =
        data.announcementStartDate != null && data.announcementEndDate != null
          ? [
              new Date(data.announcementStartDate),
              new Date(data.announcementEndDate),
            ]
          : null;
      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
      dateRegister.value =
        data.registerStartDate != null && data.registerEndDate != null
          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
          : null;
      if (data.fee == 0) {
        data.paymentStartDate = null;
        data.paymentEndDate = null;
      }
      datePayment.value =
        data.paymentStartDate != null && data.paymentEndDate != null
          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
          : null;
      if (data.organizationCodeId != null) {
        organizationShortName.value = {
          id: data.organizationCodeId,
          name: data.organizationCodeName,
        };
      }
      if (data.organizationId != null) {
        organizationName.value = {
          id: data.organizationId,
          name: data.organizationName,
        };
      }
      rowsPosition.value = positionData;
      pay.value = data.paymentKrungThai;
      rowsPayment.value = bankData;
      editor.value = data.detail;
      editorCondition.value = data.editorCondition;
      editorConfirm.value = data.editorConfirm;
      note.value = data.note;
      fileDocs.value = data.documents;
      fileImgs.value = data.images;
      category.value = data.category;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * get รายการ ตำแหน่งในสายงาน
 */
async function fetchPositionPath() {
  showLoader();
  await http
    .get(config.API.positionPath)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption2[] = [];
      data.map((r: DataOption2) => {
        option.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionPathOptions.value = option;
      positionPathFilters.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * get รายการ ตำแหน่งระดับ
 */
async function fetchPositionLevel() {
  showLoader();
  await http
    .get(config.API.positionLevel)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption2[] = [];
      data.map((r: DataOption2) => {
        option.push({
          id: r.id.toString(),
          name: r.name.toString(),
          level: r.level,
        });
      });
      positionLevelOptions.value = option.filter(
        (v: DataOption2) => v.level === 0
      );
      positionLevelFilters.value = option.filter(
        (v: DataOption2) => v.level === 0
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังชั่น filter
 * @param val input
 * @param update Function #quasar
 * @param refData เเยก case
 */
function filterSelector(val: any, update: Function, refData: string) {
  switch (refData) {
    case "positionLevel":
      update(() => {
        positionLevelOptions.value = positionLevelFilters.value.filter(
          (v: DataOption2) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "position":
      update(() => {
        positionPathOptions.value = positionPathFilters.value.filter(
          (v: DataOption2) => v.name.indexOf(val) > -1
        );
      });
      break;
    default:
      break;
  }
}

/**
 * update ปี
 * @param e ปี
 */
async function updateYear(e: number) {
  yearly.value = e;
}

/** saveข้อมูล เพิ่ม แก้ไข */
async function checkSave() {
  if (myForm.value !== null) {
    myForm.value.validate().then(async (success) => {
      if (success) {
        if (edit.value) {
          await editData(id.value);
        } else {
          await addData();
        }
      }
    });
  }
}

/** body สำหรับ save ข้อมูล */
function sendData() {
  const positionData: RequestPosition[] = [];
  rowsPosition.value.map((r: ResponsePosition) => {
    positionData.push({
      id: r.id,
      positionId: r.position.id,
      positionName: r.position.name,
      positionLevelId: r.level.id,
      positionLevelName: r.level.name,
      typeId: r.type.id,
      typeName: r.type.name,
      code: r.code,
      highDegree: r.highDegree == "1" ? true : false,
    });
  });
  if (fee.value == 0) {
    datePayment.value = null;
  }
  const valueData: any = {
    announcementDate:
      dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
    announcementEndDate:
      dateAnnouncement.value != null
        ? dateToISO(dateAnnouncement.value[1])
        : null,
    announcementStartDate:
      dateAnnouncement.value != null
        ? dateToISO(dateAnnouncement.value[0])
        : null,
    examDate: dateExam.value != null ? dateToISO(dateExam.value) : null,
    bankExam: rowsPayment.value,
    checkDisability: checkDisability.value,
    announcementExam: announcementExam.value,
    checkDocument: checkDocument.value,
    detail: editor.value,
    editorCondition: editorCondition.value,
    editorConfirm: editorConfirm.value,
    fee: fee.value,
    id: "",
    isActive: true,
    name: name.value,
    note: note.value,
    organizationCodeId: organizationShortName.value?.id,
    organizationCodeName: organizationShortName.value?.name,
    organizationId: organizationName.value?.id,
    organizationName: organizationName.value?.name,
    paymentEndDate:
      datePayment.value != null ? dateToISO(datePayment.value[1]) : null,
    paymentKrungThai: pay.value,
    paymentStartDate:
      datePayment.value != null ? dateToISO(datePayment.value[0]) : null,
    positionExam: positionData,
    registerEndDate:
      dateRegister.value != null ? dateToISO(dateRegister.value[1]) : null,
    registerStartDate:
      dateRegister.value != null ? dateToISO(dateRegister.value[0]) : null,
    round: round.value,
    year: yearly.value,
    category: category.value,
  };
  return valueData;
}

/** เพิ่มข้อมูล */
async function addData() {
  showLoader();
  await http
    .post(config.API.periodExam, sendData())
    .then(async (res) => {
      const data = res.data.result;
      id.value = data;
      success($q, "บันทึกรอบคัดเลือกสำเร็จ");
      await uploadImgData();
      await uploadDocData();
      await clickBack();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * แก้ไข ข้อมูล
 * @param id  id จัดการรอบคัดเลือก
 */
async function editData(id: string) {
  showLoader();
  await http
    .put(config.API.periodExamId(id), sendData())
    .then(async (res) => {
      success($q, "แก้ไขรอบคัดเลือกสำเร็จ");
      await uploadImgData();
      await uploadDocData();
      await clickBack();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * เก็บไฟล์เป็นอาเรย์
 * @param files ไฟล์
 */
async function fileUploadDoc(files: any) {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
}

/**
 * ลบไฟล์จาก array
 * @param files ไฟล์
 */
async function fileRemoveDoc(files: any) {
  files.forEach((file: any) => {
    const index = fileDocDataUpload.value.findIndex(
      (x: any) => x.__key == file.__key
    );
    if (index > -1) {
      fileDocDataUpload.value.splice(index, 1);
    }
  });
}

/** อัปโหลดไฟล์เอกสาร */
async function uploadDocData() {
  const formData = new FormData();
  if (fileDocDataUpload.value.length > 0) {
    fileDocDataUpload.value.forEach((file: any) => {
      formData.append("", file);
    });
    showLoader();
    await http
      .put(config.API.periodExamDoc(id.value), formData)
      .then((res) => {})
      .catch((e) => {})
      .finally(async () => {
        hideLoader();
      });
  } else {
    clickBack();
  }
}

/**
 * ฟังชั่นเก็บ รูปเป็น array
 * @param files ไฟล์รูป
 */
async function fileUploadImg(files: any) {
  files.forEach((file: any) => {
    fileImgDataUpload.value.push(file);
  });
}

/**
 * ลบไฟล์รูปจาก array
 * @param files รูป
 */
async function fileRemoveImg(files: any) {
  files.forEach((file: any) => {
    const index = fileImgDataUpload.value.findIndex(
      (x: any) => x.__key == file.__key
    );
    if (index > -1) {
      fileImgDataUpload.value.splice(index, 1);
    }
  });
}

/** อัปโหลดรูป */
async function uploadImgData() {
  if (fileImgDataUpload.value.length > 0) {
    const formData = new FormData();
    fileImgDataUpload.value.forEach((file: any) => {
      formData.append("", file);
    });
    showLoader();
    await http
      .put(config.API.periodExamImg(id.value), formData)
      .then((res) => {})
      .catch((e) => {})
      .finally(async () => {
        hideLoader();
      });
  }
}

/**
 * ลบไฟล์
 * @param docId ไฟล์ id
 */
async function deleteDocData(docId: string) {
  const params = {
    documentId: docId,
  };
  showLoader();
  await http
    .delete(config.API.periodExamDoc(id.value.toString()), {
      params,
    })
    .then((res) => {})
    .catch((e) => {})
    .finally(async () => {
      await fetchData();
    });
}

/**
 * ดาวห์โหลดไฟล์
 * @param path ลิงก์
 */
async function downloadData(path: string) {
  window.open(path);
}

/** เพิ่มวิธีการชำระเงิน */
function clickAddPayment() {
  myFormPayment.value.validate().then(async (result: boolean) => {
    if (result) {
      rowsPayment.value.push({
        id: "00000000-0000-0000-0000-000000000000",
        accountNumber: "",
        bankName: "",
        accountName: "",
      });
    }
  });
}

/** ลบวิธีการชำระ */
function clickDeletePayment(row: any) {
  const index = rowsPayment.value.indexOf(row);
  if (index > -1) {
    rowsPayment.value.splice(index, 1);
  }
}

/** เพิ่มตำแหน่ง */
function clickAddPosition() {
  myFormPosition.value.validate().then(async (result: boolean) => {
    if (result) {
      rowsPosition.value.push({
        id: "00000000-0000-0000-0000-000000000000",
        position: null,
        type: { id: "normol", name: "ทั่วไป" },
        code: null,
        highDegree: "0",
      });
    }
  });
}

/** ลบตำแหน่ง  */
function clickDeletePosition(row: any) {
  const index = rowsPosition.value.indexOf(row);
  if (index > -1) {
    rowsPosition.value.splice(index, 1);
  }
}

/**
 * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
 * @param val ช่วงวันที่
 */
function dateThaiRange(val: [Date, Date] | null) {
  if (val === null) {
    return "";
  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
    return `${date2Thai(val[0], true)}`;
  } else {
    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
  }
}

/** clear วันที่สอบ*/
function clearDateExam() {
  dateExam.value = null;
}

/** clear วันที่สมัคร*/
function clearDateRegister() {
  dateRegister.value = null;
}

/** clear วันที่ชำระเงิน*/
function clearDatePayment() {
  datePayment.value = null;
}

/** clear วันประกาศผลสอบ*/
function clearDateAnnounce() {
  dateAnnounce.value = null;
}

watch(fee, () => {
  if (fee.value <= 0) {
    pay.value = "";
  }
});

onMounted(async () => {
  hideLoader();
  if (route.params.id != undefined) {
    edit.value = true;
    id.value = route.params.id.toString();
    await fetchData();
  } else {
    pay.value = "";
    edit.value = false;
  }
  await fetchPositionPath();
  await fetchPositionLevel();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="clickBack"
    />
    {{
      checkRoutePermisson
        ? "รายละเอียด"
        : edit
        ? `แก้ไขรอบ`
        : "เพิ่มรอบคัดเลือก"
    }}
    {{
      edit && announcementExam
        ? `${name} ครั้งที่ ${roundRaw}/${
            yearlyRaw == null ? "" : yearlyRaw + 543
          }`
        : ""
    }}
  </div>
  <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
    <q-form ref="myForm">
      <q-card-section class="q-pa-md">
        <div class="col-xs-12 col-sm-8 items-top q-pb-md">
          <q-toggle
            v-model="announcementExam"
            :false-value="true"
            :true-value="false"
            color="primary"
            label="ประกาศข่าวทั่วไป"
            v-if="!edit"
          />
        </div>
        <div class="col-12 row items-top q-col-gutter-x-sm">
          <div class="col-xs-12 col-sm-6 col-sm-5">
            <q-input
              outlined
              v-model="name"
              label="ชื่อรอบคัดเลือก/ชื่อประกาศ"
              dense
              :readonly="checkRoutePermisson"
              lazy-rules
              :rules="[
                (val:string) => !!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
              ]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <q-input
              outlined
              v-model="round"
              :readonly="checkRoutePermisson"
              type="number"
              label="รอบการสอบ(ครั้ง)"
              dense
              lazy-rules
              :rules="[(val:number) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <q-input
              outlined
              v-model="fee"
              :readonly="checkRoutePermisson"
              type="number"
              label="ค่าธรรมเนียม"
              dense
              lazy-rules
              input-class="text-right"
              :rules="[
                (val:number) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
              ]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="yearly"
              :locale="'th'"
              :readonly="checkRoutePermisson"
              autoApply
              year-picker
              :enableTimePicker="false"
              @update:modelValue="updateYear"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  outlined
                  :readonly="checkRoutePermisson"
                  :model-value="yearly + 543"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                  :label="`${'ปีงบประมาณ'}`"
                >
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateExam"
              :locale="'th'"
              autoApply
              borderless
              :readonly="checkRoutePermisson"
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="checkRoutePermisson"
                  class="full-width datepicker q-mb-md"
                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                  :label="`${'วันที่สอบ'}`"
                  clearable
                  @clear="clearDateExam"
                >
                  <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 class="col-xs-12 col-sm-3 col-md-3">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateAnnouncement"
              :locale="'th'"
              :readonly="checkRoutePermisson"
              autoApply
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="checkRoutePermisson"
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(dateAnnouncement)"
                  :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 class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateRegister"
              :locale="'th'"
              autoApply
              clearValue
              :readonly="checkRoutePermisson"
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  :readonly="checkRoutePermisson"
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(dateRegister)"
                  :label="`${'วันที่สมัคร'}`"
                  clearable
                  @clear="clearDateRegister"
                >
                  <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
            class="col-xs-12 col-sm-3 col-md-3"
            v-if="announcementExam && fee != 0"
          >
            <datepicker
              menu-class-name="modalfix"
              v-model="datePayment"
              :readonly="checkRoutePermisson"
              :locale="'th'"
              autoApply
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :readonly="checkRoutePermisson"
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(datePayment)"
                  :label="`${'วันที่ชำระเงิน'}`"
                  clearable
                  @clear="clearDatePayment"
                >
                  <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 class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateAnnounce"
              :locale="'th'"
              autoApply
              :readonly="checkRoutePermisson"
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  :readonly="checkRoutePermisson"
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="
                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
                  "
                  :label="`${'วันประกาศผลสอบ'}`"
                  clearable
                  @clear="clearDateAnnounce"
                >
                  <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 class="col-12" v-if="announcementExam">
            <div class="col-12 q-mb-sm">
              <q-separator size="5px" color="grey-2" />
            </div>
            <q-form ref="myFormPosition">
              <ProfileTable
                :rows="rowsPosition"
                :columns="columnsPosition"
                :filter="filterPosition"
                :visible-columns="visibleColumnsPosition"
                v-model:inputfilter="filterPosition"
                v-model:inputvisible="visibleColumnsPosition"
                :add="clickAddPosition"
                name="ตำแหน่ง"
                icon=""
                :statusEdit="false"
                :headerShow="false"
                :icon-left="true"
              >
                <template #columns="props">
                  <q-tr :props="props">
                    <q-td auto-width>
                      <q-btn
                        color="red"
                        flat
                        v-if="!checkRoutePermisson"
                        dense
                        round
                        size="14px"
                        icon="mdi-delete"
                        @click="clickDeletePosition(props.row)"
                      />
                    </q-td>
                    <q-td key="code" :props="props">
                      <q-input
                        outlined
                        dense
                        :readonly="checkRoutePermisson"
                        lazy-rules
                        v-model="props.row.code"
                        :rules="[
                            (val:string) => !!val || `${'กรุณากรอกรหัสประจำตำแหน่งที่สอบ'}`,
                            (val:any) =>
                                val.length >= 3 ||
                                `${'กรุณากรอกรหัสประจำตำแหน่งที่สอบ'}`,
                        ]"
                        :label="`${'รหัสประจำตำแหน่งที่สอบ'}`"
                        hide-bottom-space
                        mask="###"
                      />
                    </q-td>
                    <q-td key="position" :props="props">
                      <selector
                        class=""
                        outlined
                        :readonly="checkRoutePermisson"
                        use-input
                        v-model="props.row.position"
                        :options="positionPathOptions"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                        dense
                        hide-bottom-space
                        lazy-rules
                        :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
                        @filter="(inputValue:any,
                            doneFn:Function) => filterSelector(inputValue, doneFn,'position'
                        ) "
                      >
                        <template v-slot:option="scope">
                          <q-item v-bind="scope.itemProps">
                            <q-item-section>
                              <q-item-label>{{ scope.opt.name }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </template>
                        <template v-slot:selected-item="scope">
                          ตำแหน่ง:
                          <q-chip
                            dense
                            square
                            class="q-my-none q-ml-xs q-mr-none"
                          >
                            {{ scope.opt.name }}
                          </q-chip>
                        </template>
                      </selector>
                    </q-td>
                    <q-td key="level" :props="props">
                      <selector
                        class=""
                        outlined
                        use-input
                        v-model="props.row.level"
                        :readonly="checkRoutePermisson"
                        :options="positionLevelOptions"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                        dense
                        hide-bottom-space
                        lazy-rules
                        :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`]"
                        @filter="(inputValue:any,
                            doneFn:Function) => filterSelector(inputValue, doneFn,'positionLevel'
                        ) "
                      >
                        <template v-slot:option="scope">
                          <q-item v-bind="scope.itemProps">
                            <q-item-section>
                              <q-item-label>{{ scope.opt.name }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </template>
                        <template v-slot:selected-item="scope">
                          ระดับ:
                          <q-chip
                            dense
                            square
                            class="q-my-none q-ml-xs q-mr-none"
                          >
                            {{ scope.opt.name }}
                          </q-chip>
                        </template>
                      </selector>
                    </q-td>
                    <q-td key="highDegree" :props="props">
                      <q-radio
                        v-model="props.row.highDegree"
                        label="ประเภททั่วไป"
                        color="teal"
                        :disable="checkRoutePermisson"
                        val="0"
                      />
                      <q-radio
                        v-model="props.row.highDegree"
                        label="ประเภทวิชาการ"
                        color="teal"
                        :disable="checkRoutePermisson"
                        val="1"
                      />
                    </q-td>
                    <q-td key="type" :props="props">
                      <selector
                        class=""
                        outlined
                        v-model="props.row.type"
                        :options="examTypeOptions"
                        :readonly="checkRoutePermisson"
                        option-value="id"
                        option-label="name"
                        dense
                        hide-bottom-space
                        lazy-rules
                        :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทแบบฟอร์ม'}`]"
                      ></selector>
                    </q-td>
                  </q-tr>
                </template>
              </ProfileTable>
            </q-form>
          </div>
          <div class="col-12" v-if="announcementExam && fee != 0">
            <q-separator size="5px" color="grey-2" class="q-mt-lg" />
          </div>
          <div class="col-12 q-mt-lg" v-if="announcementExam && fee != 0">
            <div class="text-bold text-subtitle2 q-pb-md">
              เลือกวิธีการชำระเงิน
            </div>
            <div class="row col-12 q-gutter-y-md q-mb-md">
              <q-list dense bordered class="col-12 rounded-borders">
                <q-item tag="label" v-ripple class="q-pa-md">
                  <q-radio
                    v-model="pay"
                    val="payment1"
                    color="blue"
                    class="q-mr-md"
                    :disable="fee <= 0 || checkRoutePermisson"
                  />
                  <q-item-section avatar>
                    <q-avatar size="28px">
                      <q-img src="@/assets/krungthai.png" class="col-12" />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="text-weight-medium text-subtitle1"
                      >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
                    >
                  </q-item-section>
                </q-item>
              </q-list>

              <q-list dense bordered class="col-12 rounded-borders">
                <q-item tag="label" v-ripple class="q-py-lg">
                  <q-radio
                    v-model="pay"
                    val="payment2"
                    color="blue"
                    class="q-mr-md"
                    :disable="fee <= 0 || checkRoutePermisson"
                  />
                  <q-item-section avatar>
                    <q-icon name="mdi-cash" color="positive" size="33px" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="text-weight-medium text-subtitle1"
                      >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-slide-transition :duration="100">
                  <div v-show="pay == 'payment2'" class="q-pa-sm bg-grey-1">
                    <q-form ref="myFormPayment">
                      <ProfileTable
                        :rows="rowsPayment"
                        :columns="columnsPayment"
                        :filter="filterPayment"
                        :visible-columns="visibleColumnsPayment"
                        v-model:inputfilter="filterPayment"
                        v-model:inputvisible="visibleColumnsPayment"
                        :add="clickAddPayment"
                        name="วิธีการชำระ"
                        icon=""
                        :statusEdit="false"
                        :headerShow="false"
                      >
                        <template #columns="props">
                          <q-tr :props="props">
                            <q-td key="accountNumber" :props="props">
                              <q-input
                                class=""
                                outlined
                                hide-bottom-space
                                :readonly="checkRoutePermisson"
                                v-model="props.row.accountNumber"
                                dense
                                lazy-rules
                                mask="###-#-#####-#"
                                :rules="[
                                  (val:any) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td key="bankName" :props="props">
                              <q-input
                                class=""
                                outlined
                                hide-bottom-space
                                :readonly="checkRoutePermisson"
                                v-model="props.row.bankName"
                                dense
                                lazy-rules
                                :rules="[
                                  (val:any) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td key="accountName" :props="props">
                              <q-input
                                class=""
                                outlined
                                :readonly="checkRoutePermisson"
                                hide-bottom-space
                                v-model="props.row.accountName"
                                dense
                                lazy-rules
                                :rules="[
                                  (val:any) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td auto-width>
                              <q-btn
                                v-if="!checkRoutePermisson"
                                color="red"
                                flat
                                dense
                                round
                                size="14px"
                                icon="mdi-delete"
                                @click="clickDeletePayment(props.row)"
                              />
                            </q-td>
                          </q-tr>
                        </template>
                      </ProfileTable>
                    </q-form>
                  </div>
                </q-slide-transition>
              </q-list>
            </div>
          </div>
          <div class="col-12" v-if="announcementExam">
            <q-separator size="5px" color="grey-2" class="q-mt-md q-mb-lg" />
          </div>
          <div class="row col-12 items-top q-col-gutter-x-sm">
            <div class="col-xs-12 col-sm-6">
              <div class="text-bold text-subtitle2 q-pb-sm">รูปภาพประกอบ</div>
              <div class="row justify-center row col-12">
                <q-uploader
                  color="gray"
                  type="file"
                  flat
                  :readonly="checkRoutePermisson"
                  ref="uploader"
                  class="full-width"
                  text-color="dark"
                  :max-size="10000000"
                  accept=".jpg,.png,.pdf,.csv,.doc,.docx"
                  bordered
                  label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
                  multiple
                  @added="fileUploadImg"
                  @removed="fileRemoveImg"
                >
                  <template v-slot:header="scope">
                    <div
                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                    >
                      <q-btn
                        v-if="
                          scope.queuedFiles.length > 0 && !checkRoutePermisson
                        "
                        icon="clear_all"
                        @click="scope.removeQueuedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบทั้งหมด</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="
                          scope.uploadedFiles.length > 0 && !checkRoutePermisson
                        "
                        icon="done_all"
                        @click="scope.removeUploadedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
                      </q-btn>
                      <q-spinner
                        v-if="scope.isUploading"
                        class="q-uploader__spinner"
                      />
                      <div class="col">
                        <div class="q-uploader__title">
                          {{
                            "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
                          }}
                        </div>
                        <div class="q-uploader__subtitle">
                          {{ scope.uploadSizeLabel }}
                          /
                          {{ scope.uploadProgressLabel }}
                        </div>
                      </div>
                      <q-btn
                        v-if="scope.canAddFiles && !checkRoutePermisson"
                        type="a"
                        icon="add_box"
                        @click="scope.pickFiles"
                        round
                        dense
                        flat
                      >
                        <q-uploader-add-trigger />
                        <q-tooltip>เลือกไฟล์</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.isUploading && !checkRoutePermisson"
                        icon="clear"
                        @click="scope.abort"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
                      </q-btn>
                    </div>
                  </template>
                </q-uploader>
              </div>
              <q-card
                bordered
                flat
                class="full-width q-my-md"
                v-if="fileImgs.length != 0"
              >
                <q-list separator>
                  <q-item
                    v-for="file in fileImgs"
                    :key="file.id"
                    class="q-my-xs"
                  >
                    <q-item-section>
                      <q-item-label class="full-width ellipsis">
                        {{ file.fileName }}
                      </q-item-label>

                      <q-item-label caption>
                        สถานะ: {{ file.fileType }} /
                        {{ file.fileSize }}
                      </q-item-label>
                    </q-item-section>
                    <q-item-section top side>
                      <div class="q-gutter-sm">
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="blue"
                          icon="mdi-download-outline"
                          @click="downloadData(file.detail)"
                        >
                          <q-tooltip>ดาวน์โหลด</q-tooltip>
                        </q-btn>
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="red"
                          icon="mdi-delete-outline"
                          v-if="edit && !checkRoutePermisson"
                          @click="deleteDocData(file.id)"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="text-bold text-subtitle2 q-pb-sm">เอกสารประกอบ</div>
              <div class="row justify-center row col-12">
                <q-uploader
                  color="gray"
                  type="file"
                  flat
                  ref="uploader"
                  class="full-width"
                  :readonly="checkRoutePermisson"
                  text-color="dark"
                  :max-size="10000000"
                  accept=".jpg,.png,.pdf,.csv,.doc,.docx"
                  bordered
                  label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
                  multiple
                  @added="fileUploadDoc"
                  @removed="fileRemoveDoc"
                >
                  <template v-slot:header="scope">
                    <div
                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                    >
                      <q-btn
                        v-if="
                          scope.queuedFiles.length > 0 && !checkRoutePermisson
                        "
                        icon="clear_all"
                        @click="scope.removeQueuedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบทั้งหมด</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="
                          scope.uploadedFiles.length > 0 && !checkRoutePermisson
                        "
                        icon="done_all"
                        @click="scope.removeUploadedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
                      </q-btn>
                      <q-spinner
                        v-if="scope.isUploading"
                        class="q-uploader__spinner"
                      />
                      <div class="col">
                        <div class="q-uploader__title">
                          {{
                            "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
                          }}
                        </div>
                        <div class="q-uploader__subtitle">
                          {{ scope.uploadSizeLabel }}
                          /
                          {{ scope.uploadProgressLabel }}
                        </div>
                      </div>
                      <q-btn
                        v-if="scope.canAddFiles && !checkRoutePermisson"
                        type="a"
                        icon="add_box"
                        @click="scope.pickFiles"
                        round
                        dense
                        flat
                      >
                        <q-uploader-add-trigger />
                        <q-tooltip>เลือกไฟล์</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.isUploading && !checkRoutePermisson"
                        icon="clear"
                        @click="scope.abort"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
                      </q-btn>
                    </div>
                  </template>
                </q-uploader>
              </div>
              <q-card
                bordered
                flat
                class="full-width q-my-md"
                v-if="fileDocs.length != 0"
              >
                <q-list separator>
                  <q-item
                    v-for="file in fileDocs"
                    :key="file.id"
                    class="q-my-xs"
                  >
                    <q-item-section>
                      <q-item-label class="full-width ellipsis">
                        {{ file.fileName }}
                      </q-item-label>

                      <q-item-label caption>
                        สถานะ: {{ file.fileType }} /
                        {{ file.fileSize }}
                      </q-item-label>
                    </q-item-section>
                    <q-item-section top side>
                      <div class="q-gutter-sm">
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="blue"
                          icon="mdi-download-outline"
                          @click="downloadData(file.detail)"
                        >
                          <q-tooltip>ดาวน์โหลด</q-tooltip>
                        </q-btn>
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="red"
                          icon="mdi-delete-outline"
                          v-if="edit && !checkRoutePermisson"
                          @click="deleteDocData(file.id)"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="5px" color="grey-2" class="q-my-lg" />
          </div>
          <div class="col-12">
            <div class="text-bold text-subtitle2 q-pb-sm">รายละเอียด</div>
            <q-editor
              v-model="editor"
              :dense="$q.screen.lt.md"
              toolbar-text-color="blue-grey-10"
              toolbar-bg="blue-grey-2"
              :readonly="checkRoutePermisson"
              toolbar-toggle-color="blue-grey-8"
              class="editor"
              :toolbar="[
                ['left', 'center', 'right', 'justify'],
                [
                  'bold',
                  'italic',
                  'strike',
                  'underline',
                  'subscript',
                  'superscript',
                ],
                ['token', 'hr', 'link', 'custom_btn'],
                ['print', 'fullscreen'],
                [
                  {
                    label: $q.lang.editor.formatting,
                    icon: $q.iconSet.editor.formatting,
                    list: 'no-icons',
                    options: ['p', 'h1', 'h2', 'h3'],
                  },
                  {
                    label: $q.lang.editor.defaultFont,
                    icon: $q.iconSet.editor.font,
                    fixedIcon: true,
                    list: 'no-icons',
                    options: [
                      'default_font',
                      'arial',
                      'arial_black',
                      'comic_sans',
                      'courier_new',
                      'impact',
                      'lucida_grande',
                      'times_new_roman',
                      'verdana',
                    ],
                  },
                  'removeFormat',
                ],
                ['undo', 'redo'],
                ['viewsource'],
              ]"
              :fonts="{
                arial: 'Arial',
                arial_black: 'Arial Black',
                comic_sans: 'Comic Sans MS',
                courier_new: 'Courier New',
                impact: 'Impact',
                lucida_grande: 'Lucida Grande',
                times_new_roman: 'Times New Roman',
                verdana: 'Verdana',
              }"
            />
          </div>
          <div class="col-12 q-mt-md">
            <q-input
              outlined
              :readonly="checkRoutePermisson"
              v-model="note"
              label="หมายเหตุ"
              dense
              lazy-rules
              type="textarea"
            />
          </div>
          <div class="col-12" v-if="announcementExam">
            <q-separator size="5px" color="grey-2" class="q-my-lg" />
          </div>
          <div class="col-12" v-if="announcementExam">
            <div class="text-bold text-subtitle2 q-pb-sm">
              ข้อกำหนดและเงื่อนไข
            </div>
            <q-editor
              v-model="editorCondition"
              :dense="$q.screen.lt.md"
              toolbar-text-color="blue-grey-10"
              toolbar-bg="blue-grey-2"
              :readonly="checkRoutePermisson"
              toolbar-toggle-color="blue-grey-8"
              class="editor"
              :toolbar="[
                ['left', 'center', 'right', 'justify'],
                [
                  'bold',
                  'italic',
                  'strike',
                  'underline',
                  'subscript',
                  'superscript',
                ],
                ['token', 'hr', 'link', 'custom_btn'],
                ['print', 'fullscreen'],
                [
                  {
                    label: $q.lang.editor.formatting,
                    icon: $q.iconSet.editor.formatting,
                    list: 'no-icons',
                    options: ['p', 'h1', 'h2', 'h3'],
                  },
                  {
                    label: $q.lang.editor.defaultFont,
                    icon: $q.iconSet.editor.font,
                    fixedIcon: true,
                    list: 'no-icons',
                    options: [
                      'default_font',
                      'arial',
                      'arial_black',
                      'comic_sans',
                      'courier_new',
                      'impact',
                      'lucida_grande',
                      'times_new_roman',
                      'verdana',
                    ],
                  },
                  'removeFormat',
                ],
                ['undo', 'redo'],
                ['viewsource'],
              ]"
              :fonts="{
                arial: 'Arial',
                arial_black: 'Arial Black',
                comic_sans: 'Comic Sans MS',
                courier_new: 'Courier New',
                impact: 'Impact',
                lucida_grande: 'Lucida Grande',
                times_new_roman: 'Times New Roman',
                verdana: 'Verdana',
              }"
            />
          </div>
          <div class="col-12" v-if="announcementExam">
            <q-separator size="5px" color="grey-2" class="q-my-lg" />
          </div>
          <div class="col-12" v-if="announcementExam">
            <div class="text-bold text-subtitle2 q-pb-sm">คำรับรอง</div>
            <q-editor
              v-model="editorConfirm"
              :dense="$q.screen.lt.md"
              toolbar-text-color="blue-grey-10"
              :readonly="checkRoutePermisson"
              toolbar-bg="blue-grey-2"
              toolbar-toggle-color="blue-grey-8"
              class="editor"
              :toolbar="[
                ['left', 'center', 'right', 'justify'],
                [
                  'bold',
                  'italic',
                  'strike',
                  'underline',
                  'subscript',
                  'superscript',
                ],
                ['token', 'hr', 'link', 'custom_btn'],
                ['print', 'fullscreen'],
                [
                  {
                    label: $q.lang.editor.formatting,
                    icon: $q.iconSet.editor.formatting,
                    list: 'no-icons',
                    options: ['p', 'h1', 'h2', 'h3'],
                  },
                  {
                    label: $q.lang.editor.defaultFont,
                    icon: $q.iconSet.editor.font,
                    fixedIcon: true,
                    list: 'no-icons',
                    options: [
                      'default_font',
                      'arial',
                      'arial_black',
                      'comic_sans',
                      'courier_new',
                      'impact',
                      'lucida_grande',
                      'times_new_roman',
                      'verdana',
                    ],
                  },
                  'removeFormat',
                ],
                ['undo', 'redo'],
                ['viewsource'],
              ]"
              :fonts="{
                arial: 'Arial',
                arial_black: 'Arial Black',
                comic_sans: 'Comic Sans MS',
                courier_new: 'Courier New',
                impact: 'Impact',
                lucida_grande: 'Lucida Grande',
                times_new_roman: 'Times New Roman',
                verdana: 'Verdana',
              }"
            />
          </div>
        </div>
      </q-card-section>
      <q-separator v-if="!checkRoutePermisson" />
      <q-card-actions class="text-primary q-py-sm">
        <q-space />
        <q-btn
          v-if="!checkRoutePermisson"
          flat
          round
          color="public"
          @click="checkSave"
          icon="mdi-content-save-outline"
        >
          <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</template>

<style></style>
