<template>
	<div id="group" v-if="group_state">
		<div>
			<el-upload class="avatar-uploader" action="uploadAction" :show-file-list="false" list-type="picture-card"
				multiple :limit='30' :http-request="myUpload" :on-exceed="handleExceed"
				:before-upload="beforeAvatarUpload">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<div v-else class="avatar-uploader-icon">点击上传人物图像</div>
			</el-upload>
		</div>
		<div class="group_imgs">
			<div class="group_imgs_img" v-for="(index,key) in imgsUrlArr" :key=key>
				<img :src="$replaceImgUrl(index)" alt="">
				<i class="el-icon-circle-close re_img_del" @click="clickDelImg(`${index}`)"></i>
			</div>
		</div>
		<div class="group_button">
			<span class="group_button_p">比对阈值(%)：</span>
			<el-input-number v-model="num" @change="handleChange" :step="10" :min="1" :max="100" label="比对阈值">
			</el-input-number>
			<el-button type="primary" @click="clickGroup()">开始比对</el-button>
		</div>
	</div>
	<div v-else>
		<div class="returnback" @click="returnBack()">
			< 返回</div>
				<div class="group_result">比对结果</div>

				<div class="group_topbox" v-for="(index,key) in imgsResult" :key=key>
					<el-row>
						<el-col :span="3">
							<div class="topbox_l">
								<div class="topbox_l_pic">
									<img :src="index.resultUrl" alt="">
								</div>
							</div>
						</el-col>
						<el-col :span="21">
							<div class="topbox_r">
								<div class="topbox_r_pic" v-for="(j,key) in index.compareResultSubVoList" :key=key>
									<img :src="j.url" alt="">
									<div class="topbox_r_s"><span class="topbox_r_ss">相似度：</span><span
											class="topbox_r_sss">{{j.score}}</span></div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				uploadAction: '',
				num: 80,
				imageUrl: '',
				imgsUrlArr: [],
				imgsUrlArrLength: '',
				imgsResult: [],
				fileList: [],
				group_state: true
			};
		},
		methods: {
			handleExceed(files, fileList) {
				fileList.length = this.imgsUrlArrLength
				fileList = this.imgsUrlArr
				console.log(fileList.length);

				this.$message.warning(
					`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.imgsUrlArr.length} 个文件`);
			},
			myUpload(content) {
				let files = new FormData();
				files.append("files", content.file);

				this.$http.post("/file/picture/upload/multiFaceImages", files)
					.then(res => {
						if (res.data.code == 0) {
							this.imgsUrlArr.push(res.data.data.successFileUrlList[0])
							this.imgsUrlArrLength = this.imgsUrlArr.length
						} else if (res.data.code == 60001) {
							this.$message.warning(res.data.message)
						}
					})
					.catch(err => {
						console.log(err);

					})

			},
			beforeAvatarUpload(file) {
				//['image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
				//const isJPG = file.type === ['image/jpeg', 'image/png'];
				const testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!testmsg) {
					this.$message.error('上传头像图片只能是 JPG 、PNG、JPEG格式!');
				}
				/* if (!isLt2M) {
				  this.$message.error('上传头像图片大小不能超过 2MB!');
				} */
				return testmsg;
			},
			//删除 图片
			clickDelImg(url) {
				this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
						confirmButtonText: "确 定",
						cancelButtonText: "取 消",
						type: "warning"
					})
					.then(() => {
						this.imgsUrlArr.map((val, i) => {
							if (val == url) {
								this.imgsUrlArr.splice(i, 1)
							}
						})
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});

			},
			//开始 比对 
			clickGroup() {
				let CompareRequestVo = {
					minScore: this.num / 100,
					urlList: this.imgsUrlArr
				}

				this.$http.post("/compare/grouping", CompareRequestVo)
					.then(res => {
						if (res.data.code == 0) {
							this.group_state = !this.group_state
							this.imgsResult = res.data.data.compareResultSubVoList
							for (let i of this.imgsResult) {
								for (let j of i.compareResultSubVoList) {
									if (j.score) {
										//保留小数点后两位 不四舍五入
										j.score = (parseInt(j.score * 100 * 100) / 100).toFixed(2) + '%'
									}
								}
							}
						} else {
							this.$message.warning(res.data.message)
						}

					})
					.catch(err => {
						console.log(err);

					})
			},
			//返回
			returnBack() {
				this.group_state = !this.group_state
				this.imgsUrlArr = []
			},
			handleChange(value) {}
		}
	}
