<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useRoute, useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { useStructureTree } from "@/stores/structureTree";
import genReportXLSX from "@/plugins/genreportxlsx";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";

/**importType*/
import type {
  DataOption,
  OrgTree,
} from "@/modules/15_development/interface/index/Main";
import type {
  FormQueryListProject,
  FormProject,
} from "@/modules/15_development/interface/request/Main";
import type {
  ResListProject,
  DataTree,
} from "@/modules/15_development/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

/** use*/
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useDevelopmentDataStore();
const { fetchStructureTree } = useStructureTree();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogMessageNotify,
  dialogConfirm,
  dialogRemove,
  success,
} = useCounterMixin();
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
  "",
  fetchListProject
);

const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
const expanded = ref<string[]>([]);
const expandedDialog = ref<string[]>([]);

const filter = ref<string>(""); //ค้นหา เพิ่มโครงการ/หลักสูตรการฝึกอบรม
const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
const splitterModel = ref<number>(60); //แบ่ง ส่วน
const modal = ref<boolean>(false); // ตัวแปร dialog

const statusOpt = ref<DataOption[]>([
  { id: "ONGOING", name: "กำลังดำเนินการ" },
  { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
]);

/** หัวตาราง */
const rows = ref<ResListProject[]>([]); // ข้อมูลรายการ
const visibleColumns = ref<string[]>(["year", "projectName", "root"]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "year",
    align: "left",
    label: "ปีงบประมาณ ",
    sortable: true,
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; width:10%",
    format: (val) => (val ? val + 543 : "-"),
  },
  {
    name: "projectName",
    align: "left",
    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
    sortable: true,
    field: "projectName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px;width:45% ",
  },

  {
    name: "root",
    align: "left",
    label: "หน่วยงานที่รับผิดชอบ",
    sortable: true,
    field: "root",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; width:45% ",
  },
]);

/** formProject */
const formProject = reactive<FormProject>({
  year: null,
  projectName: "",
  node: null,
  nodeId: null,
  orgRevisionId: null,
});

/** formQuery */
const formQuery = reactive<FormQueryListProject>({
  year: calculateFiscalYear(new Date()), //ปีงบประมาณ
  org: "1",
  keyword: "",
  status: "ONGOING",
  node: null,
  nodeId: null,
});

