<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";

import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";

import DialogHeader from "@/components/DialogHeader.vue";

/** use*/
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useEvaluateDetailStore();

const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;

const id = ref<string>(route.params.id as string); //id ประเมิน

const myForm = ref<any>();
const subject = ref<string>(""); //ชื่อผลงาน
const author = ref<string>(""); //เจ้าของผลงาน
const messenger = ref<string>(""); //ข้อความ
const title = ref<string>(""); //หัวข้อ
const modalEvaluation = ref<boolean>(false); //แสดง popup ติดต่อผู้ขอประเมิน
const fileEvaluationUpload = ref<any>(); //ไฟล์
const fileEvaluationUploadRef = ref<any>();
const files = [
  {
    id: "file1",
    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
  },
  {
    id: "file2",
    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
  },
  // {
  //   id: "file3",
  //   fileName:
  //     "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
  //   pathName:
  //     "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
  // },
  {
    id: "file4",
    fileName: "แบบประเมินคุณลักษณะบุคคล",
    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
  },
  // {
  //   id: "file5",
  //   fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  //   pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  // },
  {
    id: "file6",
    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
];

const download10Url = ref<string>("");

const modalTemplates = ref<boolean>(false);
const formBodyTemplates = reactive({
  detailFooter: "",
  detailBody: "",
});
const formTemplates = ref<any[]>([
  {
    code: "EV1_005",
    templateName: "template-1",
    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
    downloadFile: "",
    fileType: "",
  },
  {
    code: "EV1_006",
    templateName: "template-2",
    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
    downloadFile: "",
    fileType: "",
  },
  {
    code: "EV1_008",
    templateName: "template-4",
    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
    downloadFile: "",
    fileType: "",
  },
  {
    code: "EV1_010",
    templateName: "template-6",
    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
    downloadFile: "",
    fileType: "",
  },
]);

const fileEvaluatioRef = ref<any>();
const formEvaluation = ref<any[]>([
  {
    code: "EV1_007",
    templateName: "template-3",
    title:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล(เอกสารแบบ ก)",
    fileName:
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
    downloadFile: "",
    fileType: "",
    file: null,
  },
  {
    code: "EV1_009",
    templateName: "template-5",
    title: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก(เอกสารหมายเลข 9)",
    fileName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    downloadFile: "",
    fileType: "",
    file: null,
  },
]);

/**
 * function ดาวน์โหลดไฟล์ต้นแบบ
 */
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  await http
    .get(config.API.evaluateGetReport(id.value))
    .then(async (res) => {
      const data = res.data.result;
      const body = {
        template: tp,
        reportName: templateName,
        data: data,
      };
      await genReport(body, fileName);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 *  function เปิด popup ติดต่อผู้ขอประเมิน
 */
function openPopUp() {
  modalEvaluation.value = true;
}

/**
 * function ดาวน์โหลดไฟล์
 * @param name ชื้อไฟล์
 */
async function downloadFile(name: string) {
  showLoader();
  await http
    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
    .then(async (res) => {
      const link = res.data.downloadUrl;
      const type = res.data.fileType;
      const fileName = res.data.fileName;
      await getPDF(link, type, fileName);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เรียกไฟล์ PDF
 * @param url  link PDF
 * @param type  ประเภทไฟล์
 * @param fileName  ชือไฟล์
 */
async function getPDF(url: string, type: string, fileName: string) {
  await axios
    .get(url, {
      method: "GET",
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
      },
    })
    .then(async (res) => {
      const a = document.createElement("a");
      a.href = window.URL.createObjectURL(res.data);
      a.download = fileName;
      a.click();
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {});
}

/** function ส่งไปประกาศบนเว็บไซต์ */
function onWebSite() {
  const downloadArray = [
    download10Url.value,
    formEvaluation.value[0].downloadFile,
    formEvaluation.value[1].downloadFile,
  ];

  if (downloadArray.some((e: any) => e === "")) {
    for (let i = 0; i < downloadArray.length; i++) {
      if (downloadArray[i] === "") {
        if (i == 0) {
          fileEvaluationUploadRef.value.validate();
          fileEvaluationUpload.value = null;
        } else {
          fileEvaluatioRef.value[0].validate();
          fileEvaluatioRef.value[1].validate();
          formEvaluation.value[i - 1].file = null;
        }
      }
    }
  } else {
    dialogConfirm(
      $q,
      () => {
        showLoader();
        http
          .put(config.API.evaluationApproveDoc1(id.value))
          .then(() => {
            success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
            getStep();
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(() => {
            hideLoader();
          });
      },
      "ยืนยันการส่งไปประกาศบนเว็บไซต์",
      "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
    );
  }

  // download10Url.value === ""
  //   ? (fileEvaluationUpload.value = "")
  //   : fileEvaluationUpload.value;

  // fileEvaluatioRef.value[0].validate();
  // fileEvaluatioRef.value[1].validate();
  // if (
  //   fileEvaluationUploadRef.value.hasError === false &&
  //   download10Url.value !== ""
  // ) {
  //   dialogConfirm(
  //     $q,
  //     () => {
  //       showLoader();
  //       http
  //         .put(config.API.evaluationApproveDoc1(id.value))
  //         .then(() => {
  //           success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
  //         })
  //         .catch(() => {})
  //         .finally(() => {
  //           getStep();
  //         });
  //     },
  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์",
  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
  //   );
  // }
}

/** function เช็คขั้นตอน*/
async function getStep() {
  showLoader();
  await http
    .get(config.API.evaluateGetStep(id.value))
    .then((res: any) => {
      const data = res.data.result;

      let step =
        data.step === "CHECK_SPEC"
          ? 1
          : data.step === "PREPARE_DOC_V1"
          ? 2
          : data.step === "CHECK_DOC_V1"
          ? 3
          : data.step === "WAIT_CHECK_DOC_V1"
          ? 4
          : data.step === "ANNOUNCE_WEB"
          ? 5
          : data.step === "PREPARE_DOC_V2"
          ? 6
          : data.step === "WAIT_CHECK_DOC_V2"
          ? 7
          : data.step === "CHECK_DOC_V2"
          ? 8
          : data.step === "DONE"
          ? 9
          : 1;

      store.currentStep = step;
      store.step = step;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function เรียก link อัปโหลด
 * @param file ไฟล์
 */
async function upLoadFile(file: any, fileName: string) {
  if (file) {
    showLoader();
    await http
      .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
        fileList: {
          fileName: fileName,
          metadata: {
            tag: "value",
            subject: subject.value,
            author: author.value,
          },
        },
      })
      .then(async (res) => {
        const foundKey: any = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        const link = res.data[foundKey]?.uploadUrl;
        await uploadfile(link, file);
        await fetchCheckFile(fileName);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/**
 *  functoin อัปโหลดไฟล์
 * @param uploadUrl  link อัปโหลด
 * @param file  ไฟล์
 */
async function uploadfile(uploadUrl: string, file: any) {
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      success($q, "อัปโหลไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**  fiunction ส่งข้อความ*/
async function sentMessenger() {
  myForm.value.validate().then(async (result: boolean) => {
    if (result) {
      showLoader();
      await http
        .put(config.API.evaluationSentToContact(id.value), {
          subject: title.value,
          body: messenger.value,
        })
        .then(() => {
          success($q, "ส่งข้อความสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          modalEvaluation.value = false;
          title.value = "";
          messenger.value = "";
          hideLoader();
        });
    }
  });
}

/** function เรียกข้อมูลผลงาน*/
async function fetchDataSigner() {
  await http
    .get(config.API.evaluationSigner(id.value, 1))
    .then((res) => {
      const data = res.data.result;
      author.value = data.author;
      subject.value = data.subject;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function fetchCheckFile(fileName: string) {
  await http
    .get(config.API.evaluationPatchData("เล่ม 1", id.value, fileName))
    .then((res) => {
      const index = formTemplates.value.findIndex(
        (item) => item.fileName === fileName
      );
      if (index !== -1) {
        formTemplates.value[index].downloadFile = res.data.downloadUrl;
        formTemplates.value[index].fileType = res.data.fileType;
      }

      const index2 = formEvaluation.value.findIndex(
        (item) => item.fileName === fileName
      );
      if (index2 !== -1) {
        formEvaluation.value[index2].downloadFile = res.data.downloadUrl;
      }

      if (fileName === "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)") {
        download10Url.value = res.data.downloadUrl;
      }
    });
}

function onOpenDialogTemplates() {
  modalTemplates.value = true;
  fetchDataAnnounceTemplete();
}

async function fetchDataAnnounceTemplete() {
  showLoader();
  await http
    .get(config.API.evaluationAnnounceTemplete("get", id.value))
    .then((res) => {
      const data = res.data.result;
      formBodyTemplates.detailBody = data.detailAnnounceStep5Body;
      formBodyTemplates.detailFooter = data.detailAnnounceStep5Footer;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmitBodyTemplates() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(
        config.API.evaluationAnnounceTemplete("edit", id.value),
        formBodyTemplates
      )
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        modalTemplates.value = false;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

onMounted(async () => {
  try {
    showLoader();
    await Promise.all([
      fetchDataSigner(),
      formTemplates.value.forEach((e) => {
        fetchCheckFile(e.fileName);
      }),
      formEvaluation.value.forEach((e) => {
        fetchCheckFile(e.fileName);
      }),

      fetchCheckFile("10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"),
    ]);
  } catch (error) {
    console.log(error);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <!-- เอกสารเล่มที่ 1 -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารเล่มที่ 1
        </div>
        <div class="col-12"><q-separator /></div>

        <q-list
          v-for="file in files"
          :key="file.id"
          class="full-width"
          bordered
        >
          <q-item clickable v-ripple>
            <q-item-section class="text-grey-9">{{
              file.fileName
            }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    size="12px"
                    color="blue"
                    icon="mdi-download"
                    @click="downloadFile(file.pathName)"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>

    <!-- เอกสารเล่มที่ 1 (ฉบับแก้ไข)-->
    <div
      class="col-12"
      v-if="formTemplates.some((e:any) => e.downloadFile !== '')"
    >
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เอกสารเล่มที่ 1 (ฉบับแก้ไข)
        </div>
        <div class="col-12"><q-separator /></div>

        <q-list v-for="file in formTemplates" :key="file.id" class="full-width">
          <q-item clickable v-ripple v-if="file.downloadFile !== ''">
            <q-item-section class="text-grey-9">
              {{ file.title }}
            </q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    size="12px"
                    color="blue"
                    icon="mdi-download"
                    @click="getPDF(file.downloadFile, file.type, file.fileName)"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </div>

    <div
      class="col-6"
      v-if="store.currentStep === 4"
      v-for="(item, index) in formEvaluation"
      :key="index"
    >
      <q-card bordered class="cardSp1">
        <div
          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
        >
          <div>{{ item.title }}</div>
          <q-space />
          <div>
            <q-btn
              flat
              dense
              icon="download"
              color="indigo"
              @click="
                onClickDowloadFile(item.code, item.templateName, item.title)
              "
            >
              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
            >
          </div>
          <div>
            <q-btn
              v-if="item.downloadFile != ''"
              :href="item.downloadFile"
              target="_blank"
              class="q-ml-sm"
              color="blue"
              flat
              dense
              icon="visibility"
            >
              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
            >
          </div>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm" v-if="checkPermission($route)?.attrIsUpdate">
            <div class="row q-col-gutter-md col-12">
              <q-file
                ref="fileEvaluatioRef"
                v-model="item.file"
                class="col-xs-12 col-sm-12"
                label="อัปโหลดไฟล์"
                outlined
                dense
                lazy-rules
                hide-bottom-space
                accept=".pdf"
                :rules="
                item.downloadFile === '' ? [(val:string) => !!val || 'กรุณาเลือกไฟล์'] : []
              "
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
                <template v-slot:after>
                  <q-btn
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-upload"
                    @click="upLoadFile(item.file, item.fileName)"
                  >
                    <q-tooltip>อัปโหลดไฟล์</q-tooltip>
                  </q-btn>
                </template>
              </q-file>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10) -->
    <div class="col-12" v-if="store.currentStep == 4">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div
          class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
        >
          <div>ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)</div>

          <q-btn
            v-if="checkPermission($route)?.attrIsUpdate"
            flat
            dense
            round
            color="edit"
            icon="edit"
            @click="onOpenDialogTemplates"
          >
            <q-tooltip>แก้ไขประกาศ</q-tooltip>
          </q-btn>
          <q-space />
          <div>
            <q-btn
              icon="download"
              color="indigo"
              flat
              dense
              round
              @click="
                onClickDowloadFile(
                  'เอกสารหมายเลข 10',
                  'template-4',
                  'ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)'
                )
              "
            >
              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
            >
          </div>
          <div>
            <q-btn
              v-if="download10Url != ''"
              :href="download10Url"
              target="_blank"
              class="col-12"
              icon="visibility"
              color="blue"
              flat
              dense
              round
            >
              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
            >
          </div>
        </div>
        <div class="col-12" v-if="store.currentStep == 4"><q-separator /></div>
        <div class="row">
          <div
            class="col-12 q-pa-sm"
            v-if="
              store.currentStep == 4 && checkPermission($route)?.attrIsUpdate
            "
          >
            <q-file
              ref="fileEvaluationUploadRef"
              v-model="fileEvaluationUpload"
              class="col-12"
              outlined
              dense
              hide-bottom-space
              lazy-rules
              label="อัปโหลดไฟล์"
              accept=".pdf"
              :rules="
                download10Url === '' ? [(val:string) => !!val || 'กรุณาเลือกไฟล์'] : []
              "
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
              <template v-slot:after>
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload "
                  @click="
                    upLoadFile(
                      fileEvaluationUpload,
                      '10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)'
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </template>
            </q-file>
          </div>
        </div>
      </q-card>
    </div>

    <!-- ติดต่อผู้ขอประเมิน -->
    <div
      class="col-12"
      v-if="store.currentStep == 4 && checkPermission($route)?.attrIsUpdate"
    >
      <div class="q-mt-xs q-gutter-md" align="right">
        <q-btn label="ติดต่อผู้ขอประเมิน" color="info" @click="openPopUp" />
        <q-btn
          unelevated
          label="ส่งไปประกาศบนเว็บไซต์"
          color="public"
          @click="onWebSite"
        />
      </div>
    </div>
  </div>

  <!--  popup ติดต่อผู้ขอประเมิน -->
  <q-dialog v-model="modalEvaluation" persistent>
    <q-card style="min-width: 60vw">
      <q-form ref="myForm">
        <DialogHeader
          tittle="ติดต่อผู้ขอประเมิน"
          :close="
            () => ((modalEvaluation = false), (title = ''), (messenger = ''))
          "
        />
        <q-separator />
        <q-card-section class="q-pa-md bg-grey-1">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                v-model="title"
                label="หัวข้อ"
                outlined
                dense
                bg-color="white"
                hide-bottom-space
                :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="messenger"
                label="ข้อความ"
                type="textarea"
                outlined
                dense
                bg-color="white"
                hide-bottom-space
                :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <div class="row justify-end q-px-md q-py-sm items-center">
          <q-btn
            dense
            color="public"
            id="onSubmit"
            class="q-px-md q-py-xs"
            label="ส่งข้อความ"
            @click="sentMessenger"
          >
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <!--  popup แก้ไขประกาศ -->
  <q-dialog v-model="modalTemplates" persistent>
    <q-card style="min-width: 60vw">
      <q-form
        greedy
        @submit.prevent
        @validation-success="onSubmitBodyTemplates"
      >
        <DialogHeader
          tittle="แก้ไขประกาศ"
          :close="() => (modalTemplates = false)"
        />
        <q-separator />
        <q-card-section class="q-pa-md bg-grey-1">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                v-model="formBodyTemplates.detailBody"
                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 1"
                type="textarea"
                outlined
                dense
                bg-color="white"
              />
            </div>
            <div class="col-12">
              <q-input
                v-model="formBodyTemplates.detailFooter"
                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 2"
                type="textarea"
                outlined
                dense
                bg-color="white"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn type="submit" color="public" label="บันทึก">
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
