<template>
	<view class="flex gap-8 wrap">
		<view v-for="(file, index) in files" class="col-8 file-item">
			<view class="file flex wrap flex-col items-center" v-if="getFileType(file.fileName) !== 'img'">
				<view class="mt-10">
					<image :src="`/static/icon/${ getFileType(file.fileName) }.png`" mode="widthFix" style="width: 78rpx"></image>
				</view>
				<view class="uni-text-nowrap filename">{{ file.fileName }}</view>
			</view>
			<net-image :filepath="file.filePath" v-else class="img" />
		</view>
	</view>
	
	<!-- <view class="file-preview-wrapper" v-if="previewFlag" @tap="previewFlag = false" >
		<view class="file-preview-container">
			<template v-if="activeFile.type.indexOf('image') > -1">
				<image :src="imgSrc" mode="widthFix"></image>
			</template>
			<template v-else-if="activeFile.type.indexOf('audio') > -1">
				<view class="audio-container flex column">
					<view class="audio-title mb-20">{{ activeFile.orgiinFilename }}</view>
					<view @tap.stop="playFlag = !playFlag" class="flex center">
						<fui-icon name="suspend" color="#fff" :size="120"  v-if="!playFlag"></fui-icon>
						<fui-icon name="play" color="#fff" :size="120" v-else></fui-icon>
					</view>
				</view>
			</template>
			<template v-else-if="activeFile.type.indexOf('video') > -1">
				<video :src="videoSrc" controls @tap.stop style="width: 100vw; height: 60vh"></video>
			</template>
			<template v-else-if="activeFile.type.indexOf('word') > -1 ||
				activeFile.type.indexOf('excel') > -1 || activeFile.type.indexOf('spreadsheetml.sheet') > -1">
				<view class="docx-container">
					<view class="docx-content">
						<rich-text :nodes="htmlString"></rich-text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="unsupported flex column">
					<view class="mb-20">{{ activeFile.orgiinFilename }}</view>
					<view class="text-center tips mb-20">暂不支持该文件格式的预览</view>
				</view>
			</template>
		</view>
		<view class="file-dot-container flex gap" v-if="files.length > 1">
			<view v-for="(file, index) in files" class="dot" :active="files.indexOf(activeFile) === index"></view>
		</view>
		<view class="tools flex gap-6">
			<view class="tool-btn" @tap.stop="download">
				<fui-icon name="dropdown" color="#fff" :size="40"></fui-icon>
			</view>
			<template v-if="files.length > 1">
				<view class="tool-btn" @tap.stop="prev">
					<fui-icon name="arrowleft" color="#fff" :size="40"></fui-icon>
				</view>
				<view class="tool-btn" @tap.stop="next">
					<fui-icon name="arrowright" color="#fff" :size="40"></fui-icon>
				</view>
			</template>
		</view>
	</view> -->
</template>

<script setup>
	import { ref, defineProps, defineEmits, onMounted } from 'vue';
	import { getFileType } from '@/common/util';
	
	defineProps({
		files: {
			type: Array,
			default: []
		}
	})
</script>

<style lang="scss">
	.file-item {
		width: 178rpx;
		height: 178rpx;
		background: #F3FAFF;
		overflow: hidden;
		.filename {
			font-size: 12px;
		}
		.img {
			width: 100%;
			height: 100%;
		}
	}
</style>