div
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
import type { ResponseOrganiz } from "@/modules/05_placement/interface/response/Order";
import type { complaintLists } from "@/modules/10_order/interface/response/Order";
import type { QTableProps } from "quasar";
import type {
  DataOption1,
  OrederResult,
} from "@/modules/10_order/interface/index/Main";

import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import { useOrderPlacementDataStore } from "@/modules/10_order/store";

const DataStore = useOrderPlacementDataStore();
const mixin = useCounterMixin();
const {
  date2Thai,
  messageError,
  showLoader,
  hideLoader,
  success,
  dialogConfirm,
  dialogMessageNotify,
} = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const router = useRouter();

const orderId = route.params.orderid;
const orderId_paramsName = route.name;

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();

const myForm = ref<QForm>();
//option
const typeOrderOption = ref<DataOption1[]>([]);
const byOrderOption = ref<DataOption1[]>([]);
const CommandOption = ref<DataOption1[]>([]);

//Main
const typeOrder = ref<any>();
const nameOrder = ref<string>("");
const command = ref<number | "">();
const dateYear = ref<number | null>(null);
const dateCommand = ref<Date | null>(null);
const byOrder = ref<string>("");
const nameCommand = ref<any>([]);
const positionCommand = ref<string>("");

//form  C-PM-01 - 04
const examRound = ref<string>("");
const examRoundOption = ref<DataOption1[]>([]);
const conclusionRegisterNo = ref<string>("");
const conclusionRegisterDate = ref<Date | null>(null);
const conclusionResultNo = ref<string>("");
const conclusionResultDate = ref<Date | null>(null);
// C-PM-05 - 06
const meeting = ref<string>("");
const dateMeeting = ref<Date | null>(null);
//  C-PM-08
const conclusionReturnNo = ref<string>("");
const conclusionReturnDate = ref<Date | null>(null);
// C-PM-09
const organizations = ref<string>("");
const order = ref<string>("");
const orderDate = ref<Date | null>(null);
const book = ref<string>("");
const bookDate = ref<Date | null>(null);
// C-PM-10
const dialogVisible = ref<boolean>(false);
const organizationsOld = ref<string>("");
const orderOld = ref<string>("");
const orderOldDate = ref<Date | null>(null);
const locationname = ref<string>("");
const experimentOc = ref<string>("");
const experimentformDate = ref<Date | null>(null);
const experimenttoDate = ref<Date | null>(null);
const chairman = ref<string>("");
const director = ref<string>("");
const director2 = ref<string>("");

// C-PM-11-12
const committeeOc = ref<string>("");
const committeeOrder = ref<string>("");
const committeeDate = ref<Date | null>(null);
// C-PM-13
const receiveOc = ref<string>("");
// C-PM-14
const transferOrganizationName = ref<string>("");
const conclusionReceive = ref<string>("");
const conclusionReceiveDate = ref<Date | null>(null);
// C-PM-16
const orderNumber = ref<string>();
const orderNumberDate = ref<Date | null>(null);
const fault = ref<string>("");
const guiltyBasis = ref<string>("");
const conclusionFireNo = ref<string>("");
const conclusionFireDate = ref<Date | null>(null);
const conclusionFireResolution = ref<string>("");
// C-PM-24
const conclusionTranferNo = ref<string>("");
const conclusionTranferDate = ref<Date | null>(null);

// C-PM-25-32
const faultLevel = ref<string>("");
const caseFault = ref<string>("");
const result = ref<string>("");
const refRaw = ref<string>("");
const complaintId = ref<string>("");

const typeOrderFilter = ref<any>({
  typeOrderOption: [],
});

