<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import VueOfficeDocx from '@vue-office/docx';

import '@vue-office/docx/lib/index.css';

const url = ref('');
const docx = ref<any>('/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx');
const pptStyle = ref({
  height: 'calc(100vh - 100px)',
  width: '100%',
  margin: 'auto',
});
const renderedHandler = () => {
  console.warn('渲染完成');
};
const errorHandler = (err) => {
  console.error(`渲染失败:${err}`);
};
const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onClosed() {
    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      url.value = drawerApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Drawer class="w-[880px]" title="文档预览" :footer="false">
    <VueOfficeDocx
      :src="docx"
      :style="pptStyle"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </Drawer>
</template>
