<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'); */
	background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/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>
