<script setup lang="ts">
import { ref, reactive } from "vue";
import Table from "@/modules/05_placement/components/pass/TableView.vue";
import { useQuasar, QForm } from "quasar";
import type { TableName } from "@/modules/05_placement/interface/request/placement";
import { usePlacementDataStore } from "@/modules/05_placement/store";
import type { QTableProps } from "quasar";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore();
const filter = ref<string>("");
const { placementData } = store;
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const modal = ref<boolean>(false); //modal add detail
const modal_right = ref<boolean>(false); //modal add detail

const modalwaitInfo = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const Name = ref<string>();
const positionMasterUserNote = ref<string>();
const $q = useQuasar(); // show dialog
const files = ref<File[]>([]);
const appointModal = ref<boolean>(false);
const isNewModel = ref<any>(false); //modal add detail
const appoint = ref<any>({
  Code: "",
  UnitName: "",
  PositionNo: "",
  PositionType: "",
  PositionManage: "",
  PositionTypeManage: "",
  PositionLine: "",
  Major: "",
  PositionLevel: "",
});

const saveAppoint = () => {
  console.log("save appoint===>", appoint.value);
};

const savePostpone = () => {
  const dataPost = { note: positionMasterUserNote.value, files: files };
  console.log("save postpone===>", dataPost);
  positionMasterUserNote.value = "";
  modal_right.value = false;
  isNewModel.value = false;
};

const saveDisclaim = () => {
  const dataPost = { note: positionMasterUserNote.value };
  console.log("save disclaim===>", dataPost);
  positionMasterUserNote.value = "";
  modal_right.value = false;
};

const clickEditRow = () => {
  editRow.value = true;
};
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
const selectData = (props: TableName) => {
  itemtest.value = props;
  if (editvisible.value == true) {
    editRow.value = false;
    modalEdit.value = true;
    modal.value = false;
    edit.value = true;
  } else {
    editRow.value = false;
    modalEdit.value = true;
    modal.value = true;
    edit.value = true;
  }
};

const getNumFile = ref(0);
const editDetail = (
  props: TableName,
  action: "cancel" | "wait" | "waitInfo",
  id:Number
) => {
  let dataProp = { ...props };
  if (action === "cancel") {
    getNumFile.value = 0;
    editRow.value = false;
    modalEdit.value = false;
    modal_right.value = true;
    edit.value = true;
    Name.value = props.fullName;
  } else if (action === "wait") {
    getNumFile.value = 1;
    editRow.value = false;
    modalEdit.value = true;
    modal_right.value = true;
    edit.value = true;
    isNewModel.value = true;
    const GetId = (dataProp:any) =>{
      if(dataProp.value == id){
        dataProp.value.push({
          isNewModel:isNewModel.value
        })
      }
    }
    GetId(dataProp);
    console.log(dataProp)
    Name.value = props.fullName;
  } else if (action === "waitInfo") {
    getNumFile.value = 1;
    editRow.value = false;
    modalEdit.value = true;
    modalwaitInfo.value = true;
    edit.value = true;
    isNewModel.value = true;
    Name.value = props.fullName;
  }
};

placementData.mappingPosition.columns.length == 0
  ? (visibleColumns.value = [
      "position",
      "Name",
      "ExamOrder",
      "Unit",
      "ReportingDate",
      "BMAOfficer",
      "Status",
      "checkList",
    ])
  : (visibleColumns.value = placementData.mappingPosition.columns);
