<template>
	<view class="filePage">
		<!-- <scroll-view class="pageContent"> -->
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
		<headers :showBack="true">
			<view class="headerName">
				档案管理
			</view>
		</headers>
		<view class="breadcrumb">
			当前位置:
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in breadCrumbList" :key="index"
					:to="clickFilePath(route, index)">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		<view class="searchBox">
			<form @submit="formSubmit">
				<view class="uni-form-item">
					<input class="uni-input" name="searchName" v-model="searchName" @input="searchFile"
						placeholder="请输入文件名" />
					<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
					<!-- <uni-icons2 class="search-icon" type="search" @click="loadData"></uni-icons2> -->
				</view>
			</form>
		</view>
		<view class="" v-if="fileList.length>0">
			<view class="fileItem" @click="clickFileName(item)" v-for="(item,index) in fileList" :key="index">
				<view class="left">
					<image class="fileIcon" :src="setFileImg(item)"></image>
					<text
						class="left_text">{{item.fileName + (!item.isDir && item.extendName !== null ? `.${item.extendName}` : '')}}</text>
				</view>
				<!-- <image v-if="!item.isDir" @click.stop="downloadFn(item)" class="ellipsis"
					src="@/static/ellipsis.png"></image> -->
				<view class="rules-text2" v-if="!item.isDir">
					<text @click="downloadFile(item)">预览</text>
					<text @click.stop="downloadFn(item)">下载</text>
				</view>
			</view>
		</view>


		<!-- <view class="placeholderBox" v-else>
			<image src="/static/noData.png" class="noDataImg"></image>
			<view class="text">
				暂无数据
			</view>
		</view> -->
		<view class="no_data1" v-else>
			<image src="/static/bthgIcon/noData1.png"></image>
		</view>
		<view class="fixed" :class="{show:showIframe}" v-if="show" @click="show=false">
			<view class="iframeMain" @click.stop="show=true">
				<iframe class="iframe" ref="iframe" :src="iframeUrl" frameborder="0"></iframe>
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import headers from '@/components/headers/headers.vue';
	import {
		isVideoLink,
		isImageLink,
		openOutsideFile,
		openLocalFile,
		removeNetWorkFileTemp,
		isJSON
	} from '@/utils/tool.js'
	import fileImg1 from '@/static/ppt.png';
	import fileImg2 from '@/static/excel.png';
	import fileImg3 from '@/static/pdf.png';
	import fileImg4 from '@/static/word.png';
	import dir from '@/static/file/dir.png';
	import file_chm from '@/static/file/file_chm.png';
	import file_css from '@/static/file/file_css.png';
	import file_csv from '@/static/file/file_csv.png';
	import file_rar from '@/static/file/file_rar.png';
	import file_zip from '@/static/file/file_zip.png';
	// import file_mp3 from '@/static/file/file_mp3.png';
	import file_open from '@/static/file/file_open.png';
	import file_rtf from '@/static/file/file_rtf.png';
	import file_txt from '@/static/file/file_txt.png';
	import file_oa from '@/static/file/file_oa.png';
	import file_js from '@/static/file/file_js.png';
	import file_html from '@/static/file/file_html.png';
	import file_sql from '@/static/file/file_sql.png';
	import file_jar from '@/static/file/file_jar.png';
	import file_svg from '@/static/file/file_svg.png';
	import file_gif from '@/static/file/file_gif.png';
	import file_json from '@/static/file/file_json.png';
	import file_exe from '@/static/file/file_exe.png';
	import file_pic from '@/static/file/file_pic.png';
	import file_word from '@/static/file/file_word.png';
	import file_excel from '@/static/file/file_excel.png';
	import file_avi from '@/static/file/file_avi.png';
	import file_video from '@/static/file/file_video.png';
	import file_music from '@/static/file/file_music.png';
	import file_img from '@/static/file/file_img.png';
	import file_dmg from '@/static/file/file_dmg.png';
	import file_ppt from '@/static/file/file_ppt.png';
	import file_pdf from '@/static/file/file_pdf.png';
	import file_unknown from '@/static/file/file_unknown.png';

	export default {
		components: {
			headers
		},
		data() {
			return {
				searchName: '',
				fileList: [],
				timer: null,
				fileImg1: fileImg1,
				fileImg2: fileImg2,
				fileImg3: fileImg3,
				fileImg4: fileImg4,
				//  可以识别的文件类型
				fileImgTypeList: [
					'png',
					'jpg',
					'jpeg',
					'docx',
					'doc',
					'ppt',
					'pptx',
					'xls',
					'xlsx',
					'avi',
					'mp4',
					'css',
					'csv',
					'chm',
					'rar',
					'zip',
					'dmg',
					'mp3',
					'open',
					'pdf',
					'rtf',
					'txt',
					'oa',
					'js',
					'html',
					'img',
					'sql',
					'jar',
					'svg',
					'gif',
					'json',
					'exe'
				],
				//  文件图片Map映射
				fileImgMap: {
					dir: dir,
					chm: file_chm,
					css: file_css,
					csv: file_csv,
					png:file_pic,
					jpg: file_pic,
					jpeg: file_pic,
					docx: file_word,
					doc: file_word,
					ppt: file_ppt,
					pptx: file_ppt,
					xls: file_excel,
					xlsx: file_excel,
					mp4: file_video,
					avi: file_avi,
					rar: file_rar,
					zip: file_zip,
					dmg: file_dmg,
					mp3: file_music,
					open: file_open,
					pdf: file_pdf,
					rtf: file_rtf,
					txt: file_txt,
					oa: file_oa,
					unknown: file_unknown,
					js: file_js,
					html: file_html,
					img: file_img,
					sql: file_sql,
					jar: file_jar,
					svg: file_svg,
					gif: file_gif,
					json: file_json,
					exe: file_exe
				},
				routes: "/",
				showIframe: false,
				show: false,
				iframeUrl: "",
			};
		},
		mounted() {
			this.loadData()
		},
		onLoad(val) {
			this.routes = val.filePath ? val.filePath : '/';
			// this.initData()

		},
		computed: {
			//  面包屑导航栏数组
			breadCrumbList: {
				get() {
					let filePath = this.routes;
					let filePathList = filePath ? filePath.split('/') : []
					let res = [] //  返回结果数组
					let _path = [] //  存放祖先路径
					for (let i = 0; i < filePathList.length; i++) {
						if (filePathList[i]) {
							_path.push(filePathList[i] + '/')
							res.push({
								path: _path.join(''),
								name: filePathList[i]
							})
						} else if (i === 0) {
							//  根目录
							filePathList[i] = '/'
							_path.push(filePathList[i])
							res.push({
								path: '/',
								name: '全部文件'
							})
						}
					}
					console.log(1111, res)
					return res
				},
				set() {
					return [{
						path: '/',
						name: '全部文件'
					}]
				}
			},
		},
		methods: {
			getType(url) {
				if (isImageLink(url)) {
					return "image"
				} else if (isVideoLink(url)) {
					return "video"
				} else {
					return ''
				}
			},
			downloadFile(url) {
				const newUrl = url.fileUrl.includes('http://') ? url.fileUrl : this.url_config + 'image/' + url.fileUrl;
				console.log(url)
				// uni.downloadFile({
				// 	url: newUrl,
				// 	success: function(res) {
				// 		var filePath = res.tempFilePath;
				// 		uni.openDocument({
				// 			filePath: filePath,
				// 			success: function(res) {
				// 				console.log('打开文档成功');
				// 			}
				// 		});
				// 	}
				// });
				const typeImageList = ['png', 'jpg', 'jpeg'];
				const extendName = url.fileUrl.slice(url.fileUrl.lastIndexOf('.') + 1);
				if (typeImageList.includes(extendName)) {
					uni.previewImage({
						urls: [newUrl]
					})
				} else{
					//#ifdef H5
						uni.showToast({
						    title: '暂不支持预览！',
							icon: "none",
							duration: 2000
						});
						return;
					//#endif
					uni.downloadFile({
					  url: newUrl,
					  success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
						  filePath: filePath,
						  success: function (res) {
							console.log('打开文档成功');
						  }
						});
					  }
					});
				}
			},
			clickFilePath(row, index) {
				console.log(row)
				if (index == this.breadCrumbList.length - 1) return ''
				if (row.path == '/') {
					// uni.redirectTo({
					// 	url:`../fileManage/fileManage`,
					// })
					return `../fileManage/fileManage`
				}
				return `../fileManage/fileManage?filePath=${row.path}`;
			},
			//  点击文件名
			clickFileName(row) {
				//  若是目录则进入目录
				if (row.isDir) {
					uni.redirectTo({
						url: `../fileManage/fileManage?filePath=${row.filePath + row.fileName + '/'}`,
					})
				}
			},
			//  根据文件扩展名设置文件图片
			setFileImg(row) {
				if (!row.extendName) {
					//  文件夹
					return this.fileImgMap.dir
				} else if (!this.fileImgTypeList.includes(row.extendName)) {
					//  无法识别文件类型的文件
					return this.fileImgMap.unknown
				} else if (this.fileType !== 6 && ['jpg', 'png', 'jpeg', 'gif'].includes(row.extendName)) {
					// 图片类型，直接显示缩略图
					return this.url_config + 'image/' + row.fileUrl
				} else {
					//  可以识别文件类型的文件
					return this.fileImgMap[row.extendName]
				}
			},
			parseFileImgFn(url) {
				var type = url.split(".")[1];
				if (type == "ppt" || type == "pptx") {
					return this.fileImg1;
				}
				if (type == "xls" || type == "xlsx") {
					return this.fileImg2;
				}
				if (type == "pdf") {
					return this.fileImg3;
				}
				if (type == "doc" || type == "docx") {
					return this.fileImg4;
				}
			},
			formSubmit(e) {
				// console.log(e)
				this.searchName = e.detail.value.searchName
				this.loadData()

			},
			searchFile(e) {
				this.searchName = e.detail.value
			},
			loadData() {
				var json = {
					// companySn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn,
					fileName: this.searchName,
					// pageNo: 1,
					// pageSize: 100,
					projectSn: JSON.parse(uni.getStorageSync('userInfo')).sn,
					filePath: this.routes,
				}
				// if ([2, 3, 4, 7].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
				// 	json.companySn = JSON.parse(uni.getStorageSync('userInfo')).sn
				// }
				// if ([5, 6, 10].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
				// 	json.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
				// }
				var that = this

				// xmgl/projectFile/list
				// xmgl/companyFile/list
				this.sendRequest({
					url: "xmgl/projectFile/list",
					data: json,
					method: "POST",
					success(res) {
						console.log('文件数据', res);
						that.fileList = res.result
					}
				})
			},
			downloadFn(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: item.fileName,
					confirmText: '下载',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: that.url_config + 'image/' + item.fileUrl, //仅为示例，并非真实的资源
								success: (res) => {
									console.log(res)
									if (res.statusCode === 200) {
										// uni.showToast({
										// 	title:'下载成功'
										// })
										var filePath = res.tempFilePath;
										if (!filePath) return
										uni.openDocument({
											filePath: filePath,
											success: function(res) {
												console.log(res);
												console.log('打开文档成功');
												uni.showToast({
													title: '打开文档成功'
												})
											}
										});
									} else {
										uni.showToast({
											title: '下载失败'
										})
									}
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;

		&.show {
			display: initial;
		}
	}

	.iframeMain {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 650rpx;
		font-size: 0;

		.iframe {
			width: 100%;
			height: 500rpx;
		}
	}

	.rules-text2 {
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #5181F6;
		color: #3190F3;
		font-size: 28rpx;
		white-space: nowrap;

		>text:first-child {
			margin-right: 20rpx;
		}
	}

	.breadcrumb {
		display: flex;
		flex-wrap: wrap;
		padding: 8rpx 20rpx 0 20rpx;
		
		:deep(.uni-breadcrumb ){
			margin-left: 10rpx;
		}
		:deep(.uni-breadcrumb-item) {
			font-size: 28rpx;
		}
	}

	.filePage {
		background-color: white;
		height: 100%;
	}

	.searchBox {
		background-color: white;
	}

	.uni-input {
		border-radius: 40rpx;
		margin: 20rpx;
		// background-color: #f7f8fa;
		border: 1px solid #F3F4FE;
		height: 70rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		// width: 70%;
	}

	.fileItem {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		margin: 0 20rpx;
		color: $uni-text-color;
		// border-bottom: 1px solid rgba(221, 221, 221, 0.8);

		.left {
			display: flex;
			align-items: center;
			width: 70%;

			.left_text {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
		}

		.fileIcon {
			width: 56rpx;
			height: 56rpx;
			margin-right: 20rpx;
		}

		.ellipsis {
			width: 40rpx;
			height: 10rpx;
		}
	}

	.uni-form-item {
		position: relative;

		.search-icon {
			position: absolute;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		}
	}

	.mini-btn {
		// width: 120rpx;
		font-size: 28rpx;
		position: absolute;
		right: 12rpx;
		top: 50%;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		transform: translateY(-50%);
	}
</style>