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

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

/**
 * importType
 */
import type { QTableProps } from "quasar";
import type {
  FormDataPosition,
  DataOption,
  FormPositionSelect,
  RowDetailPositions,
  ListMenu,
} from "@/modules/02_organization/interface/index/Main";
import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";

/**
 * importComponents
 */
import DialogHeader from "@/components/DialogHeader.vue";
import DialogAddPosition from "@/modules/02_organization/components/DialogAddPosition.vue"; //เพิ่มข้อมูลตำแหน่ง

/**
 * use
 */
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogRemove,
  dialogMessageNotify,
} = mixin;

/**
 * props
 */
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true }); // qurey
const isPositionHolder = defineModel<boolean>("isPositionHolder", {
  default: false,
});

const props = defineProps({
  modal: Boolean,
  close: Function,
  orgLevel: Number,
  treeId: String,
  actionType: String,
  rowId: { type: String, default: "" },
  fetchDataTable: Function,
  getSummary: Function,
  shortName: { type: String, required: true },
  orgShortName: { type: String, required: true },
  dataTree: { type: Object, default: () => [] },
  positionHolderInfo: { type: Object, default: () => ({}) },
});

const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const isEdit = ref<boolean>(false); //การแก้ไข
const modalAdd = ref<boolean>(false); //เพิ่ม แก้้ไขตำแหน่ง
const isPosition = ref<boolean>(false); // แสดงการเพิ่มตำแหน่ง
const orgLevel = ref<number>(0);
const orgId = ref<string>(""); //Id หน่วยงาน