const columns = ref<QTableProps["columns"]>([
  {
    name: "position",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "Name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ExamOrder",
    align: "left",
    label: "ลำดับที่สอบได้",
    sortable: true,
    field: "ExamOrder",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Unit",
    align: "left",
    label: "หน่วยงานที่รับการบรรจุ",
    sortable: true,
    field: "Unit",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "ReportingDate",
    align: "left",
    label: "วันที่รายงานตัว",
    sortable: true,
    field: "ReportingDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "BMAOfficer",
    align: "left",
    label: "ข้าราชการฯ กทม.",
    sortable: true,
    field: "BMAOfficer",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "Status",
    align: "left",
    label: "สถานะการบรรจุ",
    sortable: true,
    field: "Status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

const rows = ref<TableName[]>([
  {
    profileID: "4016500103241",
    position: 1,
    fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 1,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "-", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "สละสิทธิ์",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
  {
    profileID: "4016500092355",
    position: 2,
    fullName: "นางสาวรัชภรณ์ ภักดี",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 2,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: false,
    Status: "ยังไม่บรรจุ",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
  {
    profileID: "4016500086436",
    position: 3,
    fullName: "นางสาวภาพรรณ ลออ",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 3,
    unitId: "",
    UnitGroup: "",
    Unit: "",
    ReportingDate: "", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "ยังไม่บรรจุ",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },

  {
    profileID: "4016500073585",
    position: 4,
    fullName: "นางกติมา พนมเทียน",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 4,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.1)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },

  {
    profileID: "4016500053234",
    position: 5,
    fullName: "นางสาววิยฎา ทองเอียด",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "หญิง",
    ExamOrder: 5,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.2)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
  {
    profileID: "4016500042345",
    position: 6,
    fullName: "นายศรุณ เจริญเมือง",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "ชาย",
    ExamOrder: 6,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.3)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "เตรียมบรรจุ",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
  {
    profileID: "401650002245",
    position: 7,
    fullName: "นายอภินัน บอบู่",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "ชาย",
    ExamOrder: 7,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.4)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "บรรจุเเล้ว",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
  {
    profileID: "401650002245",
    position: 7,
    fullName: "นายอภินัน บอบู่",
    dateOfBirth: "17 ก.พ. 2535",
    gender: "ชาย",
    ExamOrder: 7,
    unitId: "",
    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
    Unit: "นักทรัพยากรบุคคล (กบห.4)",
    ReportingDate: "2023-05-30", //วันที่รายงานตัว
    BMAOfficer: true,
    Status: "ขอผ่อนผัน",
    checkList: null,
    address:
      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
    university: "มหาวิทยาลัยบูรพา",
    degree: "การศึกษาบัณฑิต",
    major: "เทคโนโลยีการศึกษา",
    remark: "-",
    number: 3,
    examCount: 5,
    scoreResult: {
      scoreAFull: 200,
      scoreA: 133,
      scoreBFull: 200,
      scoreB: 149,
      scoreCFull: 100,
      scoreC: 0,
      scoreSumFull: 500,
      scoreSum: 282,
      examResult: "ผ่าน",
    },
  },
]);

const itemtest = ref<object>({});

const clickCancel = async () => {
  editvisible.value = false;
};

const openAppointModal = (value: any) => {
  appointModal.value = true;
  editRow.value = true;
};

const clickClose = async () => {
  if (editRow.value == true) {
    $q.dialog({
      title: `ข้อมูลมีการแก้ไข`,
      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
      cancel: "ยกเลิก",
      ok: "ยืนยัน",
      persistent: true,
    }).onOk(async () => {
      modal_right.value = false;
      modalwaitInfo.value = false;
      modal.value = false;
      appointModal.value = false;
    });
  } else {
    modal_right.value = false;
    modalwaitInfo.value = false;
    modal.value = false;
    appointModal.value = false;
  }
};

const save = () => {
  console.log("rows===>", rows.value);
};
</script>
<template>
  <q-form ref="myForm">
    <Table
      :rows="rows"
      :columns="columns"
      :filter="filter"
      :visible-columns="visibleColumns"
      v-model:inputfilter="filter"
      v-model:inputvisible="visibleColumns"
      v-model:editvisible="editvisible"
      :cancel="clickCancel"
      :history="true"
      :boss="true"
      :saveNoDraft="true"
      :add="save"
    >
      <template #columns="props">
        <q-tr :props="props">
          <q-icon
            class="q-mr-sm"
            size="15px"
            color="primary"
            name="mdi-bookmark"
            v-if="props.row.isDirector"
          ></q-icon>

          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            @click="selectData(props.row)"
            class="cursor-pointer"
          >
            <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
              <div>
                <q-icon
                  v-if="col.value == false"
                  name="mdi-close"
                  color="grey-5"
                  class="text-h5"
                />
                <q-icon
                  v-else
                  name="mdi-check"
                  color="positive"
                  class="text-h5"
                />
              </div>
            </div>
            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
              {{ col.value }}
              <p>{{ props.row.fullName }}</p>
            </div>
            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                <div @click="openAppointModal">
                  <q-input
                    hide-bottom-space
                    outlined
                    dense
                    lazy-rules
                    v-model="props.row.Unit"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="mdi-bookmark-plus-outline"
                        color="primary"
                      />
                    </template>
                  </q-input>
                </div>
              </div>
              <div
                v-else-if="
                  props.row.Status == 'ยังไม่บรรจุ' ||
                  props.row.Status == 'สละสิทธิ์'
                "
              >
                -
              </div>
              <div v-else>
                {{ props.row.examResult }}
                <p>{{ col.value }}</p>
              </div>
            </div>
            <div
              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
              class="table_ellipsis"
            >
              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
                <datepicker
                  :locale="'th'"
                  autoApply
                  :enableTimePicker="false"
                  week-start="0"
                  v-model="props.row.ReportingDate"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      hide-bottom-space
                      outlined
                      dense
                      lazy-rules
                      :model-value="mixin.date2Thai(col.value)"
                    >
                      <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
                v-else-if="
                  props.row.Status == 'ยังไม่บรรจุ' ||
                  props.row.Status == 'สละสิทธิ์'
                "
              >
                -
              </div>
              <div v-else>
                {{ mixin.date2Thai(col.value) }}
              </div>
            </div>
            <div v-else class="table_ellipsis">
              {{ col.value }}
            </div>
          </q-td>
          <!-- btn if else -->
          <q-td auto-width>
            <div
              v-if="
                props.row.Status === 'บรรจุเเล้ว' ||
                props.row.Status === 'สละสิทธิ์'
              "
            >
              <div></div>
            </div>
            <div v-else-if="props.row.Status === 'ขอผ่อนผัน'">
              <q-btn
                color="blue"
                flat
                dense
                round
                size="14px"
                icon="mdi-information-outline"
                @click="editDetail(props.row, 'waitInfo')"
              />
              <q-btn
                color="red"
                flat
                dense
                round
                size="14px"
                icon="mdi-account-remove"
                @click="editDetail(props.row, 'cancel')"
              />
            </div>
            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
              <q-btn
                color="blue"
                flat
                dense
                round
                size="14px"
                :icon="isNewModel ? 'mdi-information-outline' : 'mdi-account-alert'" 
                @click="editDetail(props.row, 'wait',props.row.position)"
              />
              <q-btn
                color="red"
                flat
                dense
                round
                size="14px"
                icon="mdi-account-remove"
                @click="editDetail(props.row, 'cancel')"
              />
            </div>
            <div v-else align="right">
              <q-btn
                color="red"
                flat
                dense
                round
                size="14px"
                icon="mdi-account-remove"
                @click="editDetail(props.row, 'cancel')"
              />
            </div>
          </q-td>
        </q-tr>
      </template>
    </Table>
  </q-form>

  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />

  <q-dialog v-model="appointModal" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-xs">
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.Code"
                label="รหัสส่วนราชการ"
              />
            </div>
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.UnitName"
                label="ชื่อหน่วยงาน"
              />
            </div>
          </div>

          <div class="row q-col-gutter-xs q-pt-xs">
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.PositionNo"
                label="ตำแหน่งเลขที่"
              />
            </div>
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.PositionType"
                label="ประเภทตำแหน่ง"
              />
            </div>
          </div>

          <div class="row q-col-gutter-xs q-pt-xs">
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.PositionManage"
                label="ตำแหน่งทางการบริหาร"
              />
            </div>
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.PositionTypeManage"
                label="ด้านทางบริหาร"
              />
            </div>
          </div>

          <div class="row q-col-gutter-xs q-pt-xs">
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.PositionLine"
                label="ตำแหน่งในสายงาน"
              />
            </div>
            <div class="col">
              <q-select
                outlined
                dense
                v-model="appoint.Major"
                label="ด้าน/สาขา"
              />
            </div>
          </div>

          <div class="row q-col-gutter-xs q-pt-xs">
            <div class="col-6">
              <q-select
                outlined
                dense
                v-model="appoint.PositionLevel"
                label="ระดับตำแหน่ง"
              />
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <DialogFooter
          v-model:editvisible="edit"
          v-model:modalEdit="modalEdit"
          :save="saveAppoint"
        />
      </q-form>
    </q-card>
  </q-dialog>
<!-- ปุ่มขวาตาราง -->
  <q-dialog v-model="modal_right" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
        <DialogHeader
          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input
              :class="getClass(edit)"
              hide-bottom-space
              :outlined="edit"
              dense
              lazy-rules
              :readonly="!edit"
              :borderless="!edit"
              v-model="positionMasterUserNote"
              :label="`${'กรอกเหตุผล'}`"
              @update:modelValue="clickEditRow"
              type="textarea"
            />
            <q-file
              v-if="getNumFile == 1"
              v-model="files"
              dense
              :label="'เลือกไฟล์เอกสารหลักฐาน'"
              outlined
              use-chips
              multiple
              class="q-py-sm"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
            </q-file>
            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          v-model:editvisible="edit"
          v-model:modalEdit="modalEdit"
          :save="modalEdit ? savePostpone : saveDisclaim"
        />
      </q-form>
    </q-card>
  </q-dialog>
<!-- btn แสดงรายละเอียด -->
  <q-dialog v-model="modalwaitInfo" persistent>
    <q-card style="width: 500px; max-width: 500px">
      <q-form ref="myForm">
        <DialogHeader
          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row">
            <div class="col-3 text-grey-7">กรอกเหตุผล</div>
            <div class="col-4">กรอกเหตุผล</div>
          </div>
          <div class="row q-pt-md">
            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
            <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
            <q-btn
              color="primary"
              flat
              dense
              round
              size="14px"
              icon="mdi-download"
            />
          </div>
        </q-card-section>
        <q-separator />
      </q-form>
    </q-card>
  </q-dialog>

</template>

<style lang="scss" scoped>
.q-table p {
  margin-bottom: 0;
  color: #818181;
}
</style>
