<template>
	<el-upload
		:class="{'avatar-img avatar-uploader':imageUrl,'avatar-uploader':!imageUrl,'user-avatar-uploader':upload_type==2}"
		:action="oss.host"
		:data="upload_data"
		:show-file-list="false"
		:on-success="handleAvatarSuccess"
		:on-error="handleAvatarError"
		:before-upload="beforeAvatarUpload"
	>
		<div v-if="upload_type ==1">
			<el-image v-if="imageUrl" :src="imageUrl" class="avatar" fit="cover" ></el-image>
			<div v-else class="avatar-icon">
				<div class="avatar-uploader-icon"><el-icon-Plus /></div>
			</div>
		</div>
		<div class="userAvatar" v-else>
			<el-image :src="this.$store.state.global.login_avatar" class="avatar" fit="cover" ></el-image>
		</div>
	</el-upload>
</template>

<script>

export default {
	name: "uploadImg",
	props:{
		url:{
			type:String,
			default: ""
		},
		// type 1 默认的 2 用户头像的
		type:{
			type:[String,Number],
			default: 1
		}
	},
	data(){
		return{
			upload_type:1,
			imageUrl:'',
			oss:{
				host:''
			},
			upload_data:{}
		}
	},
	watch:{
		url:{
			handler(newVal){
				this.imageUrl = newVal;
			},
			immediate:true,
			deep:true
		},
		type:{
			handler(newVal) {
				this.upload_type = newVal;
			},
			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
			this.imageUrl = this.oss.host+'/'+file.data.filename;
			this.$emit('parentParams',this.imageUrl);
		},
		// 上传失败
		handleAvatarError(){
			this.$message.warning('上传失败请重新上传');
		}

	}
}
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
	width: 80px;
	height: 80px;
	display: block;
}

.avatar-uploader{
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
	height: 80px;
	width: 80px;
}
.user-avatar-uploader{
	width: 70px;
	height: 70px;
}
.avatar-img{
	border: none;
}

.avatar-uploader:hover {
	border-color: var(--el-color-primary);
}
.avatar-icon{
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.avatar-icon .avatar-uploader-icon {
	color: #8c939d;
	text-align: center;
	width: 28px;
	height: 28px;
}
.userAvatar{
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	.avatar{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
</style>
