<template>
	<view style="height: 100vh;background-color: #fff;">
		<view class="title_style">
			{{arrayInfo.title}}
		</view>
		<view class="date_style">
			{{arrayInfo.update_time}}
		</view>

		<view class="url_style" v-if="arrayInfo.type == 1 && empty(arrayInfo.url)">
			<video style="margin: auto;" :src="arrayInfo.url" :enable-progress-gesture="true"
				:show-fullscreen-btn="true" :show-play-btn="true" @error="onVideoError" @play="onPlay"
				@pause="onPause" />
		</view>

		<view class="url_image_style" v-if="arrayInfo.type == 3 && empty(arrayInfo.url)">
			<image :src="arrayInfo.url" mode="aspectFill" @click="clickPreviewImage(arrayInfo.url)"
				style="width: 80%;margin: auto;">
			</image>
		</view>

		<view class="url_file_style" v-if="arrayInfo.type == 2 && empty(arrayInfo.url)">
			<a style="cursor: pointer;color: blue;" @click="previewFile(arrayInfo.url)">素材文件</a>
		</view>

		<view class="con_style" v-html="arrayInfo.content"></view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				articleId: undefined,
				arrayInfo: [],
			}
		},
		onLoad(options) {
			this.articleId = options.id;
			console.log(this.articleId, 888)
			this.init()
		},
		methods: {
			init() {
				apiRoute.teachingResearchInfo(this.articleId).then(res => {
					if (res.code == 1) {
						this.arrayInfo = res.data
					}
				})
			},
			clickPreviewImage(url) {
				uni.previewImage({
					urls: [url], // 支持多张图预览
					current: url, // 当前显示的图片链接
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.error('预览失败', err);
					}
				});
			},
			async previewFile(url) {
				try {
					// 1. 下载文件到本地
					const {
						tempFilePath
					} = await this.downloadFile(url);

					// 2. 打开文件
					await uni.openDocument({
						filePath: tempFilePath,
						showMenu: true,
						success: () => {
							console.log('打开文档成功');
						}
					});
				} catch (err) {
					uni.showToast({
						title: '预览失败',
						icon: 'none'
					});
					console.error('预览失败:', err);
				}
			},

			downloadFile(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res);
							} else {
								reject(new Error('下载失败'));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			}
		}
	}
</script>

<style>
	.title_style {
		width: 100%;
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		padding-top: 10px;
	}

	.date_style {
		width: 100%;
		text-align: right;
		font-size: 20rpx;
		color: #ccc;
		padding-right: 16rpx;
		margin-top: 10px;
	}

	.con_style {
		font-size: 30rpx;
		padding: 18rpx;
		margin-top: 20px;
	}

	.url_style {
		margin-top: 20px;
		text-align: center;
	}

	.url_image_style {
		padding: 20rpx;
		text-align: center;
	}
	
	.url_file_style{
		padding: 20rpx;
	}
</style>