/** funciton  fetch รายการโครงการ*/
async function fetchListProject() {
  showLoader();
  await http
    .get(config.API.developmentMain, {
      params: {
        ...params.value,
        keyword: formQuery.keyword.trim(),
        year: formQuery.year,
        status: formQuery.status,
        node: formQuery.node,
        nodeId: formQuery.nodeId,
      },
    })
    .then((res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 *  funciotn redirect to page เพิ่มหริอแก้ไข รายการโครงการ
 * @param status สถานะแก่ไข
 * @param id รายการโครงการ
 */
function onClickAddOrView(status: boolean = false, id: string = "") {
  status ? router.push(`/development/${id}`) : router.push("/development/add");
}

/** function เปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม*/
function onAdd() {
  modal.value = true;
}

/**
 * function fetchข้อมูลหน้าแรกใหม่
 */
function fetchListProjectNew() {
  pagination.value.page = 1;
  fetchListProject();
}

/**
 * function Download รายการโครงการ
 */
function onDownload() {
  showLoader();
  http
    .get(config.API.developmentReportMain() + `?rootId=${formQuery.nodeId}`)
    .then((res) => {
      const dataList = res.data.result;
      genReportXLSX(
        dataList,
        "รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด"
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม
 */
function closeDialog() {
  modal.value = false;
  formProject.year = null;
  formProject.projectName = "";
  formProject.orgRevisionId = "";
  formProject.nodeId = "";
}

/**
 * dialog submit
 */
function onSubmit() {
  if (formProject.nodeId) {
    dialogConfirm($q, async () => {
      showLoader();
      http
        .post(config.API.developmentMain, formProject)
        .then(async (res) => {
          closeDialog();
          router.push(`/development/${res.data.result}`);
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  } else {
    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่รับผิดชอบ");
  }
}

/** function fetch หา Id หน่วยงานที่ Active*/
async function fetchActive() {
  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
  if (dataTree) {
    await fetchListProject();
    node.value = dataTree;
  }
}

/**
 * function เลือกหน่วยงานที่รับผิดชอบ
 */
function updateSelected(data: DataTree) {
  formProject.node = data.orgLevel;
  formProject.nodeId = data.orgTreeId;
  formProject.orgRevisionId = data.orgRevisionId;
}

/** function เลือกหน่วยงานที่จะค้นหาโครงกา*/
function updateSelectedTreeMain(data: DataTree) {
  if (
    formQuery.node === data.orgLevel &&
    formQuery.nodeId === data.orgTreeDnaId
  ) {
    formQuery.node = null;
    formQuery.nodeId = null;
  } else {
    formQuery.node = data.orgLevel;
    formQuery.nodeId = data.orgTreeDnaId;
  }
  fetchListProjectNew(); //  fetch โครงการ
}

/**
 * function redirect หน้าบันทึกผล
 * @param id โครงการ
 */
function onRedirectToRecordPage(id: string) {
  router.push(`/development/record/${id}`);
}

function onDelete(id: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.developmentMain + `/${id}`)
      .then(async () => {
        await checkAndUpdatePage(rows.value.length);
        await fetchListProject();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function redirect หน้าบันทึกผล
 * @param id โครงการ
 */
function onDetail(id: string) {
  router.push(`/development-detail/${id}`);
}

/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
onMounted(() => {
  fetchActive();
  formQuery.status = store.projectStatus;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
  </div>
  <q-card bordered class="col-12 row caedNone">
    <!-- หน่วยงาน/ส่วนราชการ -->
    <div class="col-xs-12 col-sm-3 row">
      <div class="col-12 row no-wrap">
        <div class="col-12 q-py-sm q-px-sm">
          <div class="q-gutter-sm">
            <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
            <q-input dense outlined v-model="filterMain" label="ค้นหา">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>

            <q-tree
              class="tree-container"
              dense
              :nodes="node"
              node-key="orgTreeName"
              label-key="labelName"
              v-model:expanded="expanded"
              :filter="filterMain.trim()"
              no-results-label="ไม่พบข้อมูลที่ค้นหา"
              no-nodes-label="ไม่มีข้อมูล"
              v-model:selected="formQuery.nodeId"
            >
              <template v-slot:default-header="prop">
                <q-item
                  clickable
                  @click.stop="updateSelectedTreeMain(prop.node)"
                  :active="formQuery.nodeId === prop.node.orgTreeDnaId"
                  active-class="my-list-link text-primary text-weight-medium"
                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                >
                  <div>
                    <div class="text-weight-medium">
                      {{ prop.node.orgTreeName }}
                    </div>
                    <div class="text-weight-light text-grey-8">
                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
                      {{
                        prop.node.orgTreeShortName == null
                          ? null
                          : prop.node.orgTreeShortName
                      }}
                    </div>
                  </div>
                </q-item>
              </template>
            </q-tree>
          </div>
        </div>
        <div class="col-12 row">
          <q-separator :vertical="!$q.screen.lt.md" />
        </div>
      </div>
    </div>

    <!-- รายการโครงการ -->
    <div class="col-xs-12 col-sm-9 q-pa-md row scroll" style="height: 85vh">
      <div class="col-12">
        <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm" style="padding: 0">
          <datepicker
            v-model="formQuery.year"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
            style="width: 150px"
            @update:model-value="fetchListProjectNew"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                lazy-rules
                outlined
                :model-value="
                  formQuery.year === 0
                    ? 'ทั้งหมด'
                    : Number(formQuery.year) + 543
                "
                :label="`${'ปีงบประมาณ'}`"
              >
                <template v-if="formQuery.year" v-slot:append>
                  <q-icon
                    name="cancel"
                    @click.stop.prevent="
                      (formQuery.year = 0), fetchListProjectNew()
                    "
                    class="cursor-pointer"
                  />
                </template>
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
          <q-select
            dense
            outlined
            v-model="formQuery.status"
            :options="statusOpt"
            label="สถานะโครงการ"
            option-label="name"
            option-value="id"
            emit-value
            map-options
            @update:model-value="fetchListProjectNew"
          />

          <q-btn
            v-if="checkPermission($route)?.attrIsCreate"
            flat
            round
            dense
            icon="add"
            color="primary"
            @click="onAdd()"
          >
            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
          </q-btn>

          <q-space />

          <q-btn
            v-if="checkPermission($route)?.attrIsGet"
            flat
            :disable="!formQuery.nodeId"
            round
            dense
            icon="download"
            color="primary"
            @click="onDownload"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>

          <q-input
            standout
            dense
            v-model="formQuery.keyword"
            ref="filterRef"
            outlined
            placeholder="ค้นหา"
            @keyup.enter="fetchListProjectNew"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>

          <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"
          />
        </q-toolbar>

        <div class="col-12">
          <p-table
            for="table"
            ref="table"
            :columns="columns"
            :rows="rows"
            row-key="id"
            flat
            bordered
            dense
            class="custom-header-table"
            :rows-per-page-options="[1, 10, 25, 50, 100]"
            :visible-columns="visibleColumns"
            v-model:pagination="pagination"
            @request="onRequest"
          >
            <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">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td>
                  <q-btn
                    v-if="checkPermission($route)?.attrIsGet"
                    flat
                    round
                    dense
                    color="info"
                    icon="mdi-eye"
                    @click.prevent="onDetail(props.row.id)"
                  >
                    <q-tooltip>รายละเอียด</q-tooltip></q-btn
                  >
                  <q-btn
                    v-if="
                      checkPermission($route)?.attrIsUpdate &&
                      checkPermission($route)?.attrIsGet
                    "
                    flat
                    round
                    dense
                    color="edit"
                    icon="edit"
                    @click.prevent="onClickAddOrView(true, props.row.id)"
                  >
                    <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
                  >
                  <q-btn
                    v-if="checkPermission($route)?.attrIsDelete"
                    flat
                    round
                    dense
                    color="red"
                    icon="delete"
                    @click.prevent="onDelete(props.row.id)"
                  >
                    <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                  >
                  <q-btn
                    v-if="
                      formQuery.status === 'FINISH' &&
                      checkPermission($route)?.attrIsUpdate &&
                      checkPermission($route)?.attrIsGet
                    "
                    flat
                    round
                    dense
                    color="public"
                    icon="mdi-content-save-edit-outline"
                    @click.prevent="onRedirectToRecordPage(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 class="table_ellipsis">
                    {{ col.value ? col.value : "-" }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </p-table>
        </div>
      </div>
    </div>
  </q-card>

  <!-- Popup เพิ่มโครงการ/หลักสูตรการฝึกอบรม -->
  <q-dialog persistent v-model="modal">
    <q-card flat bordered style="min-width: 60vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit()">
        <DialogHeader
          tittle="เพิ่มโครงการ/หลักสูตรการฝึกอบรม"
          :close="closeDialog"
        />
        <q-separator />
        <q-card-section class="q-pa-none">
          <q-splitter v-model="splitterModel" disable>
            <template v-slot:before>
              <q-scroll-area visible style="height: 60vh">
                <div class="q-pa-md">
                  <q-input dense outlined v-model="filter" label="ค้นหา">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                  <q-tree
                    class="q-mt-sm"
                    dense
                    :nodes="node"
                    node-key="orgTreeName"
                    label-key="labelName"
                    v-model:expanded="expandedDialog"
                    :filter="filter.trim()"
                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
                    no-nodes-label="ไม่มีข้อมูล"
                  >
                    <template v-slot:default-header="prop">
                      <q-item
                        clickable
                        @click.stop="updateSelected(prop.node)"
                        :active="formProject.nodeId === prop.node.orgTreeId"
                        active-class="my-list-link text-primary text-weight-medium"
                        class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      >
                        <div>
                          <div class="text-weight-medium">
                            {{ prop.node.orgTreeName }}
                          </div>
                          <div class="text-weight-light text-grey-8">
                            {{
                              prop.node.orgCode == null
                                ? null
                                : prop.node.orgCode
                            }}
                            {{
                              prop.node.orgTreeShortName == null
                                ? null
                                : prop.node.orgTreeShortName
                            }}
                          </div>
                        </div>
                      </q-item>
                    </template>
                  </q-tree>
                </div>
              </q-scroll-area>
            </template>

            <template v-slot:after>
              <div class="row q-col-gutter-sm q-pa-sm">
                <div class="col-12">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="formProject.year"
                    :locale="'th'"
                    autoApply
                    year-picker
                    :enableTimePicker="false"
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        dense
                        hide-bottom-space
                        :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
                        outlined
                        :model-value="
                          formProject.year === null
                            ? null
                            : Number(formProject.year) + 543
                        "
                        :label="`${'ปีงบประมาณ'}`"
                      >
                        <template v-if="formProject.year" v-slot:append>
                          <q-icon
                            name="cancel"
                            @click.stop.prevent="formProject.year = null"
                            class="cursor-pointer"
                          />
                        </template>
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-12">
                  <q-input
                    v-model="formProject.projectName"
                    label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
                    dense
                    outlined
                    hide-bottom-space
                    type="textarea"
                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,]"
                  />
                </div>
              </div>
            </template>
          </q-splitter>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" type="submit" color="public"></q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.table_ellipsis {
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-container {
  overflow: auto;
  height: 75vh;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
}

.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>
