<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useMenuDataStore } from "@/stores/menuList";
import env from "@/api/index";
import type { ListMenu } from "@/interface/response/main";

const storeMenu = useMenuDataStore();
const route = useRoute();
const panelUrl = ref<string>("");
const title = ref<string>("");

onMounted(async () => {
  const menuDashboard = await storeMenu.menuList.find(
    (x: ListMenu) => x.id === "DASHBOARD"
  );

  const data = await menuDashboard?.children?.find(
    (item: ListMenu) => item.path === route.name
  );
  title.value = `สถิติ${data?.sysName}`;
  panelUrl.value = `${env.DASHBOARD_URL}/goto/${data?.sysDescription}`;
});
</script>

<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>

<style></style>
