<template>
	<div id='compare'>
       <div class="compare_content">
		   <p class="compare_title">分别上传两张图片进行比对</p>
		   <div class="compare_imgs">
			    <div class="compare_box">
					<div class="compare_img">
						<img v-if='imageUrl' :src="$replaceImgUrl(imageUrl)" class="pre-img">
						<div v-else class="avatar-uploader-icon">人物图像</div>
					</div>
					<div class="crop-demo-btn2" v-if="imageUrl" @click="clickDelImg()">删除图片</div>
					<div class="crop-demo-btn" v-else>
						上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
					</div>
					<el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'>
						<vue-cropper 
							ref='cropper' 
							:src="imgSrc" 
							:ready="cropImage" 
							:zoom="cropImage" 
							:cropmove="cropImage" 
							style="width:100%;height:300px;">
						</vue-cropper>
						<span slot="footer" class="dialog-footer">
							<el-button @click="cancelCrop">取 消</el-button>
							<el-button type="primary" @click="clickOK()">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				<div class="compare_box">
					<div class="compare_img">
						<img v-if='imageUrl2' :src="$replaceImgUrl(imageUrl2)" class="pre-img">
						<div v-else class="avatar-uploader-icon">人物图像</div>
					</div>
					<div class="crop-demo-btn2" v-if="imageUrl2" @click="clickDelImg2()">删除图片</div>
					<div class="crop-demo-btn" v-else>
						上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage2"/>
					</div>
					<el-dialog title="裁剪图片" :visible.sync="dialogVisible2" width="30%" :close-on-click-modal='false'>
						<vue-cropper 
							ref='cropper2' 
							:src="imgSrc2" 
							:ready="cropImage2" 
							:zoom="cropImage2" 
							:cropmove="cropImage2" 
							style="width:100%;height:300px;">
						</vue-cropper>
						<span slot="footer" class="dialog-footer">
							<el-button @click="cancelCrop2">取 消</el-button>
							<el-button type="primary" @click="clickOK2()">确 定</el-button>
						</span>
					</el-dialog>
				</div>
				
		   </div>
		   <p class="c_p"  v-if="state">相似度：<span class="similarity">{{similarity}}</span></p>
		   <div class="c_ps"  v-else></div>
		   <el-button class="c_b" type="primary" :disabled='btnState' @click="clickThan()">比对</el-button>
	   </div>
	</div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
	export default {
		data(){
			return{
				similarity:0,
				state:false,
				imageUrl: '',
				imageUrl2: '',
				uploadAction:'',
				uploadAction2:'',
				btnState:false,
				//第一张图的 模态框
				dialogVisible:false,
				dialogVisible2:false,
				imgSrc:'',
				imgSrc2:'',
				imgBase64:'',
				imgBase642:''
			}
		},
		components: {
            VueCropper
        },
		methods:{
			clickThan(){
				if(this.imageUrl && this.imageUrl2){
					let CompareRequestVo={
						urlList:[]
					}
					CompareRequestVo.urlList.push(this.imageUrl,this.imageUrl2)
					this.$http.post("/compare/oneToOne",CompareRequestVo)
					.then(res=>{
						if(res.data.code == 0){
							this.state=true
							let similarity=res.data.data.score * 100
							//保留小数点后两位 不四舍五入
							this.similarity=(parseInt(similarity*100)/100).toFixed(2) + '%'

							this.btnState=true
						}
						
					})
					.catch(err=>{
						console.log(err);
						
					})
				}else{
					this.$message.warning("请上传比对图片")
				}
               
			},
			//第一张图 
			setImage(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                //FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.dialogVisible = true;
					this.imgSrc = event.target.result;
                    this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
                };
                reader.readAsDataURL(file);
			},
			cropImage () {
				//this.imageUrl = this.$refs.cropper.getCroppedCanvas().toDataURL();
				this.imgBase64=this.$refs.cropper.getCroppedCanvas().toDataURL();
			},
			cancelCrop(){
                this.dialogVisible = false;
                this.imageUrl = ''
			},
			clickOK(){
				if(this.imgBase64){
					let compareRequestVo={
						urlList:[]
					}
					compareRequestVo.urlList.push(this.imgBase64)
					this.$http.post("/compare/oneToOneImage",compareRequestVo)
					.then(res=>{
						if(res.data.code == 0){
						   this.dialogVisible = false
						   this.imageUrl=res.data.data 
						}else if(res.data.code == 60001){
							this.$message.warning(res.data.message);
						}
						
					})
					.catch(err=>{
						console.log(err);
						
					})
				}
			  //this.dialogVisible = false
			},
			clickDelImg(){
				this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
					confirmButtonText: "确 定",
					cancelButtonText: "取 消",
					type: "warning"
				})
					.then(() => {
					   this.imageUrl=''
					   this.btnState=false
					   this.state=false
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			   
			},
			//第二张图
			setImage2(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                //FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.dialogVisible2 = true;
					this.imgSrc2 = event.target.result;
                    this.$refs.cropper2 && this.$refs.cropper2.replace(event.target.result);
                };
                reader.readAsDataURL(file);
			},
			cropImage2() {
				this.imgBase642=this.$refs.cropper2.getCroppedCanvas().toDataURL();
			},
			cancelCrop2(){
                this.dialogVisible2 = false;
                this.imageUrl2 = ''
			},
			clickOK2(){
				if(this.imgBase642){
					let compareRequestVo={
						urlList:[]
					}
					compareRequestVo.urlList.push(this.imgBase642)
					this.$http.post("/compare/oneToOneImage",compareRequestVo)
					.then(res=>{
						if(res.data.code == 0){
						   this.dialogVisible2 = false
						   this.imageUrl2=res.data.data 
						}else if(res.data.code == 60001){
							this.$message.warning(res.data.message);
						}
						
					})
					.catch(err=>{
						console.log(err);
						
					})
				}
			},
			clickDelImg2(){
				this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
					confirmButtonText: "确 定",
					cancelButtonText: "取 消",
					type: "warning"
				})
					.then(() => {
					   this.imageUrl2=''
					   this.btnState=false
					   this.state=false
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			   
			},
		}
	}
