<template>
	<div class="file-upload">
		<!--<el-progress style="margin-left: 5em"  v-if="progressFlag" :percentage="loadProgress"></el-progress>-->
		<el-upload
			:disabled="disabled"
			:auto-upload="autoUpload"
			:action="action"
			:name="name"
			:data="data"
			:http-request="uploadFile"
			v-model:file-list="defaultFileList"
			:show-file-list="showFileList"
			:drag="drag"
			:accept="accept"
			:multiple="multiple"
			:limit="limit"
			:before-upload="before"
			:on-success="success"
			:on-error="error"
			:on-preview="handlePreview"
			:on-exceed="handleExceed"
			:on-progress="onUploadProgress"
		>
			<slot>
				<el-button type="primary" :disabled="disabled"
					>上传视频</el-button
				>
			</slot>
			<template #tip>
				<div v-if="tip" class="el-upload__tip">{{ tip }}</div>
			</template>
		</el-upload>
		<el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
		<span style="display: none !important"
			><el-input v-model="value"></el-input
		></span>
	</div>
</template>

<script>
import config from "@/config/videoUpload";
import request from '@/utils/httpRequest'

export default {
	props: {
		modelValue: { type: String, default: "" },
		tip: { type: String, default: "" },
		action: { type: String, default: "" },
		apiObj: { type: Object, default: () => {} },
		name: { type: String, default: config.filename },
		data: { type: Object, default: () => {} },
		accept: { type: String, default: "" },
		maxSize: { type: Number, default: config.maxSize },
		limit: { type: Number, default: 0 },
		autoUpload: { type: Boolean, default: true },
		showFileList: { type: Boolean, default: true },
		drag: { type: Boolean, default: false },
		multiple: { type: Boolean, default: true },
		disabled: { type: Boolean, default: false },
		onSuccess: {
			type: Function,
			default: () => {
				return true;
			},
		},
	},
	data() {
		return {
			progressFlag: false,
			loadProgress: 0,
			value: "",
			defaultFileList: [],
		};
	},
	watch: {
		modelValue(val) {
			if (val != this.toStr(this.defaultFileList)) {
				this.defaultFileList = this.toArr(val);
				this.value = val;
			}
		},
		defaultFileList: {
			handler(val) {
				this.$emit("update:modelValue", this.toStr(val));
				this.value = this.toStr(val);
			},
			deep: true,
		},
	},
	methods: {
		//默认值转换为数组
		toArr(str) {
			var _arr = [];
			var arr = str.split(",");
			arr.forEach((item) => {
				if (item) {
					var urlArr = item.split("&name=");
					var fileName = urlArr[urlArr.length - 1];
					_arr.push({
						name: fileName,
						url: item,
					});
				}
			});
			return _arr;
		},
		onUploadProgress(file, fileList) {
			console.log(file)
			//刚开始上传的时候，可以拿到ready状态，给个定时器，让进度条显示
			if (file.status === 'ready') {
				this.progressFlag = true //进度条显示
				const interval = setInterval(() => {
					if (this.loadProgress >= 100) {
						clearInterval(interval)
						return
					}
					this.loadProgress += 1 //进度条进度
				}, 80)
			}
		},
		//数组转换为原始值
		toStr(arr) {
			return arr.map((v) => v.url).join(",");
		},
		before(file) {
			console.log(this.maxSize)
			const maxSize = file.size / 1024 / 1024 < this.maxSize;
			console.log(maxSize)
			if (!maxSize) {
				this.$message.warning(
					`上传文件大小不能超过 ${this.maxSize}MB!`
				);
				return false;
			}

		},
		success(res, file) {
			var os = this.onSuccess(res, file);
			if (os != undefined && os == false) {
				return false;
			}
			var response = config.parseData(res);
			file.url = response.src;
		},
		error(err) {
			this.$notify.error({
				title: "上传文件未成功",
				message: err,
			});
		},
		beforeRemove(uploadFile) {
			return this.$confirm(`是否移除 ${uploadFile.name} ?`, "提示", {
				type: "warning",
			})
				.then(() => {
					return true;
				})
				.catch(() => {
					return false;
				});
		},
		handleExceed() {
			this.$message.warning(
				`当前设置最多上传 ${this.limit} 个文件，请移除后上传!`
			);
		},
		handlePreview(uploadFile) {
			window.open(uploadFile.url);
		},
		/*request(param) {
			var apiObj = config.apiObj;
			if (this.apiObj) {
				apiObj = this.apiObj;
			}
			const data = new FormData();
			data.append(param.filename, param.file);
			for (const key in param.data) {
				data.append(key, param.data[key]);
			}
			console.log(apiObj)
			apiObj
				.upload(data, {
					onUploadProgress: (e) => {
						console.log(e)
						const complete = parseInt(
							((e.loaded / e.total) * 100) | 0,
							80
						);
						this.loadProgress = complete;
						console.log(complete)
						param.onProgress({ percent: complete });
					},
				})
				.then((res) => {
					param.onSuccess(res);
					// eslint-disable-next-line no-unused-vars
				})
				.catch(() => {
					// param.onError(err)
				});
		},*/
		// 覆盖默认的上传行为，可以自定义上传的实现
		async uploadFile(param) {
			// param.file就是上传文件本身

			const formData = new FormData()
			formData.append('file', param.file)
			formData.append('PHP_SESSION_UPLOAD_PROGRESS', 'file1')

			// 发起请求
			request({
				method: 'post',
				// 上传地址，因为我这里的request请求是自己封装过的，所以就只需要填写接口后面的地址即可
				url: `${request.BASE_URL}/file/videoUpload`,
				data: formData,
				// 重点一：complete就是处理后的上传进度数值1-100
				onUploadProgress: progressEvent => {
					const complete = parseInt(
						((progressEvent.loaded / progressEvent.total) * 100) | 0,
						10
					)
					// 重点二：onProgress()方法需要以上方接收的形参来调用
					// 这个方法有一个参数"percent"，给他进度值 complete 即可
					param.onProgress({ percent: complete })
				}
			}).then(res => {
				param.onSuccess(res);
			})
		},
	},
};
</script>

<style scoped>
.el-form-item.is-error .file-upload:deep(.el-upload-dragger) {
	border-color: var(--el-color-danger);
}
.file-upload {
	width: 100%;
}
.file-upload:deep(.el-upload-list__item) {
	transition: none !important;
}
</style>
