<script setup>
import { defineProps, watch, computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const props = defineProps({
  data: Object,
});

const pxRoute = computed(() =>
  route.path === "/dashboard" ? "GraphicM" : "GraphicU"
);

watch(
  () => props.data,
  (newValue) => {
    console.log(newValue, newValue.value.device_number);
  }
);
const device_px_route = computed(() =>
  props.data?.value.device_number.replaceAll("_", "/")
);
</script>

<template>
  <iframe
    v-if="data"
    :src="`/ord?station:%7Cslot:/${device_px_route}|view:${pxRoute}?fullScreen=true`"
    style="width: 500px; height: 350px"
  ></iframe>
</template>

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