<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import { useTheme } from '@/composables/useTheme'
import { getPost, type Post } from '@/api'
import { showUnsupported } from '@/utils/unsupported'

const { isDark } = useTheme()
const rootClass = computed(() => ['page-root', isDark.value ? 'theme-dark' : ''])
const postId = ref('')
const post = ref<Post | null>(null)

/** 拉文章用于 PPT 预览入口 */
async function loadDetail() {
  if (!postId.value) return
  try {
    post.value = await getPost(postId.value)
    if (!(post.value as { presentation?: unknown }).presentation) {
      showUnsupported('PPT 预览')
    }
  }
  catch {
    showUnsupported('PPT 预览')
  }
}

onLoad((q) => {
  postId.value = String(q?.id || '')
  loadDetail()
})

onPullDownRefresh(async () => {
  try {
    await loadDetail()
  }
  finally {
    uni.stopPullDownRefresh()
  }
})
</script>

<template>
  <view :class="rootClass">
    <AppNavbar title="PPT 预览" show-back />
    <view class="page-pad">
      <view class="section-title">{{ post?.title || 'PPT' }}</view>
      <view class="tip text-art-muted">结构化 PPT 演示在小程序端能力受限。可点击下方按钮了解。</view>
      <wd-button block custom-style="margin-top:24px;background:#d4b383;border:none;" @click="showUnsupported('结构化 PPT / 导出')">
        打开完整 PPT 能力
      </wd-button>
    </view>
    <wd-toast /><wd-dialog />
  </view>
</template>

<style scoped>
.page-pad { padding: 32rpx; }
.tip { margin-top: 24rpx; line-height: 1.7; font-size: 28rpx; }
</style>
