<script setup lang="ts">
import { ref, reactive, onMounted } 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 type {
  treeTab,
  DataOption,
} from "@/modules/05_placement/interface/index/Main";
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";
import http from "@/plugins/http";
import config from "@/app.config";
const clickAction = ref<string>();
const ocId = ref<string>();
const posNoOptionsFilter = ref<DataOption[]>([]);
const selected = ref<string>("");
const posNoId = ref<string>();
const amount = ref<number | null>(null);
const search = ref<string>("");
const positionSalaryAmount = ref<number | null>(null);
const positionExecutiveId = ref<string>();
const positionLevelId = ref<string>();
const date = ref<Date>(new Date());
const expanded = ref<string[]>([]);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const positionLineId = ref<string>();
const positionId = ref<string>();
const edit = ref<boolean>(false);
const positionTypeId = ref<string>();
const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore();
const filter = ref<string>("");
const mouthSalaryAmount = ref<number | null>(null);
const { placementData } = store;
const positionPathSideId = ref<string>();
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 posNoOptions = ref<DataOption[]>([]);
const nodesTree = ref<treeTab[]>([]);
const salaryRef = ref<string>();
const positionMasterUserNote = ref<string>();
const refSelected = ref<DataOption | null>(null);
const $q = useQuasar(); // show dialog
const salaryClass = ref<string>();
const positionOptions = ref<DataOption[]>([]);
const positionLineOptions = ref<DataOption[]>([]);
const positionSideOptions = ref<DataOption[]>([]);
const positionTypeOptions = ref<DataOption[]>([]);
const positionLevelOptions = ref<DataOption[]>([]);
const positionExecutiveOptions = ref<DataOption[]>([]);
const positionExecutiveSideOptions = ref<DataOption[]>([]);
const positionOptionsFilter = ref<DataOption[]>([]);
const positionLineOptionsFilter = ref<DataOption[]>([]);
const positionSideOptionsFilter = ref<DataOption[]>([]);
const positionTypeOptionsFilter = ref<DataOption[]>([]);
const positionLevelOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
  mixin;
const files = ref<File[]>([]);