onMounted(async () => {
  if (orderId) {
    await fecthTypeOption("hasData");
  } else {
    await fecthTypeOption("noData");
  }
});
// เลือกคำสั่งโดย
watch(byOrder, async () => {
  await http
    .get(config.API.approverOC(byOrder.value))
    .then((res) => {
      CommandOption.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
});
//เลือกผู้ลงนาม
watch(nameCommand, async () => {
  if (positionCommand.value === "" || positionCommand.value === undefined) {
    positionCommand.value = nameCommand.value.positionName;
  }
});

const commandCodes = ref<string[]>([
  "C-PM-19",
  "C-PM-20",
  "C-PM-25",
  "C-PM-26",
  "C-PM-27",
  "C-PM-28",
  "C-PM-29",
  "C-PM-30",
  "C-PM-31",
  "C-PM-32",
]);
// เรียกคำสั่ง
const fecthTypeOption = async (actions: string) => {
  showLoader();
  await http
    .get(config.API.typeOrder())
    .then((res) => {
      const response = res.data.result;

      const filterRes = response.filter((e: any) =>
        commandCodes.value.includes(e.commandCode)
      );

      const data =
        orderId_paramsName === "OrderDetail" ||
        orderId_paramsName === "OrderAdd"
          ? response
          : filterRes;

      typeOrderOption.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        // fullname: e.commandCode + "   " + e.name,
        fullname: e.name,
      }));
      typeOrderFilter.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        // fullname: e.commandCode + "   " + e.name,
        fullname: e.name,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fecthCommand();
      if (actions == "hasData") {
        await fetchdetailOrder(); // เมื่อแก้ไขจะเรียกข้อมูลรายละเอียด
      }
      hideLoader();
    });
};
// เรียกรายละเอียดของคำสั่ง
const fetchdetailOrder = async () => {
  let orderIdString = orderId.toString();
  await http
    .get(config.API.detailOrder(orderIdString))
    .then(async (res: any) => {
      const data = res.data.result;

      const orderTypeCode = await data.orderTypeCode.toUpperCase();
      DataStore.typeOrder = orderTypeCode;
      await optionsData(orderTypeCode);

      typeOrder.value = typeOrderOption.value.find(
        (e) => e.id === data.orderTypeValue
      );
      nameOrder.value = data.orderTitle;
      command.value = data.orderNo;
      dateYear.value = Number(data.orderYear);
      dateCommand.value = data.orderDate;
      byOrder.value = data.orderBy;
      nameCommand.value = data.signatoryBy;
      positionCommand.value = data.signatoryPosition;
      examRound.value = data.examRound;
      conclusionRegisterNo.value = data.conclusionRegisterNo;
      conclusionRegisterDate.value = data.conclusionRegisterDate;
      conclusionResultNo.value = data.conclusionResultNo;
      conclusionResultDate.value = data.conclusionResultDate;
      // 05 -06
      meeting.value = data.conclusionMeetingNo;
      dateMeeting.value = data.conclusionMeetingDate;
      // 08
      conclusionReturnNo.value = data.conclusionReturnNo;
      conclusionReturnDate.value = data.conclusionReturnDate;
      //09
      organizations.value = data.sourceOrganizationName;
      order.value = data.conclusionReturnNo;
      orderDate.value = data.conclusionReturnDate;
      book.value = data.militaryCommandNo;
      bookDate.value = data.militaryCommanDate;
      //10
      if (data.orderTypeCode === "c-pm-10") {
        nodeTree();
      }
      organizationsOld.value = data.placementCommandIssuer;
      orderOld.value = data.placementCommandNo;
      orderOldDate.value = data.placementCommandDate;
      locationname.value = data.placementPositionName;
      experimentOc.value = data.placementOrganizationName;
      experimentformDate.value = data.probationStartDate;
      experimenttoDate.value = data.probationEndDate;
      chairman.value = data.chairManFullName;
      director.value = data.member1FullName;
      director2.value = data.member2FullName;
      //11-12
      committeeOc.value = data.placementCommandIssuer;
      committeeOrder.value = data.placementCommandNo;
      committeeDate.value = data.placementCommandDate;
      //13
      receiveOc.value = data.receiveOrganizationName;
      //14
      transferOrganizationName.value = data.transferOrganizationName;
      conclusionReceive.value = data.conclusionReceiveNo;
      conclusionReceiveDate.value = data.conclusionReceiveDate;
      //16
      orderNumber.value = data.govAidCommandNo;
      orderNumberDate.value = data.govAidCommandDate;
      //18-20
      fault.value = data.fault;
      guiltyBasis.value = data.guiltyBasis;
      conclusionFireNo.value = data.conclusionFireNo;
      conclusionFireDate.value = data.conclusionFireDate;
      conclusionFireResolution.value = data.conclusionFireResolution;
      // 24
      conclusionTranferNo.value = data.conclusionTranferNo;
      conclusionTranferDate.value = data.conclusionTranferDate;

      // 19, 20 และ 25-32
      faultLevel.value = data.faultLevel;
      caseFault.value = data.caseFault;
      result.value = data.result;
      refRaw.value = data.refRaw;
      complaintId.value = data.complaintId;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      // await fecthCommand();
      hideLoader();
    });
};

