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

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

import type { QTableProps } from "quasar";
import type {
  DataOption,
  FormPositionSelect,
  RowDetailPositions,
} from "@/modules/01_metadata/interface/request/position/index";

import DialogFormPosition from "@/modules/01_metadata/components/position/DialogFormPosition.vue";

const $q = useQuasar();
const {
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogRemove,
  date2Thai,
} = useCounterMixin();

/** Table*/
const rowsPositionSelect = ref<RowDetailPositions[]>([]); // รายการข้อมูลตำแหน่งข้าราชการ ฯ
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",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
    sortable: true,
    field: "createdAt",
    format(val, row) {
      return date2Thai(val, false, true);
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return date2Thai(val, false, true);
    },
  },
  {
    name: "lastUpdateFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "lastUpdateFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "positionName",
  "positionField",
  "posTypeName",
  "posLevelName",
  "posExecutiveName",
  "positionExecutiveField",
  "positionArea",
  "createdAt",
  "lastUpdatedAt",
  "lastUpdateFullName",
]);

// ฟอร์มข้อมูลตำแหน่ง
const formPositionSelect = reactive<FormPositionSelect>({
  positionId: "",
  posTypeId: "",
  positionName: "",
  positionField: "",
  positionType: "",
  positionLevel: "",
  positionExecutive: "",
  positionExecutiveField: "",
  positionArea: "",
  isSpecial: false,
});
const modalFormPosition = ref<boolean>(false); // สถานะการ DialogFormPosition
const statusEdit = ref<boolean>(false); // สถานะการแก้ไขข้อมูล
const copyPosition = ref<boolean>(false); // สถานะการคัดลอกข้อมูล

const search = ref<string>(""); // คำค้นหา
const type = ref<string>("positionName"); // ประเภท
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
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: "ด้าน/สาขา" },
]);

/**
 * ดึงข้อมูลรายการข้อมูลตำแหน่งข้าราชการ ฯ
 */
async function fetchData() {
  showLoader();
  await http
    .get(
      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
    )
    .then(async (res) => {
      rowsPositionSelect.value = await res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * เปิด  DialogFormPosition สำหลับเพิ่มข้อมูลตำแหน่ง
 */
function popupAdd() {
  modalFormPosition.value = true;
}

/**
 * คัดลอกข้อมูลตำแหน่งไปยังแบบฟอร์ม
 *
 * @param data ข้อมูลตำแหน่งที่ต้องการคัดลอก
 * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
 * - เปิด DialogFormPosition สำหลับคัดลอกข้อมูล
 * - copyPosition` เป็น true
 */
function copyDetiail(data: RowDetailPositions) {
  formPositionSelect.positionId = data.id;
  formPositionSelect.posTypeId = data.posTypeId;
  formPositionSelect.positionName = data.positionName;
  formPositionSelect.positionField = data.positionField;
  formPositionSelect.positionType = data.posTypeId;
  formPositionSelect.positionLevel = data.posLevelId;
  formPositionSelect.positionExecutive = data.posExecutiveId;
  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
  formPositionSelect.positionArea = data.positionArea;
  modalFormPosition.value = true;
  copyPosition.value = true;
}

/**
 * แก้ไขข้อมูล
 *
 * @param data ข้อมูลตำแหน่งที่ต้องการแก้ไข
 * - คัดลอกข้อมูลจาก data ไปยัง formPositionSelect เพื่อแสดงในแบบฟอร์ม
 * - เปิด DialogFormPosition สำหลับแก้ไขข้อมูล
 * - statusEdit = true
 */
function editDetiail(data: RowDetailPositions) {
  formPositionSelect.positionId = data.id;
  formPositionSelect.posTypeId = data.posTypeId;
  formPositionSelect.positionName = data.positionName;
  formPositionSelect.positionField = data.positionField;
  formPositionSelect.positionType = data.posTypeId;
  formPositionSelect.positionLevel = data.posLevelId;
  formPositionSelect.positionExecutive = data.posExecutiveId;
  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
  formPositionSelect.positionArea = data.positionArea;
  formPositionSelect.isSpecial = data.isSpecial;
  modalFormPosition.value = true;
  statusEdit.value = true;
}

/**
 * ยืนยันการลบรายการข้อมูลตำแหน่งข้าราชการ ฯ
 *
 * @param id ข้อมูลตำแหน่งข้าราชการ ฯ
 * - เมื่อการลบสำเร็จ จะดึงข้อมูลใหม่เพื่อแสดงผล และแสดงข้อความสำเร็จ
 */
function deletePos(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.orgPosPositionById(id))
      .then(async () => {
        await fetchData();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .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,
  };
}

/**
 * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
 */
onMounted(async () => {
  await fetchData();
});
</script>

<template>
  <q-form @submit.prevent="fetchData()">
    <div class="row col-12 q-mb-sm q-col-gutter-sm">
      <div class="row col-12">
        <q-btn
          id="addComplaints"
          for="addComplaints"
          size="12px"
          flat
          round
          color="primary"
          icon="mdi-plus"
          @click="popupAdd()"
          ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
        >
      </div>
      <div class="row col-12 q-col-gutter-sm">
        <div class="row q-col-gutter-sm align-items-center">
          <div class="col-auto">
            <q-select
              label="ค้นหาจาก"
              v-model="type"
              :options="optionFilter"
              emit-value
              dense
              map-options
              outlined
              option-label="name"
              option-value="id"
            />
          </div>
          <div class="col">
            <q-input
              v-model="search"
              outlined
              dense
              lazy-rules
              label="คำค้น"
              hide-bottom-space
              style="min-width: 300px"
            >
              <template v-slot:append>
                <q-icon
                  v-if="search"
                  name="cancel"
                  @click="search = ''"
                  class="cursor-pointer"
                ></q-icon>
              </template>
            </q-input>
          </div>

          <div class="col-auto">
            <q-btn
              outline
              color="primary"
              icon="search"
              label="ค้นหา"
              type="submit"
              class="full-width full-height"
            />
          </div>
        </div>

        <q-space />
        <div class="row q-col-gutter-sm align-items-center">
          <div class="col-auto">
            <q-select
              v-model="visibleColumns"
              multiple
              outlined
              dense
              options-dense
              :display-value="$q.lang.table.columns"
              emit-value
              map-options
              :options="columns"
              option-value="name"
              style="min-width: 140px"
            />
          </div>
        </div>
      </div>
    </div>
  </q-form>

  <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"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width />
          <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
              color="blue-6"
              flat
              dense
              round
              class="q-mr-xs"
              icon="mdi-content-copy"
              clickable
              @click.stop="
                () => {
                  copyDetiail(props.row);
                }
              "
            >
              <q-tooltip>คัดลอกข้อมูล</q-tooltip>
            </q-btn>
            <q-btn
              color="edit"
              flat
              dense
              round
              icon="mdi-pencil"
              clickable
              @click.stop="editDetiail(props.row)"
              v-close-popup
            >
              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
            </q-btn>
            <q-btn
              color="red"
              flat
              dense
              round
              icon="mdi-delete"
              clickable
              @click.stop="deletePos(props.row.id)"
              v-close-popup
            >
              <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 == 'no'">
              {{ props.rowIndex + 1 }}
            </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 class="table_ellipsis3">
              {{ col.value ? col.value : "-" }}
            </div>
          </q-td>
        </q-tr>
      </template>
    </d-table>
  </div>

  <DialogFormPosition
    v-model:add-position="modalFormPosition"
    v-model:form-data="formPositionSelect"
    v-model:edit-check="statusEdit"
    v-model:copy-check="copyPosition"
    :get-data="fetchData"
  />
</template>
