<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '在线预览',
	},
	}
</route>
<template>
	<PageLayout navTitle="在线预览">
		<view class="serveBox">
			<view class="title">
				<view class="dot"></view>
				<wd-text text="文件预览"></wd-text>
			</view>
			<view v-if="ifH5">
				<!-- 在线预览 by 闵 -->
				<wd-text color="#1890ff" lines=1 style="font-size: 40rpx;padding-left: 25rpx;padding-top: 25rpx;"
					decoration="underline"
					@click="onlinePreview(`/pages/onlinePreview/onlinePreviewH5?data=${JSON.stringify(item)}`)"
					v-for="item,i in detailArr" :text="captureText(item)">
				</wd-text>
			</view>
			<view v-else>
				<!-- 在线预览 by 闵 -->
				<wd-text color="#1890ff" lines=1 style="font-size: 40rpx;padding-left: 25rpx;padding-top: 25rpx;"
					decoration="underline"
					@click="onlinePreview(`/pages/onlinePreview/onlinePreview?data=${JSON.stringify(item)}`)"
					v-for="item,i in detailArr" :text="captureText(item)">
				</wd-text>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const detail = ref({})
	const detailArr = ref([])
	//判断是否h5 by 闵
	var ifH5 = false;
	const onlinePreview = (url) => { //在线预览文件 by 闵
		uni.navigateTo({
			url: url
		})
	}

	const captureText = (text) => { //截取字符串显示
		const match = text.match(/\/([^_]+)(?=_)/);
		console.log(match)
		return match ? match[1] : '';
	}

	onLoad((options) => {
		detail.value = options.data
		detailArr.value = options.data.split(",");
		//#ifdef H5 || MP-WEIXIN
		ifH5 = true;
		//#endif
		//判断是否只有一个文件
		if (detailArr.value && detailArr.value.length == 1) {
			let url = '/pages/onlinePreview/onlinePreview';
			if (ifH5) url = '/pages/onlinePreview/onlinePreviewH5'
			onlinePreview(url + `?data=${JSON.stringify(options.data)}`);
		}
	})
</script>

<style>
	/* page{
		background-color: #f8f8f8;
	} */
</style>
<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
	}

	.title_box {

		.title {
			font-size: 32rpx;
			color: #333333;
			padding: 30rpx 0 20rpx 0;
		}

		.time {
			font-size: 24rpx;
			color: #888888;
			padding-bottom: 30rpx;
		}
	}

	.document {
		text {
			font-size: 28rpx;
			color: #333333;
			white-space: nowrap;
		}

		view {
			font-size: 28rpx;
			color: #5A79F8;
			text-decoration: underline;
		}
	}

	.serveBox {
		margin-bottom: 32upx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			padding-left: 30upx;
			height: 52px;

			.dot {
				width: 14upx;
				height: 14upx;
				background-color: #0081ff;
				border-radius: 100%;
				margin-right: 20upx;
			}

			.wd-text {
				color: #666;
				font-size: 15px;
			}
		}
	}
</style>