<template>
	<view class="content_box">
		<!-- 图片列表 -->
		<view class="file-list flex_col" v-if="imgs.length">
			<view class="font_bolder" style="margin: 30rpx 0 20rpx 20rpx">附件图片</view>
			<view class="file-content flex flex_wrap">
				<view class="file-item flex_col" v-for="(img,index) in imgs" :key="index">
					<image class="previewFile" mode="aspectFill" :src="img.filePath" @click="onPreviewImage(index)" />
					<text class="file-title ">{{img.fileName}}</text>
				</view>
			</view>
		</view>
		<!-- 文件列表 -->
		<view class="file-list flex_col" v-if="files.length">
			<view class="font_bolder" style="margin: 30rpx 0 20rpx 20rpx">附件文件</view>
			<view class="file-content flex flex_wrap">
				<view class="file-item flex_col" v-for="(file,idx) in files" :key="idx">
					<image class="previewFile" mode="aspectFill" src="../../static/img/fileIcon/pdf.png"
						@click="onPreviewFile(file)" />
					<text class="file-title">{{file.fileName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs: [], //图片列表
				files: [], //文件列表						
			}
		},
		onLoad(options) {
			const files = JSON.parse(options.files) || [] //files: [{filePath, fileName, fileType}]
			const imgTypes = ['jpg', 'jpeg']
			let imgs = []
			let newFiles = []
			files.map(file => {
				if (imgTypes.includes(file.fileType)) { //图片类型文件单独分组
					imgs.push(file)
				} else {
					newFiles.push(file)
				}
			})
			this.imgs = imgs
			this.files = newFiles
		},
		methods: {
			//图片预览
			onPreviewImage(index) {
				const imgPaths = this.imgs.map(img => img.filePath)
				uni.previewImage({
					current: index,
					urls: imgPaths
				})
			},

			//文件预览
			onPreviewFile(fileInfo) {
				const {fileId, fileType, filePath} = fileInfo
				
				//H5平台使用
				// #ifdef H5
				uni.navigateTo({
					url: `/subpkg/previewFile/previewPage?filePath=${filePath}`,
				})
				// #endif
				
				//非H5平台使用
				// #ifndef H5
				const platform = uni.getSystemInfoSync().platform //判断平台,安卓调用原生接口,IOS跳转WebView				
				if (platform === 'ios' || platform === 'devtools') {
					uni.navigateTo({
						url: `/subpkg/previewFile/previewWebView?fileId=${fileId}`,
					})
				} else { 
					uni.openDocument({
						filePath: filePath,
						fileType: fileType,
						showMenu: true, //右上角是否有可以转发分享的功能，仅微信小程序支持
					})		
				}							
				// #endif						
			},
		}
	}
</script>

<style lang="scss">
	.file-list {
		display: flex;

		.file-item {
			align-items: center;
			margin: 15rpx;

			.file-title {
				font-size: 28rpx;
			}

			.previewFile {
				margin-bottom: 20rpx;
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>