const fetchPosition = async () => {
  showLoader();
  await http
    .get(config.API.position)
    .then((res) => {
      const data = res.data.result;
      let optionpositionpaths: DataOption[] = [];
      data.positionPaths.map((r: any) => {
        optionpositionpaths.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionOptions.value = optionpositionpaths;
      positionOptionsFilter.value = optionpositionpaths;

      let optionPositionPathSides: DataOption[] = [];
      data.positionPathSides.map((r: any) => {
        optionPositionPathSides.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionSideOptions.value = optionPositionPathSides;
      positionSideOptionsFilter.value = optionPositionPathSides;

      let optionPositionTypes: DataOption[] = [];
      data.positionTypes.map((r: any) => {
        optionPositionTypes.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionTypeOptions.value = optionPositionTypes;
      positionTypeOptionsFilter.value = optionPositionTypes;

      let optionPositionLines: DataOption[] = [];
      data.positionLines.map((r: any) => {
        optionPositionLines.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionLineOptions.value = optionPositionLines;
      positionLineOptionsFilter.value = optionPositionLines;

      let optionPositionExecutives: DataOption[] = [];
      data.positionExecutives.map((r: any) => {
        optionPositionExecutives.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionExecutiveOptions.value = optionPositionExecutives;
      positionExecutiveOptionsFilter.value = optionPositionExecutives;

      let optionPositionExecutiveSides: DataOption[] = [];
      data.positionExecutiveSides.map((r: any) => {
        optionPositionExecutiveSides.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;

      let optionPositionLevels: DataOption[] = [];
      data.positionLevels.map((r: any) => {
        optionPositionLevels.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionLevelOptions.value = optionPositionLevels;
      positionLevelOptionsFilter.value = optionPositionLevels;
    })
    .catch((e: any) => {})
    .finally(() => {
      hideLoader();
    });
};
const clickEditRowRef = () => {
  editRow.value = true;
  salaryRef.value = refSelected.value?.name;
};
const fetchOrganization = async (id: string) => {
  if (selected.value != "") {
    showLoader();
    await http
      .get(config.API.organizationName(id))
      .then((res) => {
        let data = res.data.result;
        ocId.value = data;
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
};
const templateDetail = async () => {
  await fetchOrganization(selected.value);
  salaryClass.value = "";
  if (ocId.value != "") {
    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
  }

  const positionF = positionOptions.value.filter(
    (r: DataOption) => r.id == positionId.value
  );
  if (positionF.length > 0) {
    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
  }

  const posNoF = posNoOptions.value.filter(
    (r: DataOption) => r.id == posNoId.value
  );
  if (posNoF.length > 0) {
    salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
  }

  const positionLineF = positionLineOptions.value.filter(
    (r: DataOption) => r.id == positionLineId.value
  );
  if (positionLineF.length > 0) {
    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
  }

  const positionPathSideF = positionSideOptions.value.filter(
    (r: DataOption) => r.id == positionPathSideId.value
  );
  if (positionPathSideF.length > 0) {
    salaryClass.value =
      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
  }

  const positionTypeF = positionTypeOptions.value.filter(
    (r: DataOption) => r.id == positionTypeId.value
  );
  if (positionTypeF.length > 0) {
    salaryClass.value =
      salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
  }

  const positionLevelF = positionLevelOptions.value.filter(
    (r: DataOption) => r.id == positionLevelId.value
  );
  if (positionLevelF.length > 0) {
    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
  }

  const positionExecutiveF = positionExecutiveOptions.value.filter(
    (r: DataOption) => r.id == positionExecutiveId.value
  );
  if (positionExecutiveF.length > 0) {
    salaryClass.value =
      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
  }
};
const appointModal = ref<boolean>(false);

const nodeTree = async () => {
  showLoader();
  await http
    .get(config.API.getTreeRoot)
    .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 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;
};

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 onSelected = async (id: string) => {
  await fetchPositionNumber(id);
};
const fetchPositionNumber = async (id: string) => {
  showLoader();
  await http
    .get(config.API.getPositionNumberIdByOcId(id))
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      posNoOptions.value = option;
      posNoOptionsFilter.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const getNumFile = ref(0);
const editDetail = (
  props: TableName,
  action: "cancel" | "wait" | "waitInfo"
) => {
  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;
    Name.value = props.fullName;
  } else if (action === "waitInfo") {
    getNumFile.value = 1;
    editRow.value = false;
    modalEdit.value = true;
    modalwaitInfo.value = true;
    edit.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: "center",
    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: "center",
    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: "center",
    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 refOptions = ref<DataOption[]>([
  {
    id: "0",
    name: "****************  ครู  **********************",
    disable: true,
  },
  {
    id: "1",
    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "2",
    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
  {
    id: "4",
    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
  },
  {
    id: "5",
    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
  },
  {
    id: "6",
    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "7",
    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "8",
    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
  },
  {
    id: "9",
    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "10",
    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "11",
    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "12",
    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "13",
    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "14",
    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "15",
    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
  {
    id: "21",
    name: "****************  ลูกจ้าง  **********************",
    disable: true,
  },
  {
    id: "22",
    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "23",
    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "24",
    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "25",
    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "26",
    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "27",
    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "28",
    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
  {
    id: "30",
    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "31",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
  },
  {
    id: "32",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
  },
  {
    id: "33",
    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
]);
const refOptionsFilter = ref<DataOption[]>([
  {
    id: "0",
    name: "****************  ครู  **********************",
    disable: true,
  },
  {
    id: "1",
    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "2",
    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
  {
    id: "4",
    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
  },
  {
    id: "5",
    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
  },
  {
    id: "6",
    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "7",
    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "8",
    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
  },
  {
    id: "9",
    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "10",
    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "11",
    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "12",
    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "13",
    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "14",
    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "15",
    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
  {
    id: "21",
    name: "****************  ลูกจ้าง  **********************",
    disable: true,
  },
  {
    id: "22",
    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "23",
    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "24",
    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "25",
    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "26",
    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "27",
    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "28",
    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
  {
    id: "30",
    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
  {
    id: "31",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
  },
  {
    id: "32",
    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
  },
  {
    id: "33",
    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
  },
]);
const itemtest = ref<object>({});

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

const openAppointModal = (value: any) => {
  appointModal.value = true;
  editRow.value = true;
};
const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "1":
      update(() => {
        posNoOptions.value = posNoOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "2":
      update(() => {
        positionOptions.value = positionOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "3":
      update(() => {
        positionSideOptions.value = positionSideOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "4":
      update(() => {
        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "5":
      update(() => {
        positionLineOptions.value = positionLineOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "6":
      update(() => {
        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "7":
      update(() => {
        positionExecutiveOptions.value =
          positionExecutiveOptionsFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "8":
      update(() => {
        refOptions.value = refOptionsFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};

const posNoF = posNoOptions.value.filter(
  (r: DataOption) => r.id == posNoId.value
);
if (posNoF.length > 0) {
  salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
}
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 manageApiErrorMsg = (catchE: any) => {
  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
    return;
  } else {
    messageError($q, catchE);
  }
};
const save = () => {
  console.log("rows===>", rows.value);
};
onMounted(async () => {
  await fetchPosition();
  await nodeTree();
  // await fetchData();
});
const fetchChildrenByParentId = async (node: any) => {
  console.log("Call API4");
  showLoader();
  let request = "";

  request = config.API.getTreeNode(node.organizationId, node.keyId);

  await http
    .get(request)
    .then((res) => {
      console.log(res.data.result);
      node.children = res.data.result;
    })
    .catch((e) => {
      manageApiErrorMsg(e);
    })
    .finally(() => {
      hideLoader();
    });
};
const onLazyLoad = (node: any) => {
  setTimeout(async () => {
    console.log("Call LazyLoad");
    await fetchChildrenByParentId(node.node);
    node.done(node.node.children); //return ค่าให้ q-tree generate children
  }, 10);
};
const listKeyId = (data: any) => {
  const { node } = data;
  console.log("test", node);
  posNoId.value = node.positionNum;
  positionId.value = node.positionName;
  positionPathSideId.value = node.executivePositionSide;
  positionTypeId.value = node.positionType;
  positionLineId.value = node.organizationName;
  positionLevelId.value = node.positionLevel;
  return node.keyId;
};
</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 }}
              <div class="row col-12 text-no-wrap	 items-center">
                      <img
                        v-if="props.row.avatar == null"
                        src="@/assets/avatar_user.jpg"
                        class="col-4 img-info"
                      />
                      <img
                        v-else
                        :src="props.row.avatar"
                        class="col-4 img-info"
                      />
                      <div class="col-4">
                        <div class="text-weight-medium">
                          {{ props.row.fullName }}
                        </div>
                        <div class="text-weight-light">
                          {{ props.row.profileID }}
                        </div>
                      </div>
                    </div>
            </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.UnitGroup }}
                <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>
          <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="mdi-account-alert"
                @click="editDetail(props.row, 'wait')"
              />
              <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>

  <q-dialog v-model="appointModal" persistent full-width>
    <q-card>
      <q-form ref="myForm">
        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
        <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-6 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
                    no-transition
                    ref="qtreeEdit"
                    :nodes="nodesTree"
                    node-key="keyId"
                    @lazy-load="onLazyLoad"
                    dense
                  >
                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
                    <template v-slot:header-organization="prop">
                      <div class="col">
                        <div
                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
                        >
                          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                          <div class="text-weight-medium">
                            {{ prop.node.organizationName }}
                          </div>

                          <!--แสดง Total Count PositionNum-->
                          <q-badge
                            rounded
                            color="grey-2"
                            text-color="dark"
                            :label="prop.node.totalPositionCount"
                          />
                          <q-badge
                            v-if="prop.node.totalPositionVacant > 0"
                            rounded
                            color="red"
                            outline
                            :label="prop.node.totalPositionVacant"
                          />

                          <q-space />
                        </div>
                        <div class="col items-center q-px-xs q-pt-xs">
                          <div class="text-weight-medium text-grey-7">
                            {{ prop.node.governmentCode }}
                            {{ prop.node.organizationShortName }}
                          </div>
                        </div>
                      </div>
                    </template>
                    <template v-slot:header-person="prop">
                      <q-item
                        clickable
                        :active="clickAction === prop.node.keyId"
                        @click="clickAction = listKeyId(prop)"
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <img
                          v-if="
                            prop.node.avatar == '' ||
                            prop.node.avatar ==
                              'https://cdn.quasar.dev/img/boy-avatar.png'
                          "
                          src="@/assets/avatar_user.jpg"
                          class="col-xs-1 col-sm-2"
                          style="width: 28px; height: 28px; border-radius: 50%"
                        />
                        <img
                          v-else
                          :src="prop.node.avatar"
                          class="col-xs-1 col-sm-2"
                          style="width: 28px; height: 28px; border-radius: 50%"
                        />
                        <!--=====ตำแหน่งว่าง สีแดง=====-->
                        <div
                          v-if="
                            prop.node.name == `ว่าง` ||
                            prop.node.name == `N/A` ||
                            prop.node.name == null
                          "
                          class="q-px-sm text-weight-medium text-red"
                        >
                          ว่าง
                        </div>
                        <!--=====หัวหน้า สีเขียว=====-->
                        <div v-else-if="prop.node.positionLeaderFlag">
                          <div class="q-px-sm text-weight-medium text-primary">
                            {{ prop.node.name }}
                          </div>
                        </div>
                        <!--=====ลูกน้อง สีปกติ=====-->
                        <div v-else>
                          <div class="q-px-sm text-weight-medium">
                            {{ prop.node.name }}
                          </div>
                        </div>
                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
                        <div class="q-pr-sm">
                          {{ prop.node.positionName }}
                        </div>
                        <div class="q-pr-sm">
                          {{ prop.node.positionNum }}
                        </div>
                        <div class="q-pr-sm">
                          {{ prop.node.positionLevel }}
                        </div>
                        <q-icon
                          v-if="prop.node.positionLeaderFlag"
                          class="q-mr-sm"
                          size="15px"
                          color="primary"
                          name="mdi-bookmark"
                        ></q-icon>

                        <q-space />
                      </q-item>
                    </template>
                  </q-tree>
                </q-scroll-area>
              </q-card>
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-card flat bordered class="fit q-pa-sm">
                <q-scroll-area visible style="height: 70vh">
                  <div class="row col-12 q-col-gutter-xs">
                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <datepicker
                        menu-class-name="modalfix"
                        :readonly="!edit"
                        v-model="date"
                        :locale="'th'"
                        autoApply
                        :enableTimePicker="false"
                        @update:modelValue="clickEditRow"
                        week-start="0"
                      >
                        <template #year="{ year }">{{ year + 543 }}</template>
                        <template #year-overlay-value="{ value }">{{
                          parseInt(value + 543)
                        }}</template>
                        <template #trigger>
                          <q-input
                            :class="getClass(edit)"
                            :outlined="edit"
                            dense
                            lazy-rules
                            :borderless="!edit"
                            :model-value="date2Thai(date)"
                            :rules="[
                              (val:string) =>
                                !!val ||
                                `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
                            ]"
                            :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
                            hide-bottom-space
                          >
                            <template v-slot:prepend>
                              <q-icon
                                name="event"
                                class="cursor-pointer"
                                :style="
                                  edit
                                    ? 'color: var(--q-primary)'
                                    : 'color: var(--q-grey)'
                                "
                              >
                              </q-icon>
                            </template>
                          </q-input>
                        </template>
                      </datepicker>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        standout
                        readonly
                        class="custom-input"
                        dense
                        lazy-rules
                        v-model="posNoId"
                        :label="`${'เลขที่ตำแหน่ง'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        readonly
                        class="custom-input"
                        standout
                        dense
                        lazy-rules
                        v-model="positionId"
                        :label="`${'ตำแหน่ง'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        readonly
                        class="custom-input"
                        standout
                        dense
                        lazy-rules
                        v-model="positionPathSideId"
                        :label="`${'ด้าน/สาขา'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        readonly
                        class="custom-input"
                        standout
                        dense
                        lazy-rules
                        v-model="positionTypeId"
                        :label="`${'ประเภทตำแหน่ง'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        readonly
                        class="custom-input"
                        standout
                        dense
                        lazy-rules
                        v-model="positionLineId"
                        :label="`${'สายงาน'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                      <q-input
                        disable
                        readonly
                        class="custom-input"
                        standout
                        dense
                        lazy-rules
                        v-model="positionLevelId"
                        :label="`${'ระดับ'}`"
                      />
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6"></div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                      <q-input
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="amount"
                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                        :label="`${'เงินเดือน'}`"
                        @update:modelValue="clickEditRow"
                        type="number"
                        hide-bottom-space
                      />
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                      <q-input
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="positionSalaryAmount"
                        :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                        ]"
                        :label="`${'เงินประจำตำแหน่ง'}`"
                        @update:modelValue="clickEditRow"
                        type="number"
                        hide-bottom-space
                      />
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                      <q-input
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="mouthSalaryAmount"
                        :rules="[
                          (val) =>
                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                        ]"
                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                        @update:modelValue="clickEditRow"
                        type="number"
                        hide-bottom-space
                      />
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <q-input
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="salaryClass"
                        :rules="[
                          (val:string) =>
                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
                        ]"
                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
                        @update:modelValue="clickEditRow"
                        hide-bottom-space
                        autogrow
                      >
                        <template v-slot:append>
                          <q-btn
                            color="info"
                            flat
                            dense
                            round
                            size="14px"
                            icon="mdi-plus"
                            @click="templateDetail"
                            :disable="!edit"
                          />
                        </template>
                      </q-input>
                    </div>

                    <div class="row col-xs-12 col-sm-12 col-md-12">
                      <selector
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="refSelected"
                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
                        @update:modelValue="clickEditRowRef"
                        option-label="name"
                        :options="refOptions"
                        option-value="id"
                        hide-bottom-space
                        use-input
                        input-debounce="0"
                        @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
                      ) "
                      />
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <q-input
                        :class="getClass(edit)"
                        :outlined="edit"
                        dense
                        lazy-rules
                        :readonly="!edit"
                        :borderless="!edit"
                        v-model="salaryRef"
                        :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
                        ]"
                        :label="`${'เอกสารอ้างอิง'}`"
                        @update:modelValue="clickEditRow"
                        type="textarea"
                        hide-bottom-space
                      />
                    </div>
                  </div>
                </q-scroll-area>
              </q-card>
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <DialogFooter
          v-model:editvisible="edit"
          v-model:modalEdit="modalEdit"
          :save="saveAppoint"
        />
      </q-form>
    </q-card>
  </q-dialog>

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

  <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>

  <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>
.custom-input {
  font-size: 16px;
}
.my-list-link {
  border-radius: 5px;

  font-weight: 600;
  border: 1px solid #00aa86;
}

.q-table p {
  margin-bottom: 0;
  color: #818181;
}
.img-info {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
</style>
