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

import { useRoute } from "vue-router";
import { useDataStore } from "@/modules/03_logs/stores/main";

/** importComponents*/
import CardComponents from "@/modules/03_logs/components/CardComponents.vue"; // card เมนูระบบ
import LogTable from "@/modules/03_logs/components/LogTable.vue"; // Table

/** use*/
const route = useRoute();
const $q = useQuasar();
const storeData = useDataStore();
const { size, systemName, date } = storeToRefs(storeData);

const title = ref<string>(""); //ชื่อระบบ

// รายการเมนูระบบ
const menuList = ref<{ icon: string; label: string; path: string }[]>([
  {
    icon: "mdi-file-account-outline",
    label: "ระบบทะเบียนประวัติ",
    path: "/logs?system=registry",
  },
  {
    icon: "mdi-account-group",
    label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
    path: "/logs?system=organization",
  },
  {
    icon: "mdi-calendar",
    label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
    path: "/logs?system=leave",
  },
  {
    icon: "mdi-magnify",
    label: "ระบบการสรรหาบุคคล",
    path: "/logs?system=recruiting",
  },
  {
    icon: "mdi-account-check-outline",
    label: "ระบบการประเมินบุคคล",
    path: "/logs?system=evaluation",
  },
  {
    icon: "mdi-account-cancel-outline",
    label: "ระบบพ้นจากราชการ",
    path: "/logs?system=retirement",
  },
  {
    icon: "mdi-cash",
    label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
    path: "/logs?system=salary",
  },
  {
    icon: "mdi-account-check-outline",
    label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
    path: "/logs?system=placement",
  },
  {
    icon: "mdi-account-convert",
    label: "ระบบทดลองปฏิบัติหน้าที่ราชการ",
    path: "/logs?system=probation",
  },
  {
    icon: "mdi-account-star",
    label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
    path: "/logs?system=KPI",
  },
  {
    icon: "mdi-briefcase-account",
    label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
    path: "/logs?system=development",
  },
  {
    icon: "mdi-medal-outline",
    label: "ระบบงานเครื่องราชอิสริยาภรณ์",
    path: "/logs?system=insignia",
  },

  {
    icon: "mdi-scale-balance",
    label: "ระบบดำเนินการทางวินัย",
    path: "/logs?system=discipline",
  },

  {
    icon: "mdi-account-settings-outline",
    label: "ระบบข้อมูลหลัก",
    path: "/logs?system=master",
  },
  {
    icon: "mdi-account-child-circle",
    label: "ระบบ Admin",
    path: "/logs?system=admin",
  },
  {
    icon: "mdi-account-arrow-right",
    label: "การเข้าใช้งานและการออกจากระบบ",
    path: "/logs?system=inout",
  },
]);

onMounted(async () => {
  storeData.logData = await [];
  // await storeData.fetchLog({
  //   size: size.value,
  //   systemName: systemName.value ?? undefined,
  //   date: date.value[0],
  // });
  if (route.query.system) {
    const a = menuList.value.find((v) => {
      if (v.path.includes(route.fullPath)) {
        title.value = v.label;
      }
    });
  }
});
</script>

<template>
  <div class="row q-mb-lg">
    <q-btn
      flat
      v-if="route.query.system"
      round
      class="q-mr-sm"
      color="primary"
      icon="mdi-arrow-left"
      dense
      to="logs"
    >
    </q-btn>
    <div class="row items-center">
      <span
        class="text-bold text-h6 text-dark items-center q-mr-md"
        :class="!route.query.system ? 'q-ml-lg' : ''"
      >
        ประวัติกิจกรรม (Logs)
      </span>
      <div
        v-if="route.query.system"
        class="text-bold text-h6 text-primary items-center"
      >
        {{ title }}
      </div>
    </div>
  </div>

  <div v-if="!route.query.system" class="row q-col-gutter-lg full-width">
    <div
      :class="$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-4' : 'col-6'"
      :key="index"
      v-for="(item, index) in menuList"
    >
      <CardComponents
        class="cursor-pointer"
        @click="
          () => {
            $router.push(item.path);
            title = item.label;
          }
        "
        :index="index"
        :icon="item.icon"
        :label="item.label"
      />
    </div>
  </div>

  <div v-if="route.query.system">
    <LogTable />
  </div>
</template>

<style scoped lang="scss"></style>
