<template>
	<div v-loading.fullscreen.lock="upload.isUploading">
		<!-- <span @click="handleImport">
			上传文件
		</span> -->
		<!-- 数据导入对话框 -->
		<el-dialog title="上传文件" v-model="uploadOpen" width="400px" append-to-body>
				<!-- :data="upload.data"
				:headers="upload.headers"
				:action="upload.url" -->
				<!-- :limit="1" -->
				<!-- :on-success="handleFileSuccess" -->
				<!-- :on-exceed="handleExceed" -->
			<el-upload ref="uploadRef" 
				:on-change="handleChange"
				:on-remove="handleRemove"
				:auto-upload="false" 
				:multiple="true"
				drag>
				<el-icon class="el-icon--upload">
					<upload-filled />
				</el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<el-button @click="canelForm">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		getToken
	} from "@/utils/auth";
	const {
		proxy
	} = getCurrentInstance();
	const emit = defineEmits();
	const props = defineProps({
		uploadOpen: {
			type: Boolean,
			default: false,
		}
	});
	const {
		uploadOpen
	} = toRefs(props);
	const fileLists = ref([]);
	/*** 数据导入参数 */
	const upload = reactive({
		// 弹出层标题（数据导入）
		title: "",
		// 是否禁用上传
		isUploading: false,
		// 是否更新已经存在的数据数据
		updateSupport: 0,
		// 设置上传的请求头部
		headers: {
			Authorization: "Bearer " + getToken()
		},
		// 上传的地址
		// url: import.meta.env.VITE_APP_BASE_API,
		url: import.meta.env.VITE_APP_BASE_API + `/system/file/fileupload`,
		// 携带参数
		data: {},
		fileList: {}
	});
	const handleChange = async(uploadFile, uploadFiles)=>{
		fileLists.value = uploadFiles;
	}
	
	const handleRemove = function(file, fileList){
		fileLists.value = fileList;
	}
	const handleExceed = uploadFile => {
		upload.fileList = {};
		handleChange({ raw: uploadFile[0]})
	}
	/** 提交上传文件 */
	function submitFileForm() {
		emit("success", fileLists.value);
		proxy.$refs["uploadRef"].clearFiles();
	}
	
	function canelForm() {
		emit("cancel");
	}
</script>