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

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

import VueOfficeDocx from '@vue-office/docx';
import { message } from 'ant-design-vue';

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

// const url = ref('');
const isLoading = ref(false); // 新增：加载状态变量
const docx = ref<any>();
const pptStyle = ref({
  height: 'calc(100vh - 100px)',
  width: '100%',
  margin: 'auto',
});
const renderedHandler = () => {
  isLoading.value = false; // 文档渲染完成，关闭加载状态
  message.success('渲染完成');
};
const errorHandler = () => {
  isLoading.value = false; // 出错时也关闭加载状态
  message.error('渲染失败');
};
const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onClosed() {
    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = drawerApi.getData<Record<string, any>>();
      if (data) {
        isLoading.value = true;
        // docx.value = `/spider/${data}`; // 更新 docx 的值
        docx.value = data; // 更新 docx 的值
      }
      // url.value = drawerApi.getData<Record<string, any>>();
    }
  },
});
</script>
<template>
  <Drawer class="w-[880px]" title="文档预览" :footer="false">
    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
    <VueOfficeDocx
      :src="docx"
      :style="pptStyle"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </Drawer>
</template>
