<template>
	<slot name="header"></slot>

	<el-dialog v-bind="$attrs" :title="title" v-model="visible" :width="560" destroy-on-close draggable @closed="visible=false">
		<div class="importBody" v-loading="saveLoading" element-loading-text="处理中...">
			<el-upload
				class="upload"
				:action="oss.host"
				:data="upload_data"
				:file-list="fileList"
				:show-file-list="false"
				:on-success="handleSuccess"
				:on-error="handleError"
				:on-remove="handleRemove"
				:on-exceed="handleExceed"
				:before-upload="beforeUpload"
				:http-request="uploadFile"
				drag
				multiple
				:auto-upload="true"
				:limit="5"
			>
				<div>
					<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
					<div class="el-upload__text">
						<span class="laText">请将Excel拖到此处</span>
						<span class="tipText">，或点击上传</span><em> Excel</em>
					</div>
				</div>

				<template #tip>
					<div class="el-upload__tip">
						<span class="tip">最多上传5个文件,单个文件不要超过10M,请上传 xlsx/docx 格式文件</span>
						<span class="btn">
							<slot name="download"></slot>
						</span>
					</div>
					<div class="importBox" v-if="progressShow && (fileList.length>0 || listProgress.length>0)">
						<div v-if="uploadShow">
							<div class="item" v-for="(item,index) in fileList" :key="item">
								<div class="name">{{item.name}}</div>
								<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="0" />
								<div class="deleteFile" @click="deleteFileNum(index)"><el-icon class="icon"><el-icon-Close/></el-icon></div>
							</div>
						</div>
						<div v-else>
							<div class="item" v-for="(item) in listProgress" :key="item">
								<div class="name">{{item.client_file_name}}</div>
								<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
							</div>
						</div>
					</div>
				</template>
			</el-upload>
		</div>
		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="save" :disabled="saveLoading">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import {eventBus} from "@/utils/eventBus"

export default {
	name: "uploadFile",
	emits: ['closed', "uploadFileSuccess"],
	props:{
		size:{type:String, default:'small'},
		title:{type:String, default: ""},
	},
	data(){
		return{
			visible: false,
			saveLoading:false,
			fileList:[],      // 正在上传的文件
			listProgress:[],  // 已上传的文件

			oss:{
				host:''
			},
			upload_data:{},
			params:{},
			parentParams:{
				folder_id:"",
				unique:""
			},

			progressShow:false,
			uploadShow:false,
		}
	},
	setup(){

	},
	watch:{

	},
	mounted() {
		eventBus.$on('sockBack', this.getWsResult);
	},
	unmounted() {
		eventBus.$off('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 12)){
				this.progressShow = true;
				if(this.listProgress.length==0){
					this.listProgress.push(res.data);
				}
				let ids = this.listProgress.map(em=>em.file_unique_id);
				if(!ids.includes(res.data.file_unique_id)){
					this.listProgress.push(res.data);
				}
				this.listProgress.forEach(em=>{
					if(em.file_unique_id == res.data.file_unique_id){
						em.rate = res.data.rate
					}
				})

				let list = this.listProgress.filter(em=> em.rate != 100);
				if(list.length==0 && res.data.status == 1){
					this.progressShow = false;
				}
				if(res.data.status == 1){
					this.fileList.splice(this.fileList[0],1);
					this.params = {};
					this.$emit('uploadFileSuccess');
				}
			}
		},

		// 导入文件
		importFile(params){
			this.visible = true;
			this.parentParams = params;
		},
		// 上传前
		beforeUpload(file){
			this.progressShow = true;
			this.uploadShow = true;
			this.fileList.push(file);
			return true
		},
		async uploadFile() {
			try {
				this.setParamsData();
			} catch (error) {
				console.log(error)
			}
		},
		// 数据处理
		setParamsData(){
			const formData = new FormData();
			for(let i in this.fileList){
				formData.append('files[]', this.fileList[i]);
			}

			for (const key in this.upload_data) {
				formData.append(key, this.upload_data[key]);
			}
			formData.append('folder_id', this.parentParams['folder_id']);
			this.params = formData;
		},
		deleteFileNum(num){
			this.handleRemove(this.fileList[num], this.fileList);
			this.setParamsData();
		},
		close(){
			this.visible = false;
			this.progressShow = false;
			this.listProgress = [];
			this.handleRemove('',this.fileList,true);
		},
		async save() {
			this.saveLoading = true;
			const res = await this.$API.docs.manager.upload.post(this.params);
			this.saveLoading = false;
			if (res.code == 200) {
				this.$message.success('提交成功,正在上传');
				this.listProgress = [];
				this.uploadShow = false;
			}
		},
		handleExceed(){
			this.$message.warning('文件超出最大限制');
		},
		handleRemove(file,fileList,isArr=false){
			if(isArr){
				fileList = [];
				// this.listProgress = [];
			}else{
				const index = fileList.findIndex(f => f.uid === file.uid);
				if (index !== -1) {
					fileList.splice(index, 1);
				}
			}
		},
		// 上传成功
		handleSuccess(response, file, fileList){
			const index = fileList.findIndex(f => f.uid === file.uid);
			if (index !== -1) {
				fileList.splice(index, 1);
			}
		},
		// 上传失败
		handleError(){
			this.$message.warning('上传失败请重新上传');
		}
	}
}
</script>

<style scoped lang="scss">
.importBody{
	padding: 0 20px;
}
.upload .el-icon--upload{
	width: 54px;height: 54px;
}
.upload ::v-deep .el-upload__text{
	.trueIcon{
		position: relative;
		border: 1px solid var(--el-border-color);
		border-radius: 4px;
	}
	.laText{
		color: var(--el-color-dark);
	}
	.tipText{
		color: var(--el-text-color-placeholder);
	}
	.deleteFile{
		position: absolute;
		right: -6px;
		top: -10px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--el-color-danger);
		display: flex;
		align-items: center;
		justify-content: center;
		.icon{
			width: 12px;height: 12px;
			color: var(--el-color-white);
		}
	}
}
.upload ::v-deep .el-upload__tip{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
	color: var(--el-text-color-placeholder);
	.btn{
		color: var(--el-color-primary);
		cursor: pointer;
	}
}
.importBox{
	border: 1px solid var(--el-border-color);
	padding: 10px 5px;
	margin: 15px 0;
	border-radius: 4px;
	.item{
		margin-bottom: 10px;position: relative;
		.deleteFile{
			position: absolute;
			right: 0;
			top: 1px;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: #AAAAAA;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			.icon{
				width: 12px;height: 12px;
				color: var(--el-color-white);
			}

		}
	}
	.item:last-child{margin-bottom: 0;}
	.name{margin-bottom: 5px;font-size: 13px;}
	.exportPopover ::v-deep .el-progress-bar__innerText{
		height: 100%;
		display: flex;align-items: center;justify-content: flex-end;
		font-size: 10px;
	}
}
.errText{
	margin: 15px 0 0 0;
	padding: 10px;
	border-radius: 6px;
	background: var(--el-color-danger-light-9);
	position: relative;
	.name{
		color: var(--el-color-danger);
		font-size: 12px;
		line-height: 20px;
	}
	.deleteErr{
		position: absolute;
		right: 4px;
		top: 4px;
		z-index: 20;
		cursor: pointer;
		.icon{
			font-size: 16px;
		}
	}
}
</style>
