<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    {{ title }}
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
    <iframe
      :src="panelUrl"
      style="height: 80vh; width: 100%; border: none; overflow: hidden"
    ></iframe>
  </q-card>
</template>
<script setup lang="ts">
import config from "@/app.config";
import { ref, onBeforeMount, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const panelUrl = ref<string>("");
const titleArr = ref<any[]>([
  {
    id: "dashboardOrg",
    name: "สถิติโครงสร้างและกรอบอัตรากำลัง",
    panelUrl: config.API.dashboardPanelOrg,
  },
  {
    id: "dashboardRegistry",
    name: "สถิติทะเบียนประวัติ",
    panelUrl: config.API.dashboardPanelRegistry,
  },

  {
    id: "dashboardLeave",
    name: "สถิติบันทึกเวลาและการลา",
    panelUrl: config.API.dashboardPanelLeave,
  },
  {
    id: "dashboardPlacement",
    name: "สถิติการบรรจุ แต่งตั้ง ย้าย โอน",
    panelUrl: config.API.dashboardPanelPlacement,
  },
  {
    id: "dashboardRetire",
    name: "สถิติการพ้นจากราชการ",
    panelUrl: config.API.dashboardPanelRetire,
  },
  {
    id: "dashboardDiscipline",
    name: "สถิติการดำเนินการทางวินัย",
    panelUrl: config.API.dashboardPanelDiscipline,
  },
  {
    id: "dashboardDevelop",
    name: "สถิติพัฒนาบุคลากร/การศึกษาต่อ",
    panelUrl: config.API.dashboardPanelDevelop,
  },
  {
    id: "dashboardSalary",
    name: "สถิติเงินเดือน/ค่าจ้าง",
    panelUrl: config.API.dashboardPanelSalary,
  },
  {
    id: "dashboardKpi",
    name: "สถิติประเมินผลการปฏิบัติราชการระดับบุคคล",
    panelUrl: config.API.dashboardPanelKPI,
  },
]);
const title = ref<string>("");

// onBeforeMount(async () => {
//   panelUrl.value = config.dashboardPanelUrl;
// });

onMounted(async () => {
  const data = await titleArr.value.find((item: any) => item.id === route.name);
  title.value = data?.name;
  panelUrl.value = data?.panelUrl;
});
</script>

<style></style>