</script>

<style scoped>
#compare{
	background-color: #fff;
	margin-top: -14px;
}
.compare_content{
	width: 880px;
	margin: 0 auto;
	text-align: center;
}
.compare_imgs{
	display: flex;
	justify-content: space-between
}
.compare_title{
    padding-top: 20px;
}
.cropper-content .cropper {
    width: auto;
    height: 300px;
}
.compare_box{
	width: 100%;
	height: 450px;
}
.compare_img{
	width: 400px;
	height: 400px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	background-color: #FBFDFF;
}
.pre-img{
	width: 400px;
	height: 400px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
}
.crop-demo-btn{
	position: relative;
	width: 70px;
	height: 40px;
	line-height: 40px;
	margin-top: 20px;
	/* padding: 0 20px; */
	margin-left: 160px;
	background-color: #ECF5FF;
	color: #409eff;
	border: 1px solid #409eff;
	font-size: 14px;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
}
.crop-demo-btn2{
	position: relative;
	width: 70px;
	height: 40px;
	line-height: 40px;
	margin-top: 20px;
	/* padding: 0 20px; */
	margin-left: 160px;
	background-color: #FEF0F0;
	color:#F56C6C;
	border: 1px solid#FBC4C4;
	font-size: 14px;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
}
.crop-input{
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
.c_b{
	margin-bottom: 20px;
}
.avatar-uploader .el-upload {
	
    border-radius: 6px;
    cursor: pointer;
    position: relative;
	overflow: hidden;
  }
  .avatar-uploader-icon:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 400px;
    line-height: 400px;
	text-align: center;
	background-color: #FBFDFF;
  }
  .avatar {
    width: 400px;
    height: 400px;
    display: block;
  }
  .re_img_del{
		color: red;
		width: 150px;
		margin-top: 10px;
		text-align: center;
		cursor: pointer;
	}
  .c_p{
	margin-top: 50px;
	margin-bottom: 30px;
  }
  .c_ps{
	margin-top: 50px;
	margin-bottom: 30px;
	color: rgb(0, 0, 0);
	height: 45px;
  }
  .similarity{
	width:88px;
	height:22px;
	font-size:30px;
	font-family:Bahnschrift;
	font-weight:600;
	color:rgba(255,52,62,1);
	line-height:40px;
  }
</style>
