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

import { useRoute } from "vue-router";
import { useMenuDataStore } from "@/stores/menuList";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import env from "@/api/index";

import type { ListMenu } from "@/interface/response/main";

const $q = useQuasar();
const route = useRoute();
const storeMenu = useMenuDataStore();
const { messageError } = useCounterMixin();

const panelUrl = ref<string>("");
const title = ref<string>("");

/** function fetch รายการเมนูทั้งหมด*/
async function fetchSys() {
  if (storeMenu.menuList.length !== 0) {
    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}/d/${data?.sysDescription}`;
  }
}
watch(
  () => storeMenu.menuList,
  () => {
    fetchSys();
  }
);

onMounted(() => {
  fetchSys();
});
</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>
