<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 type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import DialogHeader from "@/components/DialogHeader.vue";
import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational";
import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
import type {
  OptionType,
  OptionExecutive,
  OptionLevel,
} from "@/modules/02_organizationalNew/interface/response/organizational";
interface FormDetailPosition {
  positionNo: string;
  positionType: string;
  positionLevel: string;
  personal: string;
  status: string;
}

interface SeaechResult {
  citizenId: string;
  name: string;
  posTypeName: string;
  posLevelName: string;
}

const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const isDisValidate = ref<boolean>(false);
const executiveOpsMain = ref<DataOption[]>([]);
const typeOpsMain = ref<DataOption[]>([]);
const levelOpsMain = ref<DataOption[]>([]);
const typeOps = ref<DataOption[]>([]);
const levelOps = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const executiveOps = ref<DataOption[]>([]);
const store = useOrganizational();
const $q = useQuasar();
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
// const modal = ref<boolean>(true);

const props = defineProps({
  fetchActive: {
    type: Function,
    require: true,
  },
  dataDetailPos: { type: Object, require: true },
});
const row = ref<Position[]>([]);
const rowResult = ref<SeaechResult[]>([]);
const formData = reactive<FormDetailPosition>({
  positionNo: "", //*เลขที่ตำแหน่ง
  positionType: "", //*เลขที่ตำแหน่ง
  positionLevel: "", //*เลขที่ตำแหน่ง
  personal: "", //*เลขที่ตำแหน่ง
  status: "",
});

const visibleColumnsResult = ref<String[]>([
  "no",
  "citizenId",
  "name",
  "posTypeName",
  "posLevelName",
]);

const columns = ref<QTableProps["columns"]>([
  {
    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 columnsResult = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขบัตรประชาชน",
    sortable: true,
    field: "citizenId",
    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",
  },
  {
    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",
  },
]);
function close() {
  modal.value = false;
}

async function fetchType() {
  showLoader();
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      dataLevel.value = res.data.result;
      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      typeOps.value = typeOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกรายการตำแหน่งทางการบริหาร */
async function fetchExecutive() {
  showLoader();
  await http
    .get(config.API.orgPosExecutive)
    .then((res) => {
      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
        id: e.id,
        name: e.posExecutiveName,
      }));
      executiveOps.value = executiveOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

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

function clearForm() {
  formData.positionType = "";
  formData.positionLevel = "";
  formData.personal = "";
}

watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      clearForm();
      fetchType();
      fetchExecutive();

      if (props.dataDetailPos) {
        formData.positionNo = props.dataDetailPos.posMasterNo;
        formData.status =
          store.typeOrganizational === "current"
            ? "ปกติ"
            : store.typeOrganizational === "draft"
            ? "แบบร่าง"
            : "ยุบเลิก";
        row.value = props.dataDetailPos.positions.map((e: Position) => ({
          ...e,
          positionName: e.positionName ? e.positionName : "-",
          positionField: e.positionField ? e.positionField : "-",
          posTypeName: e.posTypeName ? e.posTypeName : "-",
          posLevelName: e.posLevelName ? e.posLevelName : "-",
          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
          positionExecutiveField: e.positionExecutiveField
            ? e.positionExecutiveField
            : "-",
          positionArea: e.positionArea ? e.positionArea : "-",
        }));
      }
    }
  }
);

function updateSelectType(val: string) {
  const listLevel = dataLevel.value.find((e: any) => e.id === val);
  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
    id: e.id,
    name: e.posLevelName,
  }));
  levelOps.value = levelOpsMain.value;
  formData.positionLevel = "";
}

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
  // const hasError = [];
  // for (const key in objectRef) {
  //   if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
  //     const property = objectRef[key];
  //     if (property.value && typeof property.value.validate === "function") {
  //       const isValid = property.value.validate();
  //       hasError.push(isValid);
  //     }
  //   }
  // }
  // if (hasError.every((result) => result === true)) {
  onSubmit();
  // } else {
  // }
}

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm($q, () => {
    // showLoader();
    // http
    //   .post(config.API.createOrganization, formData)
    //   .then((res) => {
    //     status.value = true;
    //     store.typeOrganizational = "draft";
    //     store.draftId = res.data.result.id;
    //     success($q, "บันทึกข้อมูลสำเร็จ");
    //     // props.fetchActive?.();
    //   })
    //   .catch((err) => {
    //     messageError($q, err);
    //   })
    //   .finally(async () => {
    //     modal.value = await false;
    //     await close();
    //     await hideLoader();
    //   });
  },'ยืนยันการเลือกคนครอง','ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?');
}

/** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
function filterFn() {
  const data = [
    {
      citizenId: "test1",
      name: "test1",
      posTypeName: "test1",
      posLevelName: "test1",
    },
    {
      citizenId: "test2",
      name: "test2",
      posTypeName: "test2",
      posLevelName: "test2",
    },
  ];

  rowResult.value = data;
  // props.fetchListDisciplinary?.();
}
</script>
<template>
  <template>
    <q-dialog v-model="modal" persistent>
      <q-card style="min-width: 80vw">
        <form @submit.prevent="validateForm">
          <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
          <q-separator />

          <q-card-section>
            <div class="q-px-md">
              <div class="row q-col-gutter-sm q-mb-xs">
                <div class="col-4 text-bold">
                  <div>
                    <p>เลขที่ตำแหน่ง</p>
                  </div>
                </div>
                <div class="col-8 text-grey-8">
                  <p>{{ formData.positionNo }}</p>
                </div>
              </div>

              <div class="row q-col-gutter-sm q-mb-xs">
                <div class="col-12">
                  <d-table
                    flat
                    :columns="columns"
                    :rows="row"
                    row-key="id"
                    dense
                    hide-bottom
                    class="custom-header-table-expand"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <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
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <div v-if="col.name == 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>

                          <div v-else>
                            {{ col.value }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </d-table>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-mt-sm">
                <div class="col-3">
                  <q-input
                    ref="positionExecutiveFieldRef"
                    v-model="formData.personal"
                    :class="inputEdit(isReadonly)"
                    dense
                    outlined
                    for="#search"
                    label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
                    lazy-rules
                    hide-bottom-space
                    @keydown.enter.prevent="filterFn"
                  />
                </div>
                <div class="col-2">
                  <q-select
                    ref="positionTypeRef"
                    :class="inputEdit(isReadonly)"
                    label="ประเภทตำแหน่ง"
                    v-model="formData.positionType"
                    :options="typeOps"
                    emit-value
                    dense
                    @update:model-value="updateSelectType"
                    map-options
                    outlined
                    option-label="name"
                    option-value="id"
                    lazy-rules
                    hide-bottom-space
                    :rules="
                      !isDisValidate
                        ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
                        : []
                    "
                  />
                </div>
                <div class="col-2">
                  <q-select
                    ref="positionLevelRef"
                    :class="inputEdit(isReadonly)"
                    label="ระดับตำแหน่ง"
                    v-model="formData.positionLevel"
                    :disable="formData.positionType === ''"
                    :options="levelOps"
                    emit-value
                    dense
                    map-options
                    outlined
                    option-label="name"
                    option-value="id"
                    lazy-rules
                    hide-bottom-space
                    :rules="
                      !isDisValidate
                        ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
                        : []
                    "
                  />
                </div>

                <q-space />
                <q-select
                  for="#select"
                  v-model="visibleColumnsResult"
                  multiple
                  outlined
                  dense
                  options-dense
                  :display-value="$q.lang.table.columns"
                  emit-value
                  map-options
                  :options="columnsResult"
                  option-value="name"
                  options-cover
                  style="min-width: 150px"
                  class="col-xs-12 col-sm-3 col-md-2"
                />
                <div class="col-12">
                  <d-table
                    flat
                    :columns="columnsResult"
                    :rows="rowResult"
                    row-key="id"
                    dense
                    hide-bottom
                    class="custom-header-table-expand"
                  >
                    <template v-slot:header="props">
                      <q-tr :props="props">
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <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
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          <div v-if="col.name == 'no'">
                            {{ props.rowIndex + 1 }}
                          </div>

                          <div v-else>
                            {{ col.value }}
                          </div>
                        </q-td>
                      </q-tr>
                    </template>
                  </d-table>
                </div>
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn type="submit" :label="`ยืนยัน`" color="public" />
          </q-card-actions>
        </form>
      </q-card>
    </q-dialog>
  </template>
</template>
