<template>
  <a-card :bordered="false">
    <a-row>
      <!-- 左侧文件树 -->
      <a-col :span="4" class="clName">
        <a-tree :treeData="treeData" :defaultExpandAll="true" @select="onSelect" style="height: 500px; overflow-y: auto"> </a-tree>
      </a-col>
      <!--右侧缩略图-->
      <a-col :span="18">
        <div v-for="(file, key) in dataSource" :key="key">
          <a-col :span="24">
            <a-divider orientation="left">{{ file.fileName }}</a-divider>
          </a-col>
          <!-- 预览区域 -->
          <a-col :span="24">
            <template v-if="file.filePdfPath">
              <div @click="pdfPreview(file.title)">
                <img style="width: 80px; height: 80px" src="../../../assets/images/pdf4.jpg" />
              </div>
            </template>
            <template v-else> (暂无材料，点击"选择文件"或"扫描上传"上传文件) </template>
          </a-col>
        </div>
      </a-col>
    </a-row>
    <div style="display: none">
      <iframe id="pdfPreviewIframe" :src="url" frameborder="0" width="100%" height="550px" scrolling="auto"></iframe>
    </div>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent, ref, unref, onMounted } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getToken } from '/@/utils/auth';

  const mockdata = [
    {
      id: '1',
      key: '1',
      title: '实例.pdf',
      fileCode: 'shili',
      fileName: '实例',
      filePdfPath: '实例',
    },
  ];

  export default defineComponent({
    name: 'JeecgPdfView',
    setup() {
      const glob = useGlobSetting();
      const treeData = ref([
        {
          title: '所有PDF电子档',
          key: '0-0',
          children: mockdata,
        },
      ]);
      const dataSource = ref(mockdata);
      const allData = ref(mockdata);
      const url = ref(`${glob.domainUrl}/sys/common/pdf/pdfPreviewIframe`);

      /**
       * 打开iframe窗口
       * @param title
       */
      function pdfPreview(title) {
        let iframe = document.getElementById('pdfPreviewIframe');
        let json = { title: title, token: getToken() };
        iframe.contentWindow.postMessage(json, '*');
      }

      // 选择PDF文件
      function onSelect(selectedKeys, info) {
        dataSource.value = [];
        if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
          dataSource.value = unref(allData);
        } else {
          dataSource.value.push(info.node.dataRef);
        }
      }

      return {
        url,
        dataSource,
        treeData,
        allData,
        onSelect,
        pdfPreview,
      };
    },
  });
</script>