<template>
	<view class="file-unit " :class="{'active':active}" @tap="download()">
		<i class="ico ico-word ico-big2" v-if="fileItem.type=='doc' || fileItem.type=='docx'"></i>
		<i class="ico ico-execl ico-big2" v-else-if="fileItem.type=='xls' || fileItem.type=='xlsx'"></i>
		<i class="ico ico-txt ico-big2" v-else-if="fileItem.type=='txt'"></i>
		<i class="ico ico-pdf ico-big2" v-else-if="fileItem.type=='pdf'"></i>
		<i class="ico ico-rarzip ico-big2" v-else-if="fileItem.type=='zip' || fileItem.type=='rar'"></i>
		<i class="ico ico-jpgpng ico-big2" v-else-if="fileItem.type=='png' || fileItem.type=='jpg' || fileItem.type=='jpeg' "></i>
		<i class="ico ico-ppt ico-big2" v-else-if="fileItem.type=='ppt' || fileItem.type=='ppts' || fileItem.type=='pptx' || fileItem.type=='dps'"></i>
		<i class="ico ico-more ico-big2" v-else></i>
		<view style="flex: 1;line-height: 1.2;padding-right: 20rpx;">
			<view class="file-text">{{fileItem.name}}</view>
		</view>

		<i class='ico ico-wjxz'></i>
	</view>
</template>

<script>
	export default {
		props: {
			fileItem: Object,
		},
		data(){
			return {

				active: false
			}
		},
		methods:{
			download() {
				let _this = this
				this.active = true
				if(_this.fileItem.type=='png' || _this.fileItem.type=='jpg' || _this.fileItem.type=='jpeg') {
					uni.previewImage({urls:[_this.fileItem.path]})
				}else{
					uni.showLoading({
						title:"正在下载中..."
					})
					uni.downloadFile({
					  url:_this.fileItem.path,
					  success: function (res) {
					    let filePath = res.tempFilePath;
					    uni.openDocument({
					      filePath: filePath,
					      success: function (res) {
					        console.log('打开文档成功');
					      },
						  fail(rs) {
						  	uni.showModal({
						  		title:'温馨提示',
								content:rs
						  	})
						  },
						  complete() {
						  	uni.hideLoading()
						  }
					    });
					  },fail: function(res){
						uni.hideLoading()
						uni.showToast({
							title: res
						})
					  }

					});
				}

			},
		}
	}
</script>

<style scoped>
.file-unit {
	width: 100%;
	position: relative;
	margin-top: 16rpx;
	display: flex;
	align-items: center;
}
.active .file-text{
	color: #007AFF;
}
.file-text {
	font-size: 24rpx;
	line-height: 1.2;
	box-sizing: border-box;
	max-height: 60rpx;
	min-height: 32rpx;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ico:before {
	margin-right: 16rpx;
}
.ico-wjxz:before{
	width: 42rpx;
	height: 42rpx;
}
.ico-big2:before{
	width: 52rpx;
	height: 52rpx;
}
.ico-word:before{
	background-image: url('../../static/images/fileType/word.png');
}
.ico-execl:before{
	background-image: url('../../static/images/fileType/excel.png');
}
.ico-txt:before{
	background-image: url('../../static/images/fileType/txt.png');
}
.ico-pdf:before{
	background-image: url('../../static/images/fileType/pdf.png');
}
.ico-ppt:before{
	background-image: url('../../static/images/fileType/ppt.png');
}
.ico-jpgpng:before{
	background-image: url('../../static/images/fileType/jpgpng.png');
}
.ico-rarzip:before{
	background-image: url('../../static/images/fileType/rarzip.png');
}
.ico-more:before{
	background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/fileType/more.png');
}
.ico-wjxz:before{
	background-image: url('../../static/images/fileType/downLoad.png');
}
</style>
