<template>
  <div class="grafana-iframe-wrapper">
    <Grip class="drag-icon"/>
    <iframe
      v-show="!isDragging"
      ref="grafanaIframe"
      :src="src"
      frameborder=0
      @load="handleIframeLoad"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { Grip } from 'lucide-vue-next';

const { src, isDragging=false } = defineProps<{
  src: string,
  isDragging?: boolean
}>()

const handleIframeLoad = () => {
  console.log('iframe 加载完成');
};
</script>

<style scoped lang="scss">
.grafana-iframe-wrapper {
  width: 100%;  
  height: 100%;
  overflow: hidden;
  position: relative;

  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .drag-icon {
    position: absolute;
    cursor: move;
    z-index: 10;
    size: 5rem;
  }
}
</style>