<template>
	<div class="upload">
		<div class="upload-box" @click="choiceFile">
			<div class="upload-btn" v-if="!preview">
				<i class="el-icon-upload"></i>
				<span class="upload-text">点击选择文件</span>
				<span>
					<small v-if="type == 'img'">允许上传格式:jpg/png/gif</small><br />
					<small v-if="type == 'doc'">允许上传格式:excel/word/pdf/ppt/txt</small><br />
					<small v-if="type == 'video'">允许上传格式:mp4/mpeg/ogg</small><br />
					<small>文件大小不超过:{{ size }}M</small><br />
				</span>
			</div>
			<div class="upload-show" v-else>
				<div class="progress" v-show="progressStatus">
					<div class="mask"></div>
					<el-progress type="circle" :percentage="$store.state.oss.progress"></el-progress>
				</div>
				<img :src="preview" alt="" v-if="type == 'img'" />
				<div v-if="type == 'doc'" class="doc-box">
					<i class="el-icon-document"></i>
					<span>{{ preview }}</span>
				</div>
				<div v-if="type == 'video'" class="video">
					<Video :src="preview" />
				</div>
			</div>
		</div>
		<input type="file" name="file" ref="file" @change="getFile" style="display: none" :accept="accept" />
	</div>
</template>

<script>
	import upload from '@/utils/oss.js'
	import Video from '@/components/Video/index.vue'
	export default {
		props: {
			//文件类型 img图片 doc文件 video视频
			type: {
				type: String,
				default: 'img'
			},
			//限制文件大小
			size: {
				type: String,
				default: '10'
			}
		},
		components: {
			Video
		},
		data() {
			return {
				//文件对象
				fileObj: null,
				//文件名称
				preview: null,
				//显示进度条
				showProgress: false
			}
		},
		computed: {
			progressStatus() {
				if (this.showProgress && this.$store.state.oss.progress != 100) {
					return true
				}
				return false
			},
			accept() {
				if (this.type == 'img') {
					return 'image/jpg,image/jpeg,image/png,image/gif'
				} else if (this.type == 'doc') {
					return 'application/msexcel,application/msword,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,text/plain'
				} else if (this.type == 'video') {
					return 'audio/mp4,video/mp4,video/mpeg,application/ogg,audio/ogg,'
				}
			}
		},
		methods: {
			//选择文件
			choiceFile() {
				this.$refs.file.click()
			},
			//获取文件对象
			getFile(e) {
				this.fileObj = e.target.files[0]
				if (!this.fileObj) return
				let types = this.accept.split(',')
				let type = this.fileObj.type
				let size = this.fileObj.size
				if (!types.includes(type)) {
					this.$msg({ type: 'error', message: '文件类型不符' })
					return
				}
				if (size > this.size * 1024 * 1024) {
					this.$msg({ type: 'error', message: `文件不能大于${this.size}M` })
					return
				}
				switch (this.type) {
					case 'img':
						this.preview = URL.createObjectURL(this.fileObj)
						break
					case 'doc':
						this.preview = this.fileObj.name
						break
					case 'video':
						this.preview = URL.createObjectURL(this.fileObj)
						break
				}
			},
			//上传图片到oss并返回路径
			uploadPut() {
				if (!this.fileObj) return
				this.showProgress = true
				return upload(this.fileObj).then((res) => res.url)
			}
		}
	}
</script>

<style scoped lang="scss">
	.upload-box {
		width: 360px;
		height: 300px;
		user-select: none;
		-webkit-user-select: none;
		cursor: pointer;
		.upload-btn {
			width: 100%;
			height: 100%;
			border: 1px dashed #d9d9d9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #666;
			text-align: left;
			.upload-text {
				display: inline-block;
				margin: 10px 0;
				font-weight: bolder;
			}
			i {
				font-size: 50px;
				color: #c0c4cc;
			}
		}
		.upload-show {
			width: 100%;
			height: 100%;
			border: 1px solid #d9d9d9;
			padding: 10px;
			box-sizing: border-box;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.progress {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 9999;
				.mask {
					width: 100%;
					height: 100%;
					background-color: rgba($color: #ddd, $alpha: 0.8);
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			img {
				width: 100%;
				height: 100%;
			}
			.doc-box {
				width: 60%;
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				i {
					font-size: 100px;
					color: #c0c4cc;
				}
			}
			.video {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
