<template>
  <a-drawer
    :title="fileTitle"
    placement="left"
    :width="drawerWidth"
    :closable="true"
    :visible="showDrawer"
    @close="closeDrawer"
    :mask="false"
  >
    <template #extra>
      <a-space wrap>
        <a-button type="link" v-show="isFullScreen" block @click="setDrawerFull">
          <FullscreenOutlined />
        </a-button>
        <a-button type="link" v-show="!isFullScreen" block @click="setDrawerFull">
          <FullscreenExitOutlined />
        </a-button>
        <a-button type="link" block @click="closeDrawer">
          <CloseOutlined />
        </a-button>
      </a-space>
    </template>

    <div v-if="showTitle" style="margin-bottom: 10px; font-weight: bold;">{{ fileTitle }}</div>
    <FileViewer 
      ref="refFileViewer" 
      :showTitle="false" 
      :useStaticPrefixForDocx="useStaticPrefixForDocx" 
      :bordered="false"
      :bodyStyle="{ height: 'calc(100vh - 120px)' }"
    />
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import FileViewer from './FileViewer.vue';

  const props = withDefaults(defineProps<{
    showTitle?: boolean;
    useStaticPrefixForDocx?: boolean;
    fixedFiles?: Record<string, any>;
  }>(), {
    showTitle: true,
    useStaticPrefixForDocx: false,
    fixedFiles: () => ({}),
  });

  const refFileViewer = ref();
  const showDrawer = ref(false);
  const fileTitle = ref('文件名称');
  const drawerWidth = ref('50%');
  const isFullScreen = ref(false);

  function closeDrawer() {
    showDrawer.value = false;
  }

  async function showCurFile(fileData) {
    fileTitle.value = '文件名：' + (fileData.fileName || '');
    showDrawer.value = true;
    refFileViewer.value.setDocFile(fileData);
  }

  function setDocFile(fileDataOrType) {
    if (typeof fileDataOrType === 'string' || typeof fileDataOrType === 'number') {
      const fixedFile = props.fixedFiles[fileDataOrType];
      if (fixedFile) {
        showCurFile(fixedFile);
      }
    } else {
      showCurFile(fileDataOrType);
    }
  }

  function setDrawerFull() {
    isFullScreen.value = !isFullScreen.value;
    drawerWidth.value = isFullScreen.value ? '100%' : '50%';
  }

  defineExpose({
    setDocFile,
  });
</script>

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