<template>
<div>
	<el-upload
		class="avatar-uploader"
		:style="compStyle"
		action=""
		:http-request="uploud"
		:show-file-list="false"
		:before-upload="beforeAvatarUpload">
		<img v-if="imageUrl " :style="imgStrle" @mouseleave="() => {image_shwo = false}" @mouseover="() => {image_shwo = true}" :src="getIotFileUrl(imageUrl)" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon" :style="imgStrle" ></i>
		<div v-show="imageUrl && image_shwo" :style="compStyle" @mouseleave="() => {image_shwo = false}" @mouseover="() => {image_shwo = true}" class="delete-i">
			<i @click.stop="handlePictureCardPreview()" style="margin-right: 25px;" class="el-icon-plus el-icon-zoom-in" />
			<i @click.stop="deleteFile()" class="el-icon-plus el-icon-delete"/>
		</div>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="getIotFileUrl(dialogImageUrl)" alt="">
		</el-dialog>
</div>
</template>
<script>
import { uploadFile } from "@/api/file";
import { getIotFileUrl } from "@/utils/hciot"
export default {
	name: 'uploadImg',
	props: {
		imageUrl: {
			type: String,
			default: ''
		},
		fileType: {
			type: Array,
			factory() { return ['image/jpeg']}
		},
		fileSize: {
			type: Number,
			default: 2097152 //字节 1m
		},
		compStyle: {
			type: [String,Object],
			default: ''
		},
		imgStrle: {
			type: [String,Object],
			default: ''
		}
	},
	data() {
		return {
			image_shwo: false,
			dialogVisible: false,
			dialogImageUrl: ''
		}
	},
	methods: {
		getIotFileUrl,
		uploud(file) {
			let formData = new FormData();
			formData.append("file", file.file);
			uploadFile(formData).then(response => {
				if (response.code === 200) {
					this.$emit('eventUrl', response.url)
				}
			}).catch(e => {
				console.log(e)
			})
		},
		handlePictureCardPreview(url) {
			this.dialogImageUrl = this.imageUrl;
			this.dialogVisible = true;
		},
		beforeAvatarUpload(file) {
			// console.log(file.type)
			const isJPG = this.fileType.indexOf(file.type) >= 0;
			const isLt2M = file.size < this.fileSize;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		deleteFile() {
			// this.imageUrl = ''
			this.$emit('eventUrl', '')
		}
	}
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
	width: 100%;
	height: 100%;
	justify-content: center;
    align-items: center;
	display: flex;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .delete-i {
		font-size: 18px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: aliceblue;
		background-color: rgb(42 42 42 / 0.6);
  }
</style>
