<template>
	<div>
		<!-- Start 图片上传组件 -->
		<el-upload class="common-upload-img-container"
			action="/uploadTODO"
			list-type="picture-card"
			:accept="accept"
			:file-list="fileList"
			:before-upload="beforeUpload"
			:on-preview="() => showViewer = true"
			:on-remove="handleRemove"
			:on-success="handleUploadSuc"
			:on-error="handleUploadFail"
			:disabled="disabled"
		>
			<i class="el-icon-plus"></i>
		</el-upload>
		<!-- End 图片上传组件 -->

		<!-- Start 图片预览组件 -->
		<el-image-viewer
			v-if="showViewer"
			:on-close="() => { showViewer = false }"
			:url-list="imgList"
			:initialIndex="0"
		/>
		<!-- End 图片预览组件 -->
	</div>
</template>

<script>
// 引入图片预览组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
	name: 'CommonUploadImg',
	components: { ElImageViewer },
	props: {
		name: { // 字段name
			type: String,
			default: '',
		},
		accept: {
			type: String,
			default: 'image/*',
		},
		limitSize: { // 上传图片大小限制，单位kb
			type: Number,
			default: 300,
		},
		disabled: {
			type: Boolean,
		},
		size: { // 图片尺寸限制
			type: Object,
			default: () => {
				return {
					width: null,
					height: null,
					minWidth: null,
					minHeight: null,
					maxWidth: null,
					maxHeight: null,
				}
			},
		},
	},
	data() {
		return {
			fileList: [],
			showViewer: false, // 图片预览组件
			initialIndex: 0, // 图片预览index
		}
	},
	computed: {
		imgList() {
			return this.fileList.map((item) => {
				return item.url
			})
		},
	},
	methods: {
		beforeUpload(file) {
			const isImg = /image\/\w+/.test(file.type)
			const isLtSize = (file.size / 1024) < this.limitSize
			if (!isImg) {
				this.$message.error('请上传图片!')
				return false
			} else if (!isLtSize) {
				this.$message.error(`上传图片大小不能超过 ${this.limitSize}KB!`)
				return false
			}
			let _this = this

			// 获取文件尺寸，判断尺寸在不在规定范围之内
			return new Promise(function (resolve, reject) {
				const { width, height, minWidth, minHeight, maxWidth, maxHeight } = _this.size
				let reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onload = function (theFile) {
					let image = new Image()
					image.src = theFile.target.result
					image.onload = function () {
						const w = this.width
						const h = this.height
						if ((width && w !== width) ||
							(height && h !== height) ||
							(minWidth && w < minWidth) ||
							(minHeight && h < minHeight) ||
							(maxWidth && w > maxWidth) ||
							(maxHeight && h > maxHeight)) {
							_this.$message.error(`上传图片尺寸${w}*${h}不对，请重新上传！`)
							reject(new Error('图片尺寸不对'))
						}
						resolve(file)
						_this.uploadImgLoading = true
					}
				}
			})
		},
		handleUploadSuc(response, file, fileList) {
			if (response.code !== 200) {
				this.$message.error(response.msg || '上传失败，稍后重试')
				return
			}
			fileList = []
			const { url } = response.data
			// this.fileList = [{ name: file.name, url: file.url }]
			this.fileList = [file]
			this.$emit('on-success', url, this.name)
		},
		handleUploadFail() {
			this.$message.error('上传失败，稍后重试')
		},
		handleRemove() {
			this.fileList = []
			this.$emit('on-remove', '', this.name)
		},
	},
}
</script>

<style lang="scss">
.common-upload-img-container {
  .el-upload--picture-card, .el-upload-list__item {
    width: 120px;
    height: 120px;
  }
	.is-disabled {
		& + .el-upload--picture-card {
			cursor: not-allowed;
			border-color: #C0C4CC!important;
			.el-icon-plus {
				color: #C0C4CC!important;
			}
		}
	}
}
.is-error .common-upload-img-container {
  .el-upload--picture-card {
    border-color: #F56C6C;
  }
  .el-icon-plus {
    color: #F56C6C;
  }
}
</style>