<template>
	<div>
		<!-- 文件上传start -->
		<el-upload drag :limit="limitNum" :auto-upload="false" :accept="acceptStr" :action="UploadUrl()"
			:before-upload="beforeUploadFile" :before-remove="beforeRemove" :on-change="fileChange" :on-exceed="exceedFile"
			:on-success="handleSuccess" :on-error="handleError" :filelist="fileList">
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<!-- <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button size="small"  @click="dialogVisible = false">取消</el-button> -->
		<!-- 文件上传 end-->
		<el-upload class="upload-demo" :action="UploadUrl()" :on-preview="handlePreview" :on-remove="handleRemove"
			:before-remove="beforeRemove" multiple :limit="limitNum" :file-list="fileList">
			<el-button size="small" type="primary">点击上传</el-button>
		</el-upload>
	</div>
</template>
<script>
export default {
	props: ["Urldata"],
	data() {
		return {
			formselect: {},
			//文件上传
			limitNum: 6, // 上传excell时，同时允许上传的最大数
			fileList: [], // excel文件列表
			dialogVisible: true, //数据导入弹框显隐
			title: "", //弹框标题
			dialog: false, //抽屉弹框显隐
			// 表单
			acceptStr: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/jpeg,image/png,application/msword,application/pdf',
		};
	},
	created() {
		console.log(this.Urldata, "11");
		// this.GetProjectList()
	},
	mounted() { },
	methods: {
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
		},
		// 文件超出个数限制时的钩子
		exceedFile(files, fileList) {
			this.$message.warning(
				`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length
				} 个`
			);
		},
		// 文件状态改变时的钩子
		fileChange(file) {
			// debugger;
			this.fileList = file.raw;
			this.$emit("getUrl", this.fileList);
		},
		// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
		beforeUploadFile(file) {
			console.log(file);
			let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
			let size = file.size / 1024 / 1024;
			// if (extension !== "xls") {
			// 	this.$message.warning("只能上传后缀是.xlsx的文件");
			// }
			if (size > 10) {
				this.$message.warning("文件大小不得超过10M");
			}
		},
		// 文件上传成功时的钩子
		handleSuccess(res, file, fileList) {
			// debugger;
			this.$message.success("文件上传成功");
		},
		// 文件上传失败时的钩子
		handleError(err, file, fileList) {
			// debugger;
			this.$message.error("文件上传失败");
		},
		UploadUrl: function () {
			// 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
			return "";
		},
		beforeRemove(file, fileList) {
			this.fileList = fileList;
		},
		uploadFile(Urldata) {
			// debugger;
			if (this.fileList == "") {
				this.$message.warning("请上传文件");
			} else {
				var form = new FormData();
				form.append("file", this.fileList);
				form.append("tableName", Urldata.tableName);
				form.append("type", Urldata.type);
				// debugger;
				console.log(form);
				this.$axios({
					method: "post",
					url: Urldata.url,
					headers: {
						"Content-type": "multipart/form-data",
					},
					data: form,
				}).then(
					(res) => {
						// debugger;
					},
					(err) => { }
				);
			}
		},
		//文件上传关闭
		handleClosetwo(done) {
			this.$confirm("确认关闭？")
				.then((_) => {
					done();
				})
				.catch((_) => { });
		},
	},
	watch: {
		Urldata: {
			handler: function () {
				this.uploadFile(this.Urldata);
				//do something
			},
			deep: true,
		},
	},
};
</script>
<style scoped></style>
