<template>
  <div id="viewer-host">
    <ReportViewer ref="viewRef" language="zh" />
  </div>
</template>
<script lang="ts" setup>
  import { Viewer as ReportViewer } from '@grapecity/activereports-vue';
  import '@grapecity/activereports/styles/ar-js-ui.css';
  import '@grapecity/activereports/styles/ar-js-viewer.css';
  import '@grapecity/activereports/pdfexport';
  import '@grapecity/activereports/htmlexport';
  import '@grapecity/activereports/xlsxexport';

  import '@grapecity/activereports-localization/dist/designer/zh-locale';

  import { onMounted, ref } from 'vue';

  const viewRef = ref();
  let props = defineProps({
    content: String,
  });
  onMounted(() => {
    if (props.content) {
      let reportObj = JSON.parse(props.content);
      viewRef.value.Viewer().open(reportObj.definition);
    }
  });
</script>
<style>
  #viewer-host {
    position: fixed;
    inset: 0;
  }
</style>
