<script setup lang="ts">
import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
import { nextTick, onMounted, ref } from 'vue'

const previewDocType = ref('png')
const previewDocUrl = ref('/resource/af-safecheck/images/92fde63667ec43b7a2d67f423624fccf.png')

const testFiles = [
  {
    name: '图片.png',
    path: '/resource/af-safecheck/images/92fde63667ec43b7a2d67f423624fccf.png',
  },
  {
    name: 'Word2003.doc',
    path: '/resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc',
  },
  {
    name: 'Word.docx',
    path: '/resource/af-revenue/word/46a87ec0a05143f98061a1ba43f19ed2.docx',
  },
  {
    name: 'Excel.xlsx',
    path: '/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx',
  },
]

const filePreviewRef = ref<InstanceType<typeof FilePreview> | null>(null)

/**
 * 切换预览文件
 */
async function previewFile(file: (typeof testFiles)[number]) {
  previewDocUrl.value = file.path
  previewDocType.value = file.name.split('.').pop()?.toLowerCase() || ''

  // 等待 FilePreview 根据 key 重新创建
  await nextTick()

  filePreviewRef.value?.init({
    path: file.path,
    name: file.name,
  })
}

onMounted(() => {
  previewFile(testFiles[0])
})
</script>

<template>
  <div>
    <div class="toolbar">
      <button
        v-for="file in testFiles"
        :key="file.path"
        class="toolbar-btn"
        @click="previewFile(file)"
      >
        {{ file.name }}
      </button>
    </div>

    <FilePreview
      ref="filePreviewRef"
      :key="`${previewDocType}-${previewDocUrl}`"
      class="doc-preview-file"
    />
  </div>
</template>

<style scoped lang="less">
.toolbar {
  margin-bottom: 12px;
}

.toolbar-btn {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.doc-preview-file {
  height: 80vh;
}
</style>
