<template>
  <el-dialog
      title="文档预览"
      v-model="state.showPreview"
      fullscreen
      destroy-on-close
      append-to-body
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="viewer-header">
        <h4 :id='titleId' :class="titleClass">{{ name }}  <span v-if="state.docViewer||state.xlsViewer">[兼容模式]</span></h4>

        <el-button plain  type="danger" @click="close">
          <SvgIcon name="ele-CircleCloseFilled"/>关闭
        </el-button>
      </div>
    </template>
    <div class="doc-viewer" v-if="state.docViewer||state.xlsViewer">
      <iframe  title="文档预览" id="docViewer-viewer" ref="frame11" :src="props.url" class="iframe-viewer" :height="state.iframeHeight"/>
<!--      <p v-html="state.content"></p>-->
    </div>
<!--    <div class="xls-viewer" v-if="state.xlsViewer">
      <p v-html="state.content"></p>
    </div>-->
    <iframe v-if="!state.docViewer&&!state.xlsViewer" title="文档预览" id="iframe-viewer" ref="frame" :src="src" class="iframe-viewer" :height="state.iframeHeight"/>
  </el-dialog>

</template>

<script setup lang="ts" name="Preview">
import {computed, nextTick, onMounted, onBeforeUnmount, ref, reactive} from "vue";

const props = defineProps<{
  url: string,
  file?: File,
  name: string,
}>()


const state = reactive({
  showPreview: false,
  iframeHeight: 950,
  docViewer: false,
  xlsViewer: false,
  content:''
})

// iframe引用
const frame = ref<HTMLIFrameElement>();
// iframe路径指向构建产物，这里是/，因为放在了public下面
// 如果使用cdn，请使用http://viewer.flyfish.group
const source = '/file-viewer3/index.html'
// 查看器的源，当前示例为本源，指定为location.origin即可
const viewerOrigin = location.origin;
// 构建完整url
const src = computed(() => {
  // 文件名称，建议传递，提高体验性
  const name = props.name || '';
  if (props.url) {
    // 直接拼接url
    return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
  } else if (props.file) {
    // 直接拼接来源origin
    return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
  } else {
    return source;
  }
})

// 发送文件数据
const handlePreview = () => {
  nextTick(() => {
    state.showPreview = true;
    if(state.xlsViewer||state.docViewer){
      console.log("handlePreview xxx")
     /* $get(props.url).then((res:any)=>{
        state.content = res;
      })*/
    }else{
      let clientHeight = document.body.clientHeight;
      console.log(clientHeight, clientHeight - 130)

      state.iframeHeight = clientHeight - 130


      const viewer = frame.value;
      if (!viewer || !props.file) return;

      viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
    }

  })
}

onMounted(() => {
  let suffix = props.name.substring(props.name.lastIndexOf(".")).toLowerCase();
  if (suffix.endsWith(".xls")) {
    state.xlsViewer = true;
  }

  if (suffix.endsWith(".doc")) {
    state.docViewer = true;
  }

})

onBeforeUnmount(() => {
  state.xlsViewer = false;
  state.docViewer = false;
})

// 暴露变量
defineExpose({
  handlePreview
});


</script>


<style scoped lang="scss">
.viewer-header {
  height: 48px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.iframe-viewer {
  //height: calc(100vh - 2px);
  width: 100%;
  border: 0;

  html {
    overflow-y: hidden;
  }
}

.xls-viewer {
  table {
    margin: 0 auto;
    border: 1px solid #000000;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #000000;
    text-align: center;
  }

  overflow-x: scroll;
}
</style>

