<template>
	<view class="status-bar"></view>

	<view class="wyxd-container page-container">
		<!-- ===== 顶部导航栏 ===== -->
		<view class="wyxd-header">
			<view class="custom-navbar">
				<view class="navbar-left" @click="goBack">
					<view class="iconfont icon-fanhui custom-navbar-icon"></view>
					<view class="navbar-before-title workspace-text">返回</view>
				</view>
				<view class="navbar-title workspace-text">{{ displayName }}</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- ===== 主舞台 ===== -->
		<view class="wyxd-content">
			<!-- 加载中 / 错误状态 -->
			<view v-if="loading || errorMsg" class="wyxd-state">
				<view class="iconfont wyxd-state-icon"
					:class="errorMsg ? 'icon-quxiao' : 'icon-sousuo'"></view>
				<view class="wyxd-state-title">{{ errorMsg || statusText }}</view>
				<view v-if="errorMsg" class="wyxd-state-desc">请返回重试</view>
			</view>

			<!-- 无内容 -->
			<view v-else-if="!slides.length" class="wyxd-state">
				<view class="iconfont icon-wenjianjia wyxd-state-icon"></view>
				<view class="wyxd-state-title">暂无内容</view>
			</view>

			<!-- 幻灯片 -->
			<view v-else class="wyxd-slide-area">
				<scroll-view class="wyxd-slide-scroll" scroll-y :show-scrollbar="false">
					<view class="wyxd-slide-card" v-html="currentSlide.html"></view>
				</scroll-view>
			</view>
		</view>

		<!-- ===== 底部翻页 ===== -->
		<view class="wyxd-pager" v-if="slides.length > 1">
			<view class="wyxd-pager-inner">
				<view class="wyxd-nav-btn" :class="{ disabled: currentIndex <= 0 }" @click="prevSlide">
					<view class="iconfont icon-fanhui" style="font-size:24rpx;"></view>
				</view>
				<view class="wyxd-page-indicator">
					<text class="wyxd-current">{{ pad(currentIndex + 1) }}</text>
					<text class="wyxd-divider">/</text>
					<text class="wyxd-total">{{ pad(slides.length) }}</text>
				</view>
				<view class="wyxd-nav-btn" :class="{ disabled: currentIndex >= slides.length - 1 }" @click="nextSlide">
					<view class="iconfont icon-fanhui" style="transform:rotate(180deg);font-size:24rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
	isWyxdCached, getCachedWyxd, setCachedWyxd,
	downloadWyxdAsZip, extractWyxd, parseSlides
} from '@/utils/wyxd-parser.js'

const workspaceId = ref('')
const filePath = ref('')
const fileName = ref('')
const userToken = ref('')

const slides = ref([])
const currentIndex = ref(0)

const status = ref('')
const loading = ref(false)
const errorMsg = ref('')

const statusText = computed(() => {
	const map = {
		downloading: '下载中...',
		extracting: '解压中...',
		parsing: '解析中...',
		error: '加载失败'
	}
	return map[status.value] || '处理中...'
})

const displayName = computed(() => fileName.value || '未命名文档')

const currentSlide = computed(() => slides.value[currentIndex.value] || { html: '' })

const pad = (n) => String(n).padStart(2, '0')

const goBack = () => {
	uni.navigateBack()
}

const prevSlide = () => {
	if (currentIndex.value > 0) currentIndex.value--
}

const nextSlide = () => {
	if (currentIndex.value < slides.value.length - 1) currentIndex.value++
}

const loadFromCache = () => {
	const cached = getCachedWyxd(workspaceId.value, filePath.value)
	if (!cached || !cached.slides || cached.slides.length === 0) {
		startDownload()
		return
	}
	slides.value = cached.slides
	currentIndex.value = 0
	loading.value = false
	errorMsg.value = ''
	status.value = ''
}

