<template>
	<div class="importBody">
		<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="false"
			multiple
			:auto-upload="true"
			:limit="9"
		>
			<div class="el-upload-size">
				<el-icon class="el-icon--upload" size="18"><sc-icon-Attachment /></el-icon>
			</div>
		</el-upload>
	</div>
</template>

<script>

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

			oss:{
				host:''
			},
			upload_data:{},
			params:{},
			singleFnc:true,
			parentParams:{
				to_user_id:"",
				unique:""
			},

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

	},
	watch:{

	},
	mounted() {

	},
	unmounted() {

	},
	methods:{
		// 导入文件
		importFile(params){
			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("to_user_id", this.parentParams['to_user_id']);
			this.params = formData;

			// 单次
			if(this.singleFnc){
				this.singleFnc = false;
				this.save();
			}
		},
		deleteFileNum(num){
			this.handleRemove(this.fileList[num], this.fileList);
			this.setParamsData();
		},
		close(){
			this.progressShow = false;
			this.listProgress = [];
			this.handleRemove('',this.fileList,true);
		},
		async save() {
			this.saveLoading = true;
			const res = await this.$API.customer.attachmentMessage.post(this.params);
			this.saveLoading = false;
			if (res.code == 200) {
				res.data.forEach((item,index)=>{
					item.showLoading = true;
					if(['png','jpg','gif','jpeg'].indexOf(item.file_type) !==-1){
						item.file = URL.createObjectURL(this.fileList[index])
					}else{
						item.rate = 1;
					}
				})
				this.$emit('uploadFileSuccess',res.data);

				this.params = {};
				this.fileList = [];
				this.singleFnc = true;
			}
		},
		handleExceed(){
			this.$message.warning('文件超出最大限制');
		},
		handleRemove(file,fileList,isArr=false){
			if(isArr){
				fileList = [];
			}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;
	display: flex;
	align-items: center;
}
.upload .el-upload-size{
	display: flex;
	align-items: center;
	justify-content: center;
}
.upload .el-icon--upload{
	margin-bottom: 0;
	color: #333;
}
.upload ::v-deep .el-upload{
	display: flex;
	align-items: center;
	justify-content: center;
}
.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;
	}
}
.upload ::v-deep .el-upload-dragger{
	border: 0;
	border-radius: 0;
	padding: 0;
}
.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>
