<template>
  <el-dialog :modelValue="show" width="850" :title="title" @close="handleClose">
    <div class="preview-content" style="height: calc(100vh - 182px)">
      <vue-office-docx
        v-if="suffix === 'docx'"
        :src="url"
        style="height: calc(100vh - 182px); width: 810px"
        @rendered="rendered"
      />
      <iframe
        v-else-if="suffix === 'doc'"
        class="child"
        frameborder="0"
        :src="
          'http://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent('http://192.168.1.168' + url)
        "
      />
      <vue-office-pdf
        v-else-if="suffix === 'pdf'"
        :src="url"
        style="height: calc(100vh - 182px)"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <img v-else :src="url" style="min-width: 725px" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'

defineProps({
  show: {
    type: Boolean,
    default: false
  },
  suffix: {
    type: String,
    default: ''
  },
  url: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:show'])

// docx 渲染进度
const rendered = () => {
  console.log('渲染完成')
}

// docx 渲染pdf
const renderedHandler = () => {
  console.log('渲染完成')
}

const errorHandler = () => {
  console.log('渲染完成')
}

const handleClose = () => {
  emits('update:show', false)
}
</script>

<style lang="scss" scoped>
.child {
  width: 100%;
  height: calc(100vh - 182px);
}
.preview-content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 182px);
}
</style>
