<template>
	<view class="page">
		<!-- 预览文件 -->
		<web-view :webview-styles="webviewStyles" :src="src" v-if="fileType === '2'"></web-view>
	</view>
</template>

<script>
	var wv; //计划创建的webview
	export default {
		name: 'ss-preview',
		props: {
			fileUrl: {
				type: String,
				default: ''
			},
			fileType: {
				type: String,
				default: '', //1.预览图片，2.预览文件，3.预览视频
			},
			imageList: { //预览图片，可以预览多张
				type: Array,
				default: () => {
					return []
				}
			},
		},
		onReady() {
			// #ifdef APP-PLUS
			var currentWebview = this.$scope
				.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({
					top: 150,
					height: 300,
					'margin-top': 500
				})
				console.log('vm', wv);
			}, 1000);
			//如果是页面初始化调用时，需要延时一下
			// #endif
		},
		data() {
			return {
				webviewStyles: {
					// progress: {
					// 	color: '#FF3333',
					// },
					// height: '50%'
				},
				src: '',
			};
		},
		methods: {
			//微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
			previewWechat(urlPdf) {
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.downloadFile({
					url: urlPdf,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},
			//APP，H5预览文档图片和视频，微信小程序预览图片和视频
			previewPdf(value) {
				this.src = `/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;
			},
		},
		watch: {
			fileType: {
				deep: true,
				immediate: true,
				handler: function(value) {
					if (value === '2') { //预览文档
						//#ifdef APP-PLUS || H5
						this.previewPdf(this.fileUrl)
						//#endif
						//#ifdef MP-WEIXIN
						console.log(333)
						this.previewWechat(this.fileUrl)
						//#endif
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.stat {
		background-color: #00006D;
		position: fixed;
		z-index: 99999999999999999999999;
		width: 100%;
		top: 0;
		left: 0;
	}

	.page {
		height: 100%;


	}
</style>