const dataCopy = ref<RowDetailPositions>(); //ข้อมูลที่จ้องการคัดลอก
const search = ref<string>(""); //คำค้นหา
const type = ref<string>("positionName"); //ประเภทค้นหา
//ตัวเลือกค้นหาข้อมูลตำแหน่ง
const optionFilter = ref<DataOption[]>([
  { id: "positionName", name: "ตำแหน่งในสายงาน" },
  { id: "positionField", name: "สายงาน" },
  { id: "positionType", name: "ตำแหน่งประเภท" },
  { id: "positionLevel", name: "ระดับตำแหน่ง" },
  { id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
  { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
  { id: "positionArea", name: "ด้าน/สาขา" },
]);

//ฟอร์มอัตรากำลัง
const formData = reactive<FormDataPosition>({
  shortName: "",
  prefixNo: "",
  positionNo: "",
  suffixNo: "",
  reason: "",
  isDirector: false,
  // isStaff: false,
  positionSign: "",
});

//ฟอร์มตำแหน่ง
const formPositionSelect = reactive<FormPositionSelect>({
  positionId: "",
  positionName: "",
  positionField: "",
  positionType: "",
  positionLevel: "",
  positionExecutive: "",
  positionExecutiveField: "",
  positionArea: "",
});

//Table
const selectedPos = ref<RowDetailPositions[]>([]);
const rows = ref<RowDetailPositions[]>([]); //ข้อมูลรายการอัตรากำลัง
const rowsPositionSelect = ref<RowDetailPositions[]>([]); //ข้อมูลรายากรตำแหน่ง
const columns = ref<QTableProps["columns"]>([
  {
    name: "checkbox",
    align: "center",
    label: "ครองในตำแหน่ง",
    sortable: false,
    field: "checkbox",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "positionName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionField",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posExecutiveName",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "posExecutiveName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionExecutiveField",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionArea",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionArea",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "positionName",
  "positionField",
  "posTypeName",
  "posLevelName",
  "posExecutiveName",
  "positionExecutiveField",
  "positionArea",
]);
//รายการเมนู
const listMenu = ref<ListMenu[]>([
  {
    label: "คัดลอก",
    icon: "mdi-content-copy",
    type: "copy",
    color: "blue-6",
  },
  {
    label: "แก้ไข",
    icon: "mdi-pencil",
    type: "edit",
    color: "edit",
  },
  {
    label: "ลบ",
    icon: "delete",
    type: "remove",
    color: "red",
  },
]);

/**
 * function fetch ข้อมูลอัตรากำลัง
 * @param id อัตรากำลัง
 */
async function fetchPosition(id: string) {
  showLoader();
  await http
    .get(config.API.orgPosPositionById(id))
    .then((res) => {
      const data = res.data.result;
      formData.prefixNo = data.posMasterNoPrefix;
      formData.positionNo = data.posMasterNo;
      formData.suffixNo = data.posMasterNoSuffix;
      formData.reason = data.reason;
      formData.isDirector = data.isDirector;
      orgLevel.value = data.orgLevel;
      orgId.value = data.orgId; //กำหนดค่า Id หน่วยงาน
      // formData.isStaff = data.isStaff;
      formData.positionSign = data.positionSign;
      rows.value = data.positions;
      const positionIsSelected = data.positions.find(
        (item: any) => item.id === props.positionHolderInfo.position
      );

      if (positionIsSelected) {
        selectedPos.value.push(positionIsSelected);
      } else {
        selectedPos.value = [];
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นยืนยันการบันทึกข้อมูลอัตรากำลัง
 *
 * ถ้า  props.actionType เป็น "ADD" หรือ "COPY" จะเพิ่มรายการตำแหน่ง ไม่จะเป็นการแก้ไขข้อมูล
 *
 */
function onSubmit() {
  //ตราจสอบรายการตำแหน่งถ้าไม่มีแสดงข้อความแจ้งเตือน
  if (rows.value.length == 0) {
    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
  } else if (selectedPos.value.length == 0 && isPositionHolder.value) {
    dialogMessageNotify($q, "กรุณาเลือกครองในตำแหน่ง");
  } else {
    //ถ้ามีแสดง dialog ยืนยัน
    dialogConfirm($q, async () => {
      const isAddOrCopy =
        props.actionType === "ADD" || props.actionType === "COPY";
      const positionsData = rows.value.map(
        (e: RowDetailPositions, index: number) => ({
          id: !e.isNew ? e.id : null, //id รายการตำแหน่ง
          posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
          posDictField: e.positionField, //สายงาน
          posTypeId: e.posTypeId, //*ตำแหน่งประเภท
          posLevelId: e.posLevelId, //*ระดับตำแหน่ง
          posExecutiveId: e.posExecutiveId ? e.posExecutiveId : "", //ตำแหน่งทางการบริหาร
          posDictExecutiveField: e.positionExecutiveField, //ด้านทางการบริหาร
          posDictArea: e.positionArea, //ด้าน/สาขา
          isSpecial: e.isSpecial,
          positionIsSelected:
            isPositionHolder.value && selectedPos.value[0]?.id === e.id
              ? true
              : false,
          orderNo: index,
        })
      );

      // สร้างข้อมูลตำแหน่งใหม่ ถ้าเป็นการเพิ่มหรือคัดลอกไม่เอา ID
      const positionNew = isAddOrCopy
        ? positionsData.map(({ id, ...rest }) => rest)
        : positionsData;

      const body = {
        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
        posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
        posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
        reason: formData.reason, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
        isDirector: formData.isDirector,
        // isStaff: formData.isStaff ? formData.isStaff : false,
        isStaff: false,
        positionSign: formData.positionSign,
        orgRootId: getOrgIdByLevel(0), // Id สำนัก
        orgChild1Id: getOrgIdByLevel(1),
        orgChild2Id: getOrgIdByLevel(2),
        orgChild3Id: getOrgIdByLevel(3),
        orgChild4Id: getOrgIdByLevel(4),
        positions: positionNew,
      };

      showLoader();
      try {
        if (isAddOrCopy) {
          await http.post(config.API.orgPosMaster, body);

          await Promise.all([
            props.fetchDataTable?.(
              reqMaster.value.id,
              reqMaster.value.type,
              false
            ),
            props.getSummary?.(),
          ]);
          await success($q, "เพิ่มข้อมูลสำเร็จ");
        } else if (props.rowId) {
          await http.put(config.API.orgPosMasterById(props.rowId), body);
          await props.fetchDataTable?.(
            reqMaster.value.id,
            reqMaster.value.type,
            false
          );
          await success($q, "แก้ไขข้อมูลสำเร็จ");
        }

        close();
      } catch (error) {
        messageError($q, error);
      } finally {
        hideLoader();
      }
    });
  }
}

/**
 * ฟังก์ชันสร้าง organization ID สำหรับแต่ละ level
 * @param level ระดับของ organization (0-4)
 * @returns ID ที่เหมาะสมสำหรับ level นั้น
 */
function getOrgIdByLevel(level: number): string | null {
  const isAdd = props.actionType === "ADD";

  if (isAdd) {
    return props.orgLevel === level ? props.treeId ?? null : null;
  } else {
    return orgLevel.value === level
      ? level === 0
        ? props.treeId ?? null
        : orgId.value
      : null;
  }
}

/**
 * ฟังก์ชันต้นหาตำแหน่งที่ต้องการเพิ่ม
 */
async function searchInput() {
  showLoader();
  await http
    .get(
      config.API.orgPosPosition +
        `?keyword=${search.value.trim()}&type=${type.value}`
    )
    .then((res) => {
      rowsPositionSelect.value = res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันคัดลอกข้อมูลตำแหน่ง
 * @param data ข้อมูลตำแหน่งที่ต้องการคัดลอก
 */
function copyDetiail(data: RowDetailPositions) {
  modalAdd.value = true;
  dataCopy.value = data;
}
/**
 * ฟังก์ชันแก้ไขข้อมูลตำแหน่ง
 * @param data ข้อมูลตำแหน่งที่ต้องการแก้ไข
 */
function editDetiail(data: RowDetailPositions) {
  isEdit.value = true;
  modalAdd.value = true;
  dataCopy.value = data;
}

/**
 * ฟังก์ชันเพิ่มข้อมูลรายการอัตรากำลัง
 * @param data ข้อมูลตำแหน่งที่ต้องการเพิ่ม
 */
async function addPosition(data: RowDetailPositions) {
  const isIdExist = rows.value.some(
    (item: RowDetailPositions) =>
      item.posExecutiveId == data.posExecutiveId &&
      item.positionField == data.positionField &&
      item.posLevelId == data.posLevelId &&
      item.posTypeId == data.posTypeId &&
      item.positionArea == data.positionArea &&
      item.positionExecutiveField == data.positionExecutiveField &&
      item.positionName == data.positionName &&
      item.isSpecial == data.isSpecial
  );
  // data.id = null; // Reset id to ensure a new entry
  data.isNew = true; // Mark as new entry
  if (!isIdExist) {
    rows.value = [...rows.value, data];
  }
}

/**
 * ฟังก์ชันลบรายการข้อมูลอัตรากำลัง
 * @param id รายการข้อมูลอัตรากำลังที่จ้องการลบ
 */
function deleteData(id: string) {
  const dataRow = rows.value;
  const updatedRows = dataRow.filter(
    (item: RowDetailPositions) => item.id !== id
  );

  //เช็คว่าตำแหน่งที่ถูกลบมีการเลือกอยู่หรือไม่ถ้ามีให้ลบออกจาก selectedPos
  if (dataRow.find((item) => item.id === id)?.positionIsSelected) {
    selectedPos.value = [];
  }

  rows.value = updatedRows;
}

/**
 * ฟังก์ชันลบข้อมูลรายการตำแหน่ง
 * @param id ข้อมูลรายการตำแหน่งที่ต้องการลบ
 */
function deletePos(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.orgPosPositionById(id))
      .then(async () => {
        await searchInput();
        await success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันกำหนดตัวแปรทั้งหมดให้เป็นค่า Default
 */
async function clearFormPositionSelect() {
  formPositionSelect.positionId = "";
  formPositionSelect.positionName = "";
  formPositionSelect.positionField = "";
  formPositionSelect.positionType = "";
  formPositionSelect.positionLevel = "";
  formPositionSelect.positionExecutive = "";
  formPositionSelect.positionExecutiveField = "";
  formPositionSelect.positionArea = "";
  search.value = "";
  rows.value = [];
  formData.prefixNo = "";
  formData.positionNo = "";
  formData.suffixNo = "";
  formData.reason = "";
  formData.isDirector = false;
  rowsPositionSelect.value = [];
  isPosition.value = false;
  // formData.isStaff = false;
  formData.positionSign = "";
  selectedPos.value = [];
}

/**
 * ฟังก์ชัน ปิด popup
 * และกำหนดตัวแปรทั้งหมดให้เป็นค่า Default
 */
function close() {
  props.close?.();
  clearFormPositionSelect();
}

/**
 *  ฟังก์ชันค้นหาข้อมูลตำแหน่ง
 * @param keyword  คำค้นหา
 * @param typeSelect  ปรเภทการค้นหา
 */
async function emitSearch(keyword: string, typeSelect: string) {
  search.value = keyword;
  type.value = typeSelect;
  await searchInput();
}

/**
 * ส่งค่า css ออกไปตามเงื่อนไข
 * @param val true/false
 */
function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer inputgreen ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * ดูการเปลี่ยนแปลง props.modal
 * เมื่อ props.modal เป็น true
 */
watch(
  () => props.modal,
  async () => {
    if (props.modal === true) {
      formData.shortName =
        props.actionType === "ADD" ? props.shortName : props.orgShortName;
      if (props.actionType !== "ADD" && props.rowId) {
        fetchPosition(props.rowId);
      }

      visibleColumns.value = [
        ...(isPositionHolder.value ? ["checkbox"] : []),
        "no",
        "positionName",
        "positionField",
        "posTypeName",
        "posLevelName",
        "posExecutiveName",
        "positionExecutiveField",
        "positionArea",
      ];
    }
  }
);

watch(
  () => formData.isDirector,
  (newData, oldData) => {
    if (newData === true) {
      formData.positionSign = !formData.positionSign
        ? ""
        : formData.positionSign;
    } else {
      formData.positionSign = "";
    }
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 80vw">
      <DialogHeader
        :tittle="
          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
        "
        :close="close"
      />
      <q-separator />
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <q-card-section class="q-pa-sm fixed-height">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
                <div
                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  ข้อมูลอัตรากำลัง
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="row q-col-gutter-sm col-12 q-pa-sm">
                  <div class="row col-8 q-col-gutter-sm">
                    <div class="col-12">
                      <q-input
                        v-model="formData.shortName"
                        dense
                        outlined
                        readonly
                        for="#shortName"
                        label="อักษรย่อ"
                      />
                    </div>
                    <div class="col-4">
                      <q-input
                        v-model="formData.prefixNo"
                        :class="inputEdit(isReadonly)"
                        ref="prefixNoRef"
                        dense
                        outlined
                        for="#prefixNo"
                        label="Prefix เลขที่ตำเเหน่ง"
                      />
                    </div>
                    <div class="col-4">
                      <q-input
                        v-model="formData.positionNo"
                        :class="inputEdit(isReadonly)"
                        ref="positionNoRef"
                        dense
                        outlined
                        for="#positionNo"
                        label="เลขที่ตำแหน่ง"
                        lazy-rules
                        hide-bottom-space
                        :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`,
                        ]"
                        mask="########################"
                      />
                    </div>
                    <div class="col-4">
                      <q-input
                        v-model="formData.suffixNo"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#suffixNo"
                        label="Suffix เลขที่ตำแหน่ง"
                      />
                    </div>
                  </div>

                  <div class="col-4">
                    <q-input
                      v-model="formData.reason"
                      :class="inputEdit(isReadonly)"
                      dense
                      outlined
                      for="#reason"
                      label="หมายเหตุ"
                      type="textarea"
                      rows="4"
                    />
                  </div>

                  <div class="col-12">
                    <d-table
                      ref="table"
                      :columns="columns"
                      :rows="rows"
                      row-key="id"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="visibleColumns"
                      selection="single"
                      v-model:selected="selectedPos"
                    >
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th auto-width></q-th>
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            style="color: #000000; font-weight: 500"
                          >
                            <span class="text-weight-medium">{{
                              col.label
                            }}</span>
                          </q-th>
                        </q-tr>
                      </template>
                      <template v-slot:body="props">
                        <q-tr :props="props">
                          <q-td auto-width>
                            <q-btn
                              flat
                              dense
                              icon="delete"
                              color="red"
                              @click="deleteData(props.row.id)"
                            >
                              <q-tooltip>ลบข้อมูล</q-tooltip>
                            </q-btn>
                          </q-td>

                          <q-td
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            <div v-if="col.name === 'checkbox'">
                              <q-checkbox
                                keep-color
                                color="primary"
                                dense
                                v-model="props.selected"
                              />
                            </div>
                            <div v-else-if="col.name == 'no'">
                              {{ props.rowIndex + 1 }}
                            </div>
                            <div v-else-if="col.name === 'posExecutiveName'">
                              {{ col.value ? col.value : "-" }}
                            </div>

                            <div
                              v-else-if="col.name === 'positionExecutiveField'"
                            >
                              {{ col.value ? col.value : "-" }}
                            </div>
                            <div v-else-if="col.name === 'posLevelName'">
                              {{
                                props.row.posLevelName
                                  ? props.row.isSpecial == true
                                    ? `${props.row.posLevelName} (ฉ)`
                                    : props.row.posLevelName
                                  : "-"
                              }}
                            </div>
                            <div v-else-if="col.name === 'positionArea'">
                              {{ col.value ? col.value : "-" }}
                            </div>
                            <div v-else>
                              {{ col.value }}
                            </div>
                          </q-td>
                        </q-tr>
                      </template>
                    </d-table>

                    <div class="row q-mt-sm">
                      <div class="col-12">
                        <q-checkbox
                          keep-color
                          color="primary"
                          dense
                          v-model="formData.isDirector"
                          label="ผู้อำนวยการ/หัวหน้า"
                        />

                        <!-- <q-checkbox
                          keep-color
                          color="primary"
                          dense
                          v-model="formData.isStaff"
                          label="การเจ้าหน้าที่"
                          class="q-ml-sm"
                        /> -->
                      </div>

                      <div
                        v-if="formData.isDirector"
                        class="col-6 q-mt-sm q-mb-sm"
                      >
                        <q-input
                          v-model="formData.positionSign"
                          :class="inputEdit(isReadonly)"
                          dense
                          outlined
                          for="#positionSign"
                          label="ตำแหน่งใต้ลายเซ็น"
                          :row="2"
                          type="textarea"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <q-separator />

                <q-card-actions class="bg-white q-pa-xs">
                  <q-btn
                    :icon="!isPosition ? 'mdi-menu-right' : 'mdi-menu-down'"
                    flat
                    color="teal"
                    class="q-ml-sm"
                    label="เพิ่มตำแหน่ง"
                    @click="isPosition = !isPosition"
                    ><q-tooltip>{{
                      !isPosition
                        ? "คลิกเพื่อแสดงส่วนของการเพิ่มตำแหน่ง"
                        : "ปิดหน้าต่างการเพิ่มตำแหน่ง"
                    }}</q-tooltip></q-btn
                  >
                  <q-space />
                </q-card-actions>
              </q-card>
            </div>
          </div>

          <div v-if="isPosition" class="row q-col-gutter-sm q-mt-sm">
            <div class="col-12">
              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
                <div
                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  เลือกตำแหน่งที่ต้องการเพิ่ม
                  <q-btn
                    icon="mdi-plus"
                    flat
                    round
                    color="teal"
                    @click="() => ((modalAdd = true), (dataCopy = undefined))"
                    ><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
                  >
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="q-pa-sm">
                  <div class="row col-12 q-col-gutter-sm items-start">
                    <div class="col-12 col-sm-6 col-md-3">
                      <q-select
                        label="ค้นหาจาก"
                        v-model="type"
                        :options="optionFilter"
                        emit-value
                        dense
                        map-options
                        outlined
                        option-label="name"
                        option-value="id"
                      />
                    </div>

                    <div class="col-12 col-sm-6 col-md-6">
                      <q-input
                        v-model="search"
                        outlined
                        dense
                        lazy-rules
                        label="คำค้น"
                        hide-bottom-space
                        @keydown.enter.prevent="searchInput()"
                      />
                    </div>

                    <div class="col-12 col-sm-6 col-md-3">
                      <q-btn
                        outline
                        color="primary"
                        icon="search"
                        label="ค้นหา"
                        class="full-width q-pa-sm"
                        @click="searchInput()"
                      >
                      </q-btn>
                    </div>
                  </div>

                  <div class="full-width q-mt-sm">
                    <d-table
                      ref="table"
                      :columns="columns"
                      :rows="rowsPositionSelect"
                      row-key="id"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="
                        visibleColumns.filter((col) => col !== 'checkbox')
                      "
                    >
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th auto-width></q-th>
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            style="color: #000000; font-weight: 500"
                          >
                            <span class="text-weight-medium">{{
                              col.label
                            }}</span>
                          </q-th>
                        </q-tr>
                      </template>
                      <template v-slot:body="props">
                        <q-tr :props="props" class="cursor-pointer">
                          <q-td auto-width>
                            <q-btn
                              flat
                              dense
                              color="secondary"
                              icon="mdi-dots-horizontal-circle-outline"
                              round
                            >
                              <q-menu
                                transition-show="jump-down"
                                transition-hide="jump-up"
                              >
                                <q-list
                                  dense
                                  v-for="(item, index) in listMenu"
                                  :key="index"
                                >
                                  <q-item
                                    clickable
                                    v-close-popup
                                    @click="
                                      item.type === 'copy'
                                        ? copyDetiail(props.row)
                                        : item.type === 'edit'
                                        ? editDetiail(props.row)
                                        : deletePos(props.row.id)
                                    "
                                  >
                                    <q-item-section
                                      avatar
                                      style="min-width: 0px"
                                    >
                                      <q-icon
                                        :color="item.color"
                                        :name="item.icon"
                                        size="xs"
                                      />
                                    </q-item-section>
                                    <q-item-section>{{
                                      item.label
                                    }}</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-btn>
                          </q-td>
                          <q-td
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            @click="addPosition(props.row)"
                          >
                            <div v-if="col.name == 'no'">
                              {{ props.rowIndex + 1 }}
                            </div>
                            <div v-else-if="col.name === 'posExecutiveName'">
                              {{ col.value ? col.value : "-" }}
                            </div>

                            <div
                              v-else-if="col.name === 'positionExecutiveField'"
                            >
                              {{ col.value ? col.value : "-" }}
                            </div>
                            <div v-else-if="col.name === 'posLevelName'">
                              {{
                                props.row.posLevelName
                                  ? props.row.isSpecial == true
                                    ? `${props.row.posLevelName} (ฉ)`
                                    : props.row.posLevelName
                                  : "-"
                              }}
                            </div>

                            <div v-else-if="col.name === 'positionArea'">
                              {{ col.value ? col.value : "-" }}
                            </div>
                            <div v-else>
                              {{ col.value }}
                            </div>
                          </q-td>
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn type="submit" label="บันทึก" color="public"
            ><q-tooltip>บันทึก</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <!-- เพิ่มข้อมูลตำแหน่ง -->
  <DialogAddPosition
    v-model:modalAdd="modalAdd"
    :emitSearch="emitSearch"
    :data="dataCopy"
    v-model:is-edit="isEdit"
    :get-data="searchInput"
  />
</template>

<style scoped>
.fixed-height {
  overflow-y: auto;
  height: 80vh;
}
</style>
