<template>
	<div>
		<el-upload ref="upload" action="#" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :http-request="requestUpload" :before-upload="beforeUpload">
			<el-button icon="el-icon-picture-outline">以图搜图</el-button>
		</el-upload>
		<el-dialog title="拖入图片或Ctrl+V粘贴截图" :visible.sync="open" :width="'60%'" :close-on-click-modal="false" @close="close" append-to-body>
			<input type="text" @paste="handlePaste" ref="inputRef" class="inputRef" />
			<div style="height: 350px" @drop="handleDrop" @dragover.prevent>
				<vue-cropper
					ref="cropper"
					:img="options.img"
					:info="true"
					:autoCropWidth="options.autoCropWidth"
					:autoCropHeight="options.autoCropHeight"
					:autoCrop="options.autoCrop"
					:fixedBox="options.fixedBox"
					:fixed="options.fixed"
					:full="options.full"
					:centerBox="options.centerBox"
					:outputSize="options.outputSize"
				/>
			</div>
			<div slot="footer" class="dialog-footer">
				<div class="lleft"><el-button type="primary" icon="el-icon-search" @click="uploadImg()">开始识图</el-button></div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
export default {
	components: { VueCropper },
	props: {
		value: {
			default: ''
		},
		fixed_number: {
			type: Array,
			default: () => [1, 1]
		}
	},
	data() {
		return {
			open: false,
			op: '以图搜图',
			options: {
				limit: 1,
				img: '', //裁剪图片的地址
				autoCrop: true, //是否默认生成截图框
				autoCropArea: 1,
				outputSize: 0.8, //裁剪生成图片的质量
				autoCropWidth: '',
				autoCropHeight: '',
				fixed: false, // 是否开启截图框宽高固定比例
				full: true, //是否输出原图比例的截图
				fixedBox: false, //固定截图框大小 不允许改变
				centerBox: true //截图框是否被限制在图片里面
			}
		};
	},
	methods: {
		init(file) {
			this.op = '拖入图片';
			this.beforeUpload(file);
		},
		handleDrop(event) {
			this.op = '拖入图片';
			event.preventDefault();
			const items = event.dataTransfer.items;
			for (let i = 0; i < items.length; i++) {
				// 判断是否为文件项
				if (items[i].kind === 'file') {
					const file = items[i].getAsFile();
					// 处理单个文件
					this.beforeUpload(file);
					break; // 只处理第一个找到的文件，如果需要处理多个文件则可以移除 break 语句
				}
			}
		},
		handlePaste(e) {
			this.op = '粘贴图片';
			const items = (e.clipboardData || e.originalEvent.clipboardData).items;
			for (let i = 0; i < items.length; i++) {
				const item = items[i];
				if (item.type.indexOf('image') !== -1) {
					const file = item.getAsFile();
					const reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = event => {
						this.options.img = event.target.result;
					};
					break;
				}
			}
		},
		// 覆盖默认的上传行为
		requestUpload() {},
		// 上传预处理
		beforeUpload(file) {
			if (file.type.indexOf('image/') == -1) {
				this.$modal.msgError('文件格式错误，请拖入图片类型,如：JPG，PNG后缀的文件。');
				return;
			} else {
				const reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = () => {
					const image = new Image();
					image.src = URL.createObjectURL(file);
					image.onload = () => {
						this.options.autoCropWidth = image.width;
						this.options.autoCropHeight = image.height;
						this.options.img = reader.result;
						this.open = true;
						this.$nextTick(() => {
							this.$refs.inputRef.focus();
							if (this.op == '以图搜图') {
								this.uploadImg();
							}
							this.op = '以图搜图';
						});
					};
				};
			}
		},
		// 上传图片
		uploadImg() {
			if (this.options.img == '') {
				this.$modal.msgError('请选取图片');
				return;
			}
			setTimeout(() => {
				this.$refs.cropper.getCropBlob(data => {
					let formData = new FormData();
					formData.append('file', data);
					this.ajax({ method: 'post', url: '/work/oss/similar/search', data: formData }).then(response => {
						this.$emit('input', response.data);
						this.$modal.msgSuccess('搜图完成');
						this.open = false;
					});
				});
			}, 300);
		},
		// 关闭弹窗表单重置
		close() {
			this.open = false;
			this.op = '以图搜图';
		}
	}
};
</script>
<style lang="scss">
.lleft {
	text-align: center;
}
.inputRef {
	position: absolute;
	height: 400px;
	width: 90%;
	border: 0px;
	outline: none;
}
</style>