</script>

<style scoped>
	#group {
		width: 100%;
		height: 620px;
		background-color: #fff;
	}

	#group .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	#group .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	#group .avatar-uploader-icon {
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}

	.el-upload--picture-card i {
		font-size: 14px
	}

	#group .avatar {
		width: 150px;
		height: 150px;
		display: block;
	}

	.re_img_del {
		color: red;
		width: 150px;
		text-align: center;
		cursor: pointer;
		margin-bottom: 10px;
		margin-left: 20px;
	}

	#group .group_imgs {
		width: 100%;
		height: 360px;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
		overflow-x: hidden;
		margin: 20px 0px 20px 0px
	}

	#group .group_imgs_img img {
		width: 150px;
		height: 150px;
		margin: 0px 10px 10px 20px;
		display: flex;
		flex-direction: column
	}

	#group .group_imgs::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	#group .group_imgs::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: #999;
		-webkit-border-radius: 4px;
		outline: 2px solid #fff;
		outline-offset: -2px;
		border: 2px solid #fff;
	}

	#group .group_imgs::-webkit-scrollbar-track-piece {
		background-color: #F1F1F1;
		-webkit-border-radius: 0;
		background-color: #fff;
	}


	#group .group_button {
		width: 100%;
		display: flex;
		justify-content: center
	}

	.group_button .group_button_p {
		display: block;
		line-height: 40px;
	}

	.el-input-number {
		width: 150px;
		margin-right: 20px;
	}

	/* 比对结果 */
	.returnback {
		cursor: pointer;
		width: 50px;
	}

	.group_result {
		height: 18px;
		font-size: 18px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin: 10px 0px 10px 0px;
	}

	.group_topbox {
		width: 100%;
		height: 230px;
		background-color: #fff;
		margin-bottom: 20px;
	}

	.topbox_r {
		width: 100%;
		height: 230px;
	}

	/* 左边图片 */
	.topbox_l {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.topbox_l img {
		width: 150px;
		height: 150px;
	}

	.topbox_l_pic {
		margin: 0 auto;
	}

	/* 比对结果右边 */
	.topbox_r {
		max-height: 440px;
		border-left: 1px solid rgba(241, 246, 249, 1);
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.topbox_r::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.topbox_r::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: #999;
		-webkit-border-radius: 4px;
		outline: 2px solid #fff;
		outline-offset: -2px;
		border: 2px solid #fff;
	}

	.topbox_r::-webkit-scrollbar-track-piece {
		background-color: #F1F1F1;
		-webkit-border-radius: 0;
		background-color: #fff;
	}

	.topbox_r_pic {
		width: 150px;
		height: 190px;
		margin: 20px 0px 20px 28px;
	}

	.topbox_r .topbox_r_pic img {
		width: 150px;
		height: 150px;
	}

	.topbox_r .topbox_r_s {
		width: 100%;
		height: 40px;
		font-weight: 400;
		font-family: Source Han Sans CN;
		border: 1px solid rgba(241, 246, 249, 1);
		text-align: center;
		padding-top: 8px;
	}

	.topbox_r .topbox_r_ss {
		font-size: 14px;
		color: rgba(51, 51, 51, 1);
	}

	.topbox_r .topbox_r_sss {
		font-size: 18px;
		color: rgba(255, 52, 62, 1);
	}
</style>
