<template>
	<div class="fileUpload">
		<div class="importBody">
			<el-upload
				class="upload"
				:action="oss.host"
				:data="upload_data"
				:show-file-list="false"
				:on-success="handleSuccess"
				:before-upload="beforeUpload"
				:on-error="handleError"
				:drag="false"
				multiple
			>
				<div class="el-upload-size">
					<el-button type="primary" :size="size" icon="el-icon-Plus">上传附件</el-button>
				</div>
			</el-upload>
			<div class="fileList">
				<div class="fileItem" v-for="(item,index) in imageList" :key="index">
					<fileType size="22px" :fileType="item.type" />
					{{item.name}}
					<span class="btnView" @click="deleteClick(index)"><el-icon size="14"><el-icon-Close/></el-icon></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import fileType from "@/views/docsManager/fileType"
export default {
	name: "uploadListFile",
	components:{
		fileType
	},
	emits: ['closed', "uploadFileSuccess"],
	props:{
		list:{
			type:Array,
		},
		length:{
			type:Number,
		}
	},
	watch:{
		list:{
			handler(val){
				this.imageList = val;
			},
			deep:true,
			immediate:true
		}
	},
	data(){
		return{
			size:'small',
			imageList:[],
			oss:{
				host:''
			},
			upload_data:{},
			parentParams:{},
		}
	},
	mounted() {

	},
	methods:{
		// 导入文件
		importFile(params){
			this.parentParams = params;
		},
		// 上传前
		beforeUpload(file){
			return new Promise((resolve)=>{
				setTimeout(async ()=>{
					let params = {
						dir:"serve/file/"
					}
					const res = await this.$API.oss.ossGet.post(params);
					this.oss = res.data;
					this.upload_data = {
						name: new Date().getTime() + file.name,
						key: this.oss.dir +file.name,
						policy: this.oss.policy,
						OSSAccessKeyId: this.oss.accessid,
						success_action_status: "200",
						callback: this.oss.callback,
						signature: this.oss.signature,
						"Cache-Control": this.oss.cache_control,
					};
					resolve()
				},100)
			})
		},
		// 上传成功
		handleSuccess(file){
			let fileName = file.data.filename.split('/')[1];
			let fileType = fileName.split('.')[1];
			let imageUrl = {
				url:this.oss.host+'/'+file.data.filename,
				name:fileName,
				type:fileType
			};
			this.imageList.push(imageUrl);
			this.$emit('uploadFileSuccess',this.imageList);
		},
		// 上传失败
		handleError(){
			this.$message.warning('上传失败请重新上传');
		},
		deleteClick(num){
			this.imageList.forEach((item,index)=>{
				if(index == num){
					this.imageList.splice(index,1);
				}
			})
			this.$emit('uploadFileSuccess',this.imageList);
		}
	}
}
</script>

<style scoped lang="scss">
	.fileList{
		margin-top: 8px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 800px;
		.fileItem{
			display: flex;
			align-items: center;
			margin:0 10px 8px 0;
			background: #F6F6F6;
			padding: 4px 30px 4px 10px;
			border-radius: 4px;
			color: #888888;
			position: relative;
			height: 35px;
			.btnView{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				padding: 4px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}
		}
	}
</style>