const startDownload = async () => {
	if (!userToken.value || !workspaceId.value || !filePath.value) {
		errorMsg.value = '缺少必要参数'
		status.value = 'error'
		return
	}
	try {
		loading.value = true
		errorMsg.value = ''
		slides.value = []
		currentIndex.value = 0

		status.value = 'downloading'
		console.log("userToken.value",userToken.value);
		console.log("workspaceId.value",workspaceId.value);
		console.log("filePath.value",filePath.value);
		const tempPath = await downloadWyxdAsZip(
			userToken.value, workspaceId.value, filePath.value
		)
		console.log("获取到的下载地址：",tempPath);

		status.value = 'extracting'
		const extracted = await extractWyxd(tempPath)
		console.log("extracted",extracted);

		status.value = 'parsing'
		const slideList = parseSlides(extracted.html, extracted.header, extracted.images)

		if (!slideList || slideList.length === 0) {
			throw new Error('无法解析文档内容')
		}

		slides.value = slideList
		currentIndex.value = 0
		loading.value = false
		status.value = ''

		setCachedWyxd(workspaceId.value, filePath.value, {
			fileName: fileName.value,
			slides: slideList
		})
	} catch (err) {
		loading.value = false
		status.value = 'error'
		const msg = typeof err === 'string' ? err : (err.message || '下载失败')
		errorMsg.value = msg
		console.error('[WYXD] download error:', err)
	}
}

onLoad((options) => {
	workspaceId.value = options.workspaceId || ''
	filePath.value = options?.filePath ? decodeURIComponent(options.filePath) : ''
	  fileName.value = options?.fileName ? decodeURIComponent(options.fileName) : '未命名文档'
	  userToken.value = options?.userToken ?? uni.getStorageSync('user_token') ?? ''
	console.log('页面接收options原始参数：', options)
	console.log('最终赋值变量：', {
	  workspaceId: workspaceId.value,
	  filePath: filePath.value,
	  fileName: fileName.value,
	  userToken: userToken.value
	})

	if (isWyxdCached(workspaceId.value, filePath.value)) {
		loadFromCache()
	} else {
		startDownload()
	}
})
</script>

<style scoped>
@import url("@/pages/WorkSpace/WorkSpace.css");

.wyxd-container {
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
	overflow: hidden;
}

.wyxd-header {
	flex-shrink: 0;
	background: #fff;
}

.wyxd-content {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ===== 状态占位 ===== */
.wyxd-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.wyxd-state-icon {
	font-size: 80rpx;
	color: #ccc;
	margin-bottom: 20rpx;
}

.wyxd-state-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #666;
	margin-bottom: 8rpx;
}

.wyxd-state-desc {
	font-size: 24rpx;
	color: #999;
}

/* ===== 幻灯片区域 ===== */
.wyxd-slide-area {
	flex: 1;
	min-height: 0;
	padding: 20rpx;
}

.wyxd-slide-scroll {
	height: 100%;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.wyxd-slide-card {
	padding: 32rpx;
	min-height: 100%;
	box-sizing: border-box;
}

/* ===== 底部翻页 ===== */
.wyxd-pager {
	flex-shrink: 0;
	background: #fff;
	border-top: 1rpx solid #eee;
	padding: 16rpx 0;
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}

.wyxd-pager-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wyxd-nav-btn {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 32rpx;
	background: #f5f5f5;
	margin: 0 32rpx;
}

.wyxd-nav-btn:active {
	background: #e0e0e0;
}

.wyxd-nav-btn.disabled {
	opacity: 0.3;
	pointer-events: none;
}

.wyxd-page-indicator {
	font-size: 26rpx;
	color: #666;
	display: flex;
	align-items: center;
}

.wyxd-current {
	color: #3b82f6;
	font-weight: 700;
}

.wyxd-divider {
	margin: 0 8rpx;
	color: #ccc;
}

.wyxd-total {
	color: #999;
}
</style>