const fecthCommand = async () => {
  await http
    .get(config.API.organizationsOrder())
    .then((res) => {
      byOrderOption.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

const optionsData = async (commandCode: string) => {
  const orderTypeCode = await commandCode.toUpperCase();
  if (orderTypeCode === "C-PM-10") {
    nodeTree();
  }
  nameOrder.value = DataStore.nameOrderFilter(orderTypeCode);

  // บรรจุ แต่งตั้ง ย้าย 01 - 04
  if (
    orderTypeCode == "C-PM-01" ||
    orderTypeCode == "C-PM-02" ||
    orderTypeCode == "C-PM-03" ||
    orderTypeCode == "C-PM-04" ||
    orderTypeCode == "C-PM-39"
  ) {
    fecthExamRoundOption(orderTypeCode);
  }

  // คำสั่งวินัย
  if (
    route.name == "disciplineOrderDatail" ||
    route.name == "disciplineOrderAdd"
  ) {
    await getComplaint();
  }

  // console.log(DataStore.complaintLists)
  DataStore.complaintOption = [];
  if (orderTypeCode == "C-PM-25" || orderTypeCode == "C-PM-26") {
    await DataStore.complaintLists
      .filter((x: complaintLists) => x.isDisciplinary === true)
      .map((val: complaintLists) => {
        DataStore.complaintOption.push({ id: val.id, name: val.title });
      });
  } else if (orderTypeCode == "C-PM-32") {
    await DataStore.complaintLists
      .filter(
        (x: complaintLists) =>
          x.isInvestigate === true ||
          x.isDisciplinary === true ||
          x.isResult === true
      )
      .map((val: complaintLists) => {
        DataStore.complaintOption.push({ id: val.id, name: val.title });
      });
  } else if (
    orderTypeCode == "C-PM-19" ||
    orderTypeCode == "C-PM-20" ||
    orderTypeCode == "C-PM-27" ||
    orderTypeCode == "C-PM-28" ||
    orderTypeCode == "C-PM-29" ||
    orderTypeCode == "C-PM-30" ||
    orderTypeCode == "C-PM-31"
  ) {
    await DataStore.complaintLists
      .filter((x: complaintLists) => x.isResult === true)
      .map((val: complaintLists) => {
        DataStore.complaintOption.push({ id: val.id, name: val.title });
      });
  }
};

const selectCMP = async (selectOrder: OrederResult) => {
  if (selectOrder != null) {
    const orderTypeCode = await selectOrder.commandCode.toUpperCase();
    DataStore.typeOrder = orderTypeCode;
    optionsData(orderTypeCode);
  }
  //01-04
  examRound.value = "";
  conclusionRegisterNo.value = "";
  conclusionRegisterDate.value = null;
  conclusionResultNo.value = "";
  conclusionResultDate.value = null;
  // 05-06
  meeting.value = "";
  dateMeeting.value = null;
  //08
  conclusionReceive.value = "";
  conclusionReceiveDate.value = null;
  //09
  organizations.value = "";
  order.value = "";
  orderDate.value = null;
  book.value = "";
  bookDate.value = null;
  //10
  organizationsOld.value, (orderOld.value = "");
  orderOldDate.value = null;
  locationname.value = "";
  experimentOc.value = "";
  experimentformDate.value = null;
  experimenttoDate.value = null;
  chairman.value = "";
  director.value = "";
  director2.value = "";
  //11-12
  committeeOc.value = "";
  committeeOrder.value = "";
  committeeDate.value = null;
  //13
  receiveOc.value = "";
  //14
  transferOrganizationName.value = "";
  conclusionReceive.value = "";
  conclusionReceiveDate.value = null;
  //16
  orderNumber.value = "";
  orderNumberDate.value = null;
  //18-20
  fault.value = "";
  guiltyBasis.value = "";
  conclusionFireNo.value = "";
  conclusionFireDate.value = null;
  conclusionFireResolution.value = "";
  // 24
  conclusionTranferNo.value = "";
  conclusionTranferDate.value = null;
  // 19, 20 & 25-32
  faultLevel.value = "";
  caseFault.value = "";
  result.value = "";
  refRaw.value = "";

  complaintId.value = "";
};

// เรียกรอบการสอบ
const fecthExamRoundOption = async (commandCode: string) => {
  await http
    .get(config.API.examroundOrder(commandCode))
    .then((res) => {
      examRoundOption.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

/**
 * ดึงรายการเรื่องร้องเรียนจาก API
 */
async function getComplaint() {
  await http
    .get(config.API.disciplineReportList)
    .then((res: any) => {
      const dataArr = res.data.result;
      DataStore.complaintLists = dataArr;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

// บันทึกข้อมูล
const onSubmit = async () => {
  let signBy = null;
  // หาคนออกคำสั่ง
  if (!nameCommand.value.length) {
    signBy = await nameCommand.value.name;
  } else if (nameCommand.value !== "") {
    signBy = await nameCommand.value;
  } else {
    const name2 = await CommandOption.value.find(
      (x: any) => x.name == nameCommand.value
    );
    signBy = await name2?.name;
  }

  const orderByOrganizationName = await byOrderOption.value.find(
    (x: any) => x.id == byOrder.value
  )?.name;

  const formdata = {
    orderTypeValue: typeOrder.value.id,
    orderTitle: nameOrder.value,
    orderNo:
      command.value == undefined || command.value == "" ? "" : command.value,
    orderYear: dateYear.value,
    orderDate: dateCommand.value,
    orderBy: byOrder.value,
    orderByOrganizationName: orderByOrganizationName,
    registerPosition: "",
    signatoryBy: signBy === "" ? nameCommand.value : signBy,
    signatoryPosition: positionCommand.value,
  };
  if (
    typeOrder.value.commandCode == "C-PM-01" ||
    typeOrder.value.commandCode == "C-PM-02" ||
    typeOrder.value.commandCode == "C-PM-03" ||
    typeOrder.value.commandCode == "C-PM-04" ||
    typeOrder.value.commandCode == "C-PM-39"
  ) {
    Object.assign(formdata, {
      examRound: examRound.value,
      conclusionRegisterNo: conclusionRegisterNo.value,
      conclusionRegisterDate: conclusionRegisterDate.value,
      conclusionResultNo: conclusionResultNo.value.toString(),
      conclusionResultDate: conclusionResultDate.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-05" ||
    typeOrder.value.commandCode == "C-PM-06"
  ) {
    Object.assign(formdata, {
      conclusionMeetingNo: meeting.value,
      conclusionMeetingDate: dateMeeting.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-08") {
    Object.assign(formdata, {
      conclusionReturnNo: conclusionReturnNo.value,
      conclusionReturnDate: conclusionReturnDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-09") {
    Object.assign(formdata, {
      sourceOrganizationName: organizations.value,
      conclusionReturnNo: order.value,
      conclusionReturnDate: orderDate.value,
      militaryCommandNo: book.value,
      militaryCommandDate: bookDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-10") {
    Object.assign(formdata, {
      placementCommandIssuer: organizationsOld.value,
      placementCommandNo: orderOld.value,
      placementCommandDate: orderOldDate.value,
      placementPositionName: locationname.value,
      placementOrganizationName: experimentOc.value,
      probationStartDate: experimentformDate.value,
      probationEndDate: experimenttoDate.value,
      chairManFullName: chairman.value,
      member1FullName: director.value,
      member2FullName: director2.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-11" ||
    typeOrder.value.commandCode == "C-PM-12"
  ) {
    Object.assign(formdata, {
      placementCommandIssuer: committeeOc.value,
      placementCommandNo: committeeOrder.value,
      placementCommandDate: committeeDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-13") {
    Object.assign(formdata, {
      receiveOrganizationName: receiveOc.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-14") {
    Object.assign(formdata, {
      transferOrganizationName: transferOrganizationName.value,
      conclusionReceiveNo: conclusionReceive.value,
      conclusionReceiveDate: conclusionReceiveDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-16") {
    Object.assign(formdata, {
      govAidCommandNo: orderNumber.value,
      govAidCommandDate: orderNumberDate.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-18") {
    Object.assign(formdata, {
      fault: fault.value,
      guiltyBasis: guiltyBasis.value,
      conclusionFireNo: conclusionFireNo.value,
      conclusionFireDate: conclusionFireDate.value,
      conclusionFireResolution: conclusionFireResolution.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-19" ||
    typeOrder.value.commandCode == "C-PM-20"
  ) {
    Object.assign(formdata, {
      complaintId: complaintId.value,
      fault: "-",
      guiltyBasis: "-",
      conclusionFireNo: conclusionFireNo.value,
      conclusionFireDate: conclusionFireDate.value,
      conclusionFireResolution: conclusionFireResolution.value,
      faultLevel: faultLevel.value,
      caseFault: caseFault.value,
      result: result.value,
      refRaw: refRaw.value,
    });
  } else if (typeOrder.value.commandCode == "C-PM-24") {
    Object.assign(formdata, {
      conclusionTranferNo: conclusionTranferNo.value,
      conclusionTranferDate: conclusionTranferDate.value,
    });
  } else if (
    typeOrder.value.commandCode == "C-PM-25" ||
    typeOrder.value.commandCode == "C-PM-26" ||
    typeOrder.value.commandCode == "C-PM-27" ||
    typeOrder.value.commandCode == "C-PM-28" ||
    typeOrder.value.commandCode == "C-PM-29" ||
    typeOrder.value.commandCode == "C-PM-30" ||
    typeOrder.value.commandCode == "C-PM-31" ||
    typeOrder.value.commandCode == "C-PM-32"
  ) {
    Object.assign(formdata, {
      complaintId: complaintId.value,
      faultLevel: faultLevel.value,
      caseFault: caseFault.value,
      result: result.value,
      refRaw: refRaw.value,
    });
  }

  // เช็คค่าว่าง
  // await myForm.value!.validate().then((result: boolean) => {
  //   if (result) {
  dialogConfirm($q, () => {
    // ถ้ามี orderId ให้ อัพเดท ไม่มีให้สร้าง
    if (!orderId) {
      createListOrder(formdata, typeOrder.value.commandCode);
    } else {
      let orderIdString = orderId.toString();
      updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
    }
  });
  //   }
  // });
};

// สร้างคำสัง
const createListOrder = async (formData: Object, type: string) => {
  showLoader();
  await http
    .post(config.API.orderCPM(type), formData)
    .then(async (res) => {
      const data = res.data.result;
      localStorage.setItem("orderId", data.id);

      if (
        route.name == "disciplineOrderDatail" ||
        route.name == "disciplineOrderAdd"
      ) {
        router.push(`/discipline-order/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2
      } else {
        router.push(`/order/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2
      }
      if (DataStore.typeOrder === "C-PM-38") {
        await next();
        await next();
      } else {
        next();
      }

      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const updateOrder = async (formData: Object, orderId: string, type: string) => {
  showLoader();
  await http
    .put(config.API.orderCPMUpdate(type, orderId), formData)
    .then(() => {
      if (DataStore.typeOrder === "C-PM-38") {
        next();
        next();
      } else {
        next();
      }
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
// dialog 10
const search = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const selectedModal = ref<ResponseOrganiz[]>([]);
const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
const columnsModal = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    field: "no",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "idCard",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "idCard",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    field: "name",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    field: "position",
    sortable: true,
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const rowsModal = ref<ResponseOrganiz[]>([]);
const clickAction = ref<string>("");
const filterModal = ref<string>("");
// โหลด tree
const nodeTree = async () => {
  showLoader();
  await http
    .get(config.API.profileOrganizRoot)
    .then((res) => {
      const data = res.data.result;
      nodesTree.value = data;
      if (data.length > 0) {
        expanded.value = [data[0].id];
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
// เลือกหน่วยงาน
const onSelected = async (id: string) => {
  await listModal(id);
};
// เรียกรายชื่อกรรมการ
const listModal = async (id: string) => {
  showLoader();
  await http
    .get(config.API.copyOrderPersonsId(id))
    .then((res) => {
      const data = res.data.result;
      let list: ResponseOrganiz[] = [];
      data.map((r: ResponseOrganiz) => {
        list.push({
          firstName: r.firstName ?? "",
          idCard: r.idCard ?? "",
          lastName: r.lastName ?? "",
          name: r.name ?? "",
          position: r.position ?? "",
          prefixId: r.prefixId ?? "",
          profileId: r.profileId ?? "",
          unit: r.unit ?? "",
        });
      });
      rowsModal.value = list;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
};
// เปิด POPUP เลือกรายชื่อตามหน่วยงาน
const openDialog = (action: string) => {
  dialogVisible.value = true;
  clickAction.value = action;
  selectedModal.value = [];
};
// บันทักรายชื่อกรรมการ
const clickSavelist = () => {
  if (selectedModal.value.length > 0) {
    if (clickAction.value === "chairman") {
      chairman.value = selectedModal.value[0].name;
    } else if (clickAction.value === "director") {
      director.value = selectedModal.value[0].name;
    } else if (clickAction.value === "director2") {
      director2.value = selectedModal.value[0].name;
    }
    dialogVisible.value = false;
  } else dialogMessageNotify($q, "โปรดเลือกรายชื่อ");
};

const filterSelector = (val: any, update: Function, fullname: any) => {
  update(() => {
    typeOrderOption.value = typeOrderFilter.value.filter(
      (v: any) => v.fullname.toLowerCase().indexOf(val.toLowerCase()) > -1
    );
  });
};

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<template>
  <q-card>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section>
        <!-- Main -->
        <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
          <div class="col-xs-12 col-md-6">
            <q-select
              :class="getClass(true)"
              outlined
              dense
              v-model="typeOrder"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
              hide-bottom-space
              :label="`${'ประเภทคำสั่ง'}`"
              map-options
              option-label="fullname"
              :options="typeOrderOption"
              option-value="id"
              use-input
              input-debounce="0"
              @update:model-value="selectCMP(typeOrder)"
              @filter="(inputValue:any,
                            doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
                            ) "
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="nameOrder"
              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
              :label="`${'คำสั่งเรื่อง'}`"
              hide-bottom-space
            />
          </div>
          <div class="row col-xs-7 col-md-3">
            <div class="col-6">
              <q-input
                :class="getClass(true)"
                outlined
                dense
                v-model="command"
                hide-bottom-space
                :label="`${'คำสั่งเลขที่'}`"
              />
            </div>
            <label class="col-1 flex justify-center items-center text-bold"
              >/</label
            >
            <div class="col-5">
              <datepicker
                v-model="dateYear"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    :class="getClass(true)"
                    :model-value="dateYear !== null ? dateYear + 543 : null"
                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                    :label="`${'พ.ศ.'}`"
                    dense
                    hide-bottom-space
                    outlined
                  >
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
          <div class="col-xs-5 col-md-3">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateCommand"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  hide-bottom-space
                  class="full-width datepicker"
                  :model-value="
                    dateCommand != null ? date2Thai(dateCommand) : null
                  "
                  :label="`${'วันที่คำสั่งมีผล'}`"
                  :rules="[(val) => !!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-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              v-model="byOrder"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
              emit-value
              hide-bottom-space
              :label="`${'คำสั่งโดย'}`"
              map-options
              option-label="name"
              :options="byOrderOption"
              option-value="id"
              use-input
              input-debounce="0"
              @update:model-value="(nameCommand = ''), (positionCommand = '')"
            />
          </div>
          <div
            class="col-xs-12 col-md-6"
            v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
          >
            <selector
              :class="getClass(true)"
              outlined
              dense
              v-model="nameCommand"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
              hide-bottom-space
              :label="`${'ผู้มีอำนาจลงนาม'}`"
              map-options
              option-label="name"
              :options="CommandOption"
              option-value="id"
              use-input
              input-debounce="0"
            >
              <template v-if="CommandOption.length === 0" v-slot:no-option>
                <q-item>
                  <q-item-section class="text-primary">
                    กรุณาเลือกคำสั่งโดยก่อน
                  </q-item-section>
                </q-item>
              </template>
            </selector>
          </div>
          <div
            class="col-xs-12 col-md-6"
            v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
          >
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="positionCommand"
              :rules="[
                (val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
              ]"
              :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
              hide-bottom-space
              disable
            />
          </div>
          <div
            class="col-xs-12 col-md-6"
            v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
          >
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="nameCommand"
              :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
              :label="`${'ผู้มีอำนาจลงนาม'}`"
              hide-bottom-space
            />
          </div>
          <div
            class="col-xs-12 col-md-6"
            v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
          >
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="positionCommand"
              :rules="[
                (val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`,
              ]"
              :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
              hide-bottom-space
            />
          </div>
          <div
            class="col-12 q-mb-md"
            v-if="typeOrder != null && typeOrder.commandCode"
          >
            <q-separator />
          </div>
        </div>

        <!-- C-PM-01-04 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder != null &&
            (typeOrder.commandCode === 'C-PM-01' ||
              typeOrder.commandCode === 'C-PM-02' ||
              typeOrder.commandCode === 'C-PM-03' ||
              typeOrder.commandCode === 'C-PM-04' ||
              typeOrder.commandCode === 'C-PM-39')
          "
        >
          <div class="col-xs-12 col-md-12">
            <selector
              :class="getClass(true)"
              outlined
              dense
              v-model="examRound"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
              hide-bottom-space
              :label="`${'รอบการสอบ'}`"
              emit-value
              map-options
              option-label="examRoundName"
              :options="examRoundOption"
              option-value="examRoundValue"
              use-input
              input-debounce="0"
            />
          </div>

          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionRegisterNo"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบ ฯ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบ ฯ)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionRegisterDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionRegisterDate != null
                      ? date2Thai(conclusionRegisterDate)
                      : null
                  "
                  :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบ ฯ)'}`"
                  :rules="[
                    (val) =>
                      !!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-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionResultNo"
              :rules="[
                (val) =>
                  !!val || `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง ผลการสอบฯ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบ ฯ)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionResultDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionResultDate != null
                      ? date2Thai(conclusionResultDate)
                      : null
                  "
                  :label="`${'ลงวันที่ (เรื่อง ผลการสอบ ฯ)'}`"
                  :rules="[
                    (val) =>
                      !!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>

        <!-- C-PM-05-06 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder != null &&
            (typeOrder.commandCode === 'C-PM-05' ||
              typeOrder.commandCode === 'C-PM-06')
          "
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="meeting"
              :rules="[(val) => !!val || `${'กรุณากรอกการประชุม ครั้งที่'}`]"
              :label="`${'การประชุม ครั้งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateMeeting"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    dateMeeting != null ? date2Thai(dateMeeting) : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-08 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-08'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionReturnNo"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกมติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`,
              ]"
              :label="`${'มติ กก. ครั้งที่ (เรื่อง กลับเข้าราชการ)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionReturnDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionReturnDate != null
                      ? date2Thai(conclusionReturnDate)
                      : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-09 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-09'"
        >
          <div class="col-xs-12 col-md-12">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="organizations"
              :rules="[(val) => !!val || `${'กรุณากกรอกหน่วยงาน'}`]"
              :label="`${'หน่วยงาน'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="order"
              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่'}`]"
              :label="`${'คำสั่งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="orderDate != null ? date2Thai(orderDate) : null"
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="book"
              :rules="[
                (val) => !!val || `${'กรุณากกรอกหนังสือสำนักงาน ก.พ. ที่ นร'}`,
              ]"
              :label="`${'หนังสือสำนักงาน ก.พ. ที่ นร'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="bookDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="bookDate != null ? date2Thai(bookDate) : null"
                  :label="`${'ลงวันที่'}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-10 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-10'"
        >
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="organizationsOld"
              :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงาน  (ต้นทาง)'}`]"
              :label="`${'ชื่อหน่วยงาน (ต้นทาง)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="orderOld"
              :rules="[(val) => !!val || `${'กรุณาเลือกคำสั่งที่ (ต้นทาง)'}`]"
              :label="`${'คำสั่งที่ (ต้นทาง)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderOldDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    orderOldDate != null ? date2Thai(orderOldDate) : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="locationname"
              :rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]"
              :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
              hide-bottom-space
            />
          </div>

          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="experimentOc"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกหน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`,
              ]"
              :label="`${'หน่วยงานที่ให้ทดลองปฏิบัติหน้าที่ราชการ'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-md-4"></div>

          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="experimentformDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    experimentformDate != null
                      ? date2Thai(experimentformDate)
                      : null
                  "
                  :label="`${'ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`"
                  :rules="[
                    (val) =>
                      !!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-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="experimenttoDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    experimenttoDate != null
                      ? date2Thai(experimenttoDate)
                      : null
                  "
                  :label="`${'ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`"
                  :rules="[
                    (val) =>
                      !!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-md-4"></div>

          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="chairman"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อประธาน'}`]"
              :label="`${'ประธาน'}`"
              hide-bottom-space
              @click="openDialog('chairman')"
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="director"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
              :label="`${'กรรมการ'}`"
              hide-bottom-space
              @click="openDialog('director')"
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="director2"
              :rules="[(val) => !!val || `${'กรุณากรอกชื่อกรรมการ'}`]"
              :label="`${'กรรมการ'}`"
              hide-bottom-space
              @click="openDialog('director2')"
            />
          </div>
        </div>

        <!-- C-PM-11 - 12 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder != null &&
            (typeOrder.commandCode === 'C-PM-11' ||
              typeOrder.commandCode === 'C-PM-12')
          "
        >
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="committeeOc"
              :rules="[
                (val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`,
              ]"
              :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="committeeOrder"
              :rules="[(val) => !!val || `${'กรุณากรอกอนุสนธิคำสั่งที่'}`]"
              :label="`${'อนุสนธิคำสั่งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="committeeDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    committeeDate != null ? date2Thai(committeeDate) : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-13 -->
        <div
          class="row col-6 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-13'"
        >
          <div class="col-xs-12 col-md-12">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="receiveOc"
              :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงาน'}`]"
              :label="`${'ชื่อหน่วยงาน'}`"
              hide-bottom-space
            />
          </div>
        </div>

        <!-- C-PM-14 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-14'"
        >
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="transferOrganizationName"
              :rules="[(val) => !!val || `${'กรุณากรอกส่วนราชการที่ให้โอน'}`]"
              :label="`${'ส่วนราชการที่ให้โอน'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionReceive"
              :rules="[(val) => !!val || `${'กรุณากรอกมติ กก. ครั้งที่'}`]"
              :label="`${'มติ กก. ครั้งที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionReceiveDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionReceiveDate != null
                      ? date2Thai(conclusionReceiveDate)
                      : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-16 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-16'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="orderNumber"
              :rules="[
                (val) => !!val || `${'กรุณากรอกคำสั่งให้ช่วยราชการเลขที่'}`,
              ]"
              :label="`${'คำสั่งให้ช่วยราชการเลขที่'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <datepicker
              menu-class-name="modalfix"
              v-model="orderNumberDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    orderNumberDate != null ? date2Thai(orderNumberDate) : null
                  "
                  :label="`${'ลงวันที่ '}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-18-20 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-18'"
        >
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="fault"
              :rules="[
                (val) => !!val || `${'กรุณากรอกรายละเอียดการกระทำความผิด'}`,
              ]"
              :label="`${'รายละเอียดการกระทำความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="guiltyBasis"
              :rules="[(val) => !!val || `${'กรุณากรอกฐานความผิด'}`]"
              :label="`${'ฐานความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionFireNo"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`,
              ]"
              :label="`${'ครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionFireDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionFireDate != null
                      ? date2Thai(conclusionFireDate)
                      : null
                  "
                  :label="`${'ลงวันที่ (เรื่องการดำเนินการทางวินัย) '}`"
                  :rules="[
                    (val) =>
                      !!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-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionFireResolution"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอก มติที่ประชุม(เรื่องการดำเนินการทางวินัย)'}`,
              ]"
              :label="`${'มติที่ประชุม (เรื่องการดำเนินการทางวินัย)'}`"
              hide-bottom-space
            />
          </div>
        </div>

        <!-- C-PM-18-19 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder != null &&
            (typeOrder.commandCode === 'C-PM-19' ||
              typeOrder.commandCode === 'C-PM-20')
          "
        >
          <div class="row col-12">
            <div class="col-xs-12 col-md-6">
              <selector
                :class="getClass(true)"
                outlined
                dense
                v-model="complaintId"
                :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
                emit-value
                hide-bottom-space
                :label="`${'เรื่องร้องเรียน'}`"
                map-options
                option-label="name"
                :options="DataStore.complaintOption"
                option-value="id"
                use-input
                input-debounce="0"
              />
            </div>
          </div>

          <div class="col-xs-12 col-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionFireNo"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอกครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`,
              ]"
              :label="`${'ครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-4">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionFireDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionFireDate != null
                      ? date2Thai(conclusionFireDate)
                      : null
                  "
                  :label="`${'ลงวันที่ (เรื่องการดำเนินการทางวินัย) '}`"
                  :rules="[
                    (val) =>
                      !!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-md-4">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionFireResolution"
              :rules="[
                (val) =>
                  !!val ||
                  `${'กรุณากรอก มติที่ประชุม(เรื่องการดำเนินการทางวินัย)'}`,
              ]"
              :label="`${'มติที่ประชุม (เรื่องการดำเนินการทางวินัย)'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="faultLevel"
              :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
              :label="`${'ระดับความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="caseFault"
              :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
              :label="`${'กรณีความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="result"
              :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
              :label="`${'ผลดำเนินการพิจารณา'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="refRaw"
              :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
              :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
              hide-bottom-space
            />
          </div>
        </div>

        <!-- C-PM-24 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-24'"
        >
          <div class="col-xs-12 col-md-3">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="conclusionTranferNo"
              :rules="[(val) => !!val || `${'กรุณากรอกครั่งที่'}`]"
              hide-bottom-space
              :label="`${'ครั้งที่'}`"
            />
          </div>

          <div class="col-xs-12 col-md-3">
            <datepicker
              menu-class-name="modalfix"
              v-model="conclusionTranferDate"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  :class="getClass(true)"
                  outlined
                  dense
                  class="full-width datepicker"
                  :model-value="
                    conclusionTranferDate != null
                      ? date2Thai(conclusionTranferDate)
                      : null
                  "
                  :label="`${'เมื่อวันที่'}`"
                  :rules="[(val) => !!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>

        <!-- C-PM-25 -32 -->
        <div
          class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
          v-if="
            typeOrder != null &&
            (typeOrder.commandCode === 'C-PM-25' ||
              typeOrder.commandCode === 'C-PM-26' ||
              typeOrder.commandCode === 'C-PM-27' ||
              typeOrder.commandCode === 'C-PM-28' ||
              typeOrder.commandCode === 'C-PM-29' ||
              typeOrder.commandCode === 'C-PM-30' ||
              typeOrder.commandCode === 'C-PM-31' ||
              typeOrder.commandCode === 'C-PM-32')
          "
        >
          <div class="col-xs-12 col-md-6">
            <selector
              :class="getClass(true)"
              outlined
              dense
              v-model="complaintId"
              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
              emit-value
              hide-bottom-space
              :label="`${'เรื่องร้องเรียน'}`"
              map-options
              option-label="name"
              :options="DataStore.complaintOption"
              option-value="id"
              use-input
              input-debounce="0"
            />
          </div>
          <div class="col-xs-12 col-md-6"></div>

          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="faultLevel"
              :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
              :label="`${'ระดับความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="caseFault"
              :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
              :label="`${'กรณีความผิด'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="result"
              :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
              :label="`${'ผลดำเนินการพิจารณา'}`"
              hide-bottom-space
            />
          </div>
          <div class="col-xs-12 col-md-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              v-model="refRaw"
              :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
              :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
              hide-bottom-space
            />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>

  <q-dialog v-model="dialogVisible">
    <q-card style="width: 900px; max-width: 80vw">
      <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" v-close-popup />
      <q-separator />
      <q-card-section class="q-pa-sm bg-grey-1">
        <div class="row col-12 q-col-gutter-sm">
          <div class="col-xs-12 col-sm-5 row">
            <q-card flat bordered class="fit q-pa-sm">
              <q-scroll-area visible style="height: 70vh">
                <q-input
                  outlined
                  dense
                  v-model="search"
                  placeholder="ค้นหา"
                  class="q-mb-sm"
                >
                  <template v-slot:append>
                    <q-icon name="mdi-magnify" />
                  </template>
                </q-input>
                <q-tree
                  :nodes="nodesTree"
                  dense
                  node-key="id"
                  :filter="search"
                  v-model:selected="selected"
                  v-model:expanded="expanded"
                  no-selection-unset
                  selected-color="primary"
                  @update:selected="onSelected"
                  default-expand-all
                />
              </q-scroll-area>
            </q-card>
          </div>
          <div class="col-xs-12 col-sm-7">
            <div class="col-12 row q-py-sm items-center">
              <q-space />
              <div class="items-center" style="display: flex">
                <q-input
                  standout
                  dense
                  v-model="filterModal"
                  ref="filterRef"
                  outlined
                  debounce="300"
                  placeholder="ค้นหา"
                  style="max-width: 200px"
                  class="q-ml-sm"
                >
                  <template v-slot:append>
                    <q-icon v-if="filterModal == ''" name="search" />
                    <q-icon
                      v-if="filterModal !== ''"
                      name="clear"
                      class="cursor-pointer"
                    />
                  </template>
                </q-input>
              </div>
            </div>
            <d-table
              :rows="rowsModal"
              :columns="columnsModal"
              :visible-columns="visibleColumnsModal"
              row-key="profileId"
              selection="single"
              v-model:selected="selectedModal"
              no-data-label="ไม่มีข้อมูล"
              :filter="filterModal"
            >
              <template v-slot:body-selection="scope">
                <q-checkbox
                  keep-color
                  color="primary"
                  dense
                  v-model="scope.selected"
                />
              </template>

              <template v-slot:body-cell="props">
                <q-td :props="props">
                  <div v-if="props.col.name == 'no'">
                    {{ props.rowIndex + 1 }}
                  </div>

                  <div v-else>
                    {{ props.value }}
                  </div>
                </q-td>
              </template>
            </d-table>
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          dense
          unelevated
          label="บันทึก"
          color="public"
          @click="clickSavelist"
          class="q-px-md"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style>
.q-field--with-bottom {
  padding-bottom: 0px;
}
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  .q-table thead tr:last-child th {
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>