<template>
	<el-upload
		:class="imageList.length>0?'avatar-img avatar-uploader':'avatar-uploader'"
		:action="oss.host"
		:data="upload_data"
		:show-file-list="false"
		:on-success="handleAvatarSuccess"
		:on-error="handleAvatarError"
		:before-upload="beforeAvatarUpload"
	>
		<el-scrollbar class="uploadScrollbar">
			<div class="imgList">
				<div class="imgBox" v-for="(item,index) in imageList" :key="index" @click.stop="imgOpen">
					<el-image :src="item.url?item.url:item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :hide-on-click-modal="true" :preview-teleported="true" :initial-index="index" :preview-src-list="imageList" class="avatar" fit="cover" />
					<div class="deleteIcon" @click.stop="imgDelete(index)">
						<div class="iconBox">
							<el-icon class="iconBtn"><sc-icon-Delete /></el-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="avatar-icon" v-if="imageList.length<=num">
				<div class="avatar-uploader-icon"><el-icon-Plus /></div>
			</div>
		</el-scrollbar>
	</el-upload>
</template>

<script>
export default {
	name: "uploadListImg",
	props:{
		list:{
			type:Array,
		},
		length:{
			type:Number,
		}
	},
	data(){
		return{
			imageList:[],
			num:2,

			oss:{
				host:''
			},
			upload_data:{}
		}
	},
	watch:{
		'list':{
			handler(val){
				if(val){
					this.imageList = val;
				}
			},
			immediate:true,
			deep:true
		},
		'length':{
			handler(val){
				if(val){
					this.num = val;
				}
			},
			immediate: true,
			deep:true
		}
	},
	mounted() {

	},
	methods:{
		// 上传前
		beforeAvatarUpload(file){
			if(!['image/jpeg','image/png','image/gif'].includes(file.type)){
				this.$message.warning(`选择的文件类型 ${file.type} 非图像类文件`);
				return false;
			}
			return new Promise((resolve)=>{
				setTimeout(async ()=>{
					let params = {
						dir:"user/images/"
					}
					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)
			})

		},
		// 上传成功
		handleAvatarSuccess(file){
			// file.data.base_url
			let imageUrl = this.oss.host+'/'+file.data.filename;
			this.imageList.push(imageUrl)
			this.$emit('parentParams',this.imageList);
		},
		// 上传失败
		handleAvatarError(){
			this.$message.warning('上传失败请重新上传');
		},
		imgOpen(){
			return
		},
		imgDelete(num){
			this.imageList.forEach((item,index)=>{
				if(index == num){
					this.imageList.splice(index,1);
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.avatar-uploader .avatar {
		width: 80px;
		height: 80px;
		display: block;
	}
	.avatar-uploader{
		cursor: pointer;
		position: relative;
		overflow: hidden;
		height: 80px;
		transition: var(--el-transition-duration-fast);

	}
	.uploadScrollbar :deep(.el-scrollbar__view){
		display: flex;
	}
	:deep(.el-upload){
		width: 100%;
	}
	.avatar-img{
		border: none;
	}
	.avatar-uploader:hover {
		border-color: var(--el-color-primary);
	}
	.imgList{
		display: flex;
		align-items: center;
		.imgBox{
			margin-right: 20px;
			position: relative;
			.avatar{
				border-radius: 4px;
			}
			.deleteIcon{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.8);
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				display: none;
				.iconBox{
					width: 32px;
					padding: 9px 16px;
					border-radius: 20px;
					background: var(--el-color-primary);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					.iconBtn{
						width: 14px;
						height: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
					}
				}
			}
		}
		.imgBox:hover .deleteIcon{
			display: flex;
		}
	}
	.avatar-icon{
		width: 80px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
	}
	.avatar-icon .avatar-uploader-icon {
		color: #8c939d;
		text-align: center;
		width: 28px;
		height: 28px;
	}
</style>
