<template>
	<view>
		<view class="file-title">
			附件列表：
		</view>
		<view class="file-box" v-for="(item,index) in list" :key="index">
			<view class="file-left">
				<text>{{item.fileName}}</text>
			</view>
			<view class="file-right">
				<button class="file-btn" @click="downFile(item.fileName,item.visitLocation)">预览</button>
			</view>
		</view>
		<view v-if="imgSrc != ''" class="img-box-box" @click="changeShow">
			<view class="img-box">
				<image class="img-img" :src="imgSrc"></image>
				<button class="img-btn" @click="changeShow">确定</button>
			</view>			
		</view>
	</view>
</template>

<script>
	import { queryFile } from 'api/queryFile'
	
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/DownFile/DownFile'
			}
		},
		data() {
			return {
				list:[],
				imgSrc:''
			}
		},
		async onLoad(options) {
			const that = this
			try{
				const params={
					param:{
						"demandId":options.id
					}
				}
				const data = await queryFile(params)
				that.list = data
				console.log(that.list)
			}catch(e){
				//TODO handle the exception
				console.log(e)
			}
		},
		methods: {
			downFile(Name,Path){
				const that = this
				// console.log(Name.split('.')[Name.split('.').length-1])
				var arr = []
				arr = Name.split('.')
				var lastName = arr[arr.length-1]
				console.log(lastName)
				if(lastName == 'jpg'|| lastName == 'png'|| lastName == 'jpeg'|| lastName == 'gif'|| lastName == 'svg'){
						console.log(Name)
						that.imgSrc = Path
				}else{
					uni.downloadFile({
						url: Path,	//服务器文件路径 + 文件名
						success(res) {
							const lastPath = res.tempFilePath       //请求路径成功返回后的暂时缓存路径
							uni.openDocument({
								filePath: lastPath,	//暂时缓存地址
								fileType: lastName,	//文件后缀名
								success: function (res) {
									console.log('打开文档成功')
									console.log(res)
								},
								fail:function(err){
									console.log(err)
								}
							});
						},
						fail(err){
							console.log(err)
						}
					})
				}
			},
			changeShow(){
				const that = this
				that.imgSrc = ''
			}
		}
	}
</script>

<style scoped lang="scss">
.file-title{
	text-align: center;
	margin: 20px 0;
	font-size: 24px;
}
.file-box{
	border: 1px solid #ccc;
	width: 700upx;
	margin: 0 25upx;
	position: relative;
}
.file-left{
	text-align: left;
	width: 86%;
	padding: 10px 0 10px 10px;
	border-right: 1px solid #ccc;
}
.file-right{
	text-align: center;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -13px;
	width: 14%;
	height: 26px;
	line-height: 26px;
}
.file-btn{
	height: 26px;
	font-size: 14px;
	line-height: 26px;
	padding: 0 !important;
	color: $blue;
}
.img-box-box{
	position: fixed;
	bottom: 0;
	height: 100%;
	width: 750upx;
	background-color: rgba($color: #000000, $alpha: 0.5);
}
.img-box{
	position: absolute;
	left: 75upx;
	width: 600upx;
	height: 700upx;
	padding: 40upx;
	background-color: $white;
	top: 150upx;
	text-align: center;
}
.img-img{
	max-width: 520upx;
	max-height: 560upx;
}
.img-btn{
	position: absolute;
	bottom: 40upx;
	height: 60upx;
	line-height: 60upx;
	width: 520upx;
}
</style>
