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

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 drawerRef = ref<InstanceType<typeof FilePreviewDialog> | null>(null)
const dialogRef = ref<InstanceType<typeof FilePreviewDialog> | null>(null)

function openDrawer(file: (typeof testFiles)[number]) {
  drawerRef.value?.open({ path: file.path, name: file.name })
}

function openDialog(file: (typeof testFiles)[number]) {
  dialogRef.value?.open({ path: file.path, name: file.name })
}
</script>

<template>
  <div class="test-page">
    <p class="test-title">
      抽屉模式（drawer）
    </p>
    <div class="test-btns">
      <button
        v-for="file in testFiles"
        :key="`drawer-${file.path}`"
        class="test-btn"
        @click="openDrawer(file)"
      >
        {{ file.name }}
      </button>
    </div>

    <p class="test-title">
      弹窗模式（dialog）
    </p>
    <div class="test-btns">
      <button
        v-for="file in testFiles"
        :key="`dialog-${file.path}`"
        class="test-btn test-btn--dialog"
        @click="openDialog(file)"
      >
        {{ file.name }}
      </button>
    </div>

    <!-- 抽屉实例 -->
    <FilePreviewDialog ref="drawerRef" mode="drawer" />
    <!-- 弹窗实例 -->
    <FilePreviewDialog ref="dialogRef" mode="dialog" />
  </div>
</template>

<style scoped>
.test-page {
  padding: 24px 16px;
}

.test-title {
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 10px;
  color: #333;
}

.test-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-btn {
  padding: 12px 16px;
  background: #1677ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.test-btn--dialog {
  background: #52c41a;
}
</style>
