<template>
	<div class="trackquery">
		<div id="container" class="map"></div>
		<!-- <div class="contbtn" v-if="lineArr.length > 0">
      <div class="flex-demo">
        <el-button v-if="starshow" class="btncol" type="primary" @click.native="starmove">开始动画</el-button>
        <el-button v-if="!starshow" class="btncol" type="primary" @click.native="stopAnimation">停止动画</el-button>
      </div>
      <div class="flex-demo">
        <el-button
          :disabled="btndisabled"
          v-if="endshow"
          class="btncol"
          type="primary"
          @click.native="endmove"
          style="background-color: rgb(68, 138, 202);"
        >暂停动画</el-button>
        <el-button
          :disabled="btndisabled"
          v-if="!endshow"
          class="btncol"
          type="primary"
          @click.native="resumeAnimation"
          style="background-color: rgb(68, 138, 202);"
        >继续动画</el-button>
      </div>
    </div>-->
		<div class="state">
			<h3 class="title">请选择人脸图片</h3>
			<div class="cf" label-width="125px">
				<div class="re_img">
					<div class="re_img_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-btn">
							选择图片
							<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
						</div>
						<el-dialog title="裁剪图片" :append-to-body="true" :visible.sync="dialogVisible2" 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>
					<!--  <span class="re_span"><el-button class="imgsbuton" type="primary" @click="clickP('formLabelAlign')">搜索</el-button></span> -->
				</div>
			</div>
			<div class="click">
				<span>开始时间：</span>
				<el-date-picker v-model="sacrhDaTeFrom.startTime" value-format="yyyy-MM-dd" type="date"
					placeholder="选择日期"></el-date-picker>
			</div>
			<div class="click" style="margin-top:15px">
				<span>结束时间：</span>
				<el-date-picker v-model="sacrhDaTeFrom.endTime" type="date" value-format="yyyy-MM-dd"
					placeholder="选择日期"></el-date-picker>
			</div>
			<h3 style="text-align: center">请选择人像相识度</h3>
			<div class="percentage">
				<el-progress type="dashboard" :percentage="sacrhDaTeFrom.trajectoryThreshold" :color="colors">
				</el-progress>
				<div style="text-align: center">
					<el-button-group>
						<el-button icon="el-icon-minus" @click="decrease"></el-button>
						<el-button icon="el-icon-plus" @click="increase"></el-button>
					</el-button-group>
				</div>
			</div>
			<div class="btn">
				<el-button @click="submitUpload" type="primary">点击搜索</el-button>
			</div>
			<!--  <div class="btn">
        <el-button class="btncol" type="primary" @click.native="starmove">轨迹追踪</el-button>
      </div> -->
			<el-drawer :visible.sync="drawers" direction="rtl" size="40%">
				<el-table :data="gridData">
					<el-table-column property label="头像">
						<template slot-scope="scope">
							<img class="tabImg" :src="$replaceImgUrl(scope.row.faceUrl)" alt />
						</template>
					</el-table-column>
					<el-table-column property="time" width="180" label="时间"></el-table-column>
					<el-table-column property="featureVO.age" label="年龄"></el-table-column>
					<el-table-column property="featureVO.gender" label="性别"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" @click="delData(scope.row)">忽略</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-drawer>
		</div>
	</div>
</template>
<script>
	import VueCropper from "vue-cropperjs";
	export default {
		inject: ["refresh"],
		components: {
			VueCropper
		},
		data() {
			return {
				colors: [{
						color: "#f56c6c",
						percentage: 20
					},
					{
						color: "#e6a23c",
						percentage: 40
					},
					{
						color: "#5cb87a",
						percentage: 60
					},
					{
						color: "#1989fa",
						percentage: 80
					},
					{
						color: "#6f7ad3",
						percentage: 100
					}
				],
				sacrhDaTeFrom: {
					trajectoryThreshold: 80,
					url: "",
					startTime: "",
					endTime: ""
				},
				drawers: false,
				openImg: false,
				gridData: [{
						date: "2016-05-02",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},

					{
						date: "2016-05-01",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					},
					{
						date: "2016-05-03",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄"
					}
				],
				src: "/static/image/avatar.png", //先设置一个默认图片,
				uploadurl: `https://jsonplaceholder.typicode.com/posts/${this.value1}`,
				value1: "",
				imageUrl: "",
				imgSrc: "",
				btndisabled: true,
				loadshow: false,
				loadtext: "提交中",
				showtop: true,
				starshow: true,
				endshow: true,
				userinfo: {},
				cphList: [],
				sjmcList: [],
				cphid: "",
				cphmc: "",
				sjmcid: "",
				sjmc: "",
				startime: "",
				endtime: "",
				sigInfo: {},
				map: "",
				TrackImg: [],

				maxDate: [],
				yearData: [],
				sexData: [],
				colokData: [],
				idData: [],
				dialogVisible2: false,
				lineArr: [],
				lineArrs: [],
				p: '',
				goImg: require("../../../assets/img/go.png"),
				lineArrlast: [],
				lineArrPre: [],
				positions: [],
				marker: "",
				k: 0
			};
		},
		created() {
			let d = new Date
			const resDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
			this.sacrhDaTeFrom.endTime = resDate
			if (JSON.parse(localStorage.getItem("temp2"))) {
				let data = JSON.parse(localStorage.getItem("temp2"));
				this.sacrhDaTeFrom.trajectoryThreshold = data.trajectoryThreshold,
					this.imageUrl = data.url,
					this.sacrhDaTeFrom.url = data.url,
					this.sacrhDaTeFrom.startTime = data.startTime,
					this.sacrhDaTeFrom.endTime = data.endTime
			}
		},

		mounted() {
			// 初始化地图
			this.getmap();
		},
		methods: {
			//忽略头像
			delData(id) {
				this.$http.delete(`/track/people/${id.faceId}/${id.esId}`).then(res => {
					if (res.data.code == 0) {
						this.$message({
							message: "图片忽略成功",
							type: "success"
						});
						this.$http.get(`/track/people/${id.faceId}`).then(res => {
							this.gridData = res.data.data;
						});
					}
				});
			},
			//阀值控制
			increase() {
				this.sacrhDaTeFrom.trajectoryThreshold += 10;
				if (this.sacrhDaTeFrom.trajectoryThreshold > 100) {
					this.sacrhDaTeFrom.trajectoryThreshold = 100;
				}
			},
			decrease() {
				this.sacrhDaTeFrom.trajectoryThreshold -= 10;
				if (this.sacrhDaTeFrom.trajectoryThreshold < 0) {
					this.sacrhDaTeFrom.trajectoryThreshold = 0;
				}
			},
			//获取轨迹信息
			cancelCrop() {
				this.dialogVisible2 = 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.dialogVisible2 = false;
								this.sacrhDaTeFrom.url = res.data.data;
								this.imageUrl = res.data.data;
							} else if (res.data.code == 60001) {
								this.$message.warning(res.data.message);
							}
						})
						.catch(err => {
							console.log(err);
						});
				}
			},
			submitUpload() {
				let from = JSON.stringify(this.sacrhDaTeFrom);
				localStorage.setItem("temp2", from); //返回{"a":1,"b":2}
				//this.refresh()
				let arry = [];
				this.positions = [];
				let positionsArr = [];
				this.TrackImg = [];
				this.maxDate = [];
				this.yearData = [];
				this.colokData = [];
				this.idData = [];
				this.sexData = [];
				this.lineArrs = []
				this.$http.post("/track/people/track", this.sacrhDaTeFrom).then(res => {
					if (res.data.code == 0) {
						if (res.data.data.length == 0) {
							this.$message({
								message: '该人物此时间段没有轨迹信息，请重新选择条件',
								type: 'warning'
							});
							return false
						}
						localStorage.clear('temp2')
						for (let f of res.data.data) {
							this.TrackImg.push(f.faceUrl);
							this.maxDate.push(f.cameraInfoVO.cameraName);
							this.yearData.push(f.featureVO.age);
							this.colokData.push(f.time);
							this.idData.push(f.faceId);
							this.sexData.push(f.featureVO.gender);
							arry.push(
								`${f.cameraInfoVO.cameraLatitude},${f.cameraInfoVO.cameraLongitude}`
							);
							f.arr = [];
							f.arr.push(f.cameraInfoVO.cameraLongitude);
							f.arr.push(f.cameraInfoVO.cameraLatitude);
						}
						for (let u of res.data.data) {
							this.positions.push(u.arr);
						}
						this.lineArrs.push(arry.join("|"));
						this.$message({
							message: '获取轨迹成功',
							type: 'success'
						});
					} else {
						this.$message.error('获取失败');
					}
					this.getmap();
				});
			},
			cropImage() {
				this.imgBase64 = this.$refs.cropper.getCroppedCanvas().toDataURL();
			},
			cancelCrop() {
				this.dialogVisible2 = false;
				this.imageUrl = "";
			},
			setImage(e) {
				const file = e.target.files[0];
				if (!file.type.includes("image/")) {
					return;
				}
				const reader = new FileReader();
				reader.onload = event => {
					this.dialogVisible2 = true;
					this.imgSrc = event.target.result;
					this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
				};
				reader.readAsDataURL(file);
			},
			// 这个是点击查询，在上面设置个按钮绑定就可以查询到数据
			getlineArr() {
				this.btndisabled = true;
				this.starshow = true;
				this.endshow = true;
				this.map = "";
				this.lineArr = [];
				this.lineArrlast = [];
				this.lineArrPre = [];
				this.marker = "";
				this.k = 0;
				this.getmap();
				if (!this.cphmc && !this.sjmcid) {
					this.$vux.toast.show({
						text: "请选择司机或者车牌号",
						type: "text"
					});
					return false;
				}
				if (!this.startime) {
					this.$vux.toast.show({
						text: "请选择开始时间",
						type: "text"
					});
					return false;
				}
				if (!this.endtime) {
					this.$vux.toast.show({
						text: "请选择结束时间",
						type: "text"
					});
					return false;
				}
				this.loadshow = true;
				let dataobj = {
					moduleName: "asdasda",
					requestType: "GetData",
					tokenId: window["cutModel"].TokenId,
					START_DATE: this.startime,
					END_DATE: this.endtime,
					CAR_NUMBER: this.cphmc,
					DRIVER_NO: this.sjmcid
				};
				this.$axios
					.get("fsdsfdsf", dataobj)
					.then(res => {
						this.loadshow = false;
						res = JSON.parse(res);
						// console.log(res)
						if (res.Data.Statu_Code == 200) {
							if (res.Data.List == null || res.Data.List == []) {
								this.lineArr = [];
								this.$vux.toast.show({
									text: res.Data.Msg,
									type: "text"
								});
							} else {
								this.lineArr = res.Data.List;
							}
							this.getmap();
						} else {
							this.$vux.toast.show({
								text: res.Data.Msg,
								type: "warn",
								time: 3000
							});
						}
					})
					.catch(err => {
						this.loadshow = false;
						this.$vux.toast.show({
							text: "请求失败",
							type: "warn",
							time: 1000
						});
					});
			},

			/* kk(){
			   this.map.clearMap();
			}, */
			getmap() {
				//  测试数据
				//轨迹坐标集合
				this.lineArr = []
				this.lineArr = this.lineArrs
				let self = this;
				let polylineX, nColorLength, currentLen, latlonarr, pointList;
				let colors = [
					"#3366cc",
					"#dc3912",
					"#109618",
					"#990099",
					"#0099c6",
					"#dd4477",
					"#66aa00",
					"#316395",
					"#994499",
					"#22aa99",
					"#6633cc",
					"#329262",
					"#5574a6",
					"#3b3eac"
				];
				this.map = new AMap.Map("container", {
					zoom: 15,
					resizeEnable: true,
					center: [104.072797, 30.663422]
				});
				//点坐标集合
				var positions = this.positions;
				//点图片坐标集合
				let anchor = this.maxDate;
				let age = this.yearData;
				let sex = this.sexData;
				let time = this.colokData;
				let id = this.idData;

				var pos_icon = [];
				var pos_marker = [];
				var icon = [];
				var marker = [];

				for (let i = 0; i < positions.length; i++) {
					// 创建一个 Icon
					pos_icon[i] = new AMap.Icon({
						// 图标尺寸
						size: new AMap.Size(20, 30),
						// 图标的取图地址
						image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
						// 图标所用图片大小
						imageSize: new AMap.Size(20, 30)
					});
					//名称，时间，年龄，性别
					var labelContent =
						"<div class='ids' style=display:none>" +
						id[i] +
						"</div><div class='labelContent'>名称:" +
						anchor[i] +
						"</div><div class='labelContent'>时间:" +
						time[i] +
						"</div><div class='labelContent'>年龄:" +
						age[i] +
						"</div><div class='labelContent'>性别:" +
						sex[i] +
						"</div>";
					// 将 Icon 传入 marker
					pos_marker[i] = new AMap.Marker({
						position: positions[i],
						icon: pos_icon[i],
						anchor: "center", //设置锚点
						offset: new AMap.Pixel(0, 0) //设置偏移量
					});

					this.map.add(pos_marker[i]);

					// 创建一个 Icon
					var imageUrl = this.TrackImg[i];
					// imageUrl = this.$replaceImgUrl(imageUrl)
					icon[i] = new AMap.Icon({
						// 图标尺寸
						size: new AMap.Size(46, 28),
						// 图标的取图地址
						image: imageUrl,
						// 图标所用图片大小
						imageSize: new AMap.Size(46, 28)
					});
					// 将 Icon 传入 marker
					var labelOffset = new AMap.Pixel(23, 28);
					marker[i] = new AMap.Marker({
						position: positions[i],
						icon: icon[i],
						anchor: anchor[i], //设置锚点
						offset: new AMap.Pixel(0, 0), //设置偏移量
						label: {
							content: labelContent,
							offset: labelOffset
						}
					});
					marker[i].on("click", () => {
						console.log(this.drawers);

						this.drawers = true;
						console.log(111111111);
						console.log(this.drawers);

						let y = document.getElementsByClassName("ids")[i].innerHTML;
						this.$http.get(`/track/people/${y}`).then(res => {
							this.gridData = res.data.data;

						});
					});
					this.map.add(marker[i]);
				}
				if (this.lineArr.length > 0) {
					for (let j = 0; j < this.lineArr.length; j++) {
						polylineX = "polyline" + j;
						//计算取颜色的函数
						nColorLength = colors.length;
						currentLen = 0;
						if (j > nColorLength) {
							currentLen = j % 14;
						} else {
							currentLen = j;
						}
						latlonarr = this.lineArr[j].split("|");

						if (latlonarr.length > 0) {
							if (j < this.lineArr.length - 1) {
								this.lineArrPre = [];
								for (let i = 0; i < latlonarr.length; i++) {
									pointList = latlonarr[i].split(",");
									if (pointList.length > 0) {
										this.lineArrPre.push(
											new AMap.LngLat(pointList[1], pointList[0])
										);
									}
								}
								polylineX = new AMap.Polyline({
									map: this.map,
									path: this.lineArrPre,
									showDir: true,
									strokeColor: colors[currentLen], //线颜色
									strokeWeight: 6 //线宽
								});
							} else {
								//最后一条轨迹绘制移动轨迹
								for (let i = 0; i < latlonarr.length; i++) {
									pointList = latlonarr[i].split(",");
									if (pointList.length > 0) {
										this.lineArrlast.push(
											new AMap.LngLat(pointList[1], pointList[0])
										);
									}
								}
								polylineX = new AMap.Polyline({
									map: this.map,
									path: this.lineArrlast,
									showDir: true,
									strokeColor: colors[currentLen], //线颜色
									strokeWeight: 6 //线宽
								});
								if (this.lineArrlast.length > 0) {
									this.marker = new AMap.Marker({
										map: this.map,
										position: [this.lineArrlast[0].lng, this.lineArrlast[0].lat],
										icon: this.goImg,
										offset: new AMap.Pixel(-20, -13),
										autoRotation: true,
										angle: -90
									});
								}
								var passedPolyline = new AMap.Polyline({
									map: this.map,
									// path: lineArr,
									strokeColor: "#AF5", //线颜色
									strokeOpacity: 1, //线透明度
									strokeWeight: 6 //线宽
									// strokeStyle: "solid"  //线样式
								});
								this.marker.on("moving", function(e) {
									passedPolyline.setPath(e.passedPath);
								});
								this.marker.moveAlong(this.lineArrlast, 500);

							}
						}
					}
				}
				this.map.setFitView();
			},

			endmove() {
				this.endshow = false;
				this.marker.pauseMove();
			},
			resumeAnimation() {
				this.endshow = true;
				this.marker.resumeMove();
			},
			stopAnimation() {
				this.starshow = true;
				this.endshow = true;
				this.btndisabled = true;
				this.marker.stopMove();
			}
		}
	};
</script>
<style scoped>
	.percentage {
		margin: 0 auto;
		width: 130px;
		height: 180px;
	}

	.map>>>.amap-marker-label {
		border: none !important;
	}

	.crop-input {
		position: absolute;
		width: 75px;
		height: 40px;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
	}

	.re_img_box {
		margin: 10px auto;
	}

	.crop-demo-btn {
		position: relative;
		width: 70px;
		height: 40px;
		line-height: 40px;
		margin: 10px auto;
		background-color: #ecf5ff;
		color: #409eff;
		border: 1px solid #409eff;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
		cursor: pointer;
		text-align: center;
	}

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

	.pre-img {
		width: 150px;
		height: 150px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.re_img span {
		display: inline-block;
		margin-top: 70px;
		margin-left: 20px;
	}

	.re_img {
		display: flex;
		text-align: center;
	}

	.el-drawer__open .el-drawer.rtl {
		height: 800px;
		overflow: auto;
	}

	.tabImg {
		height: 100px;
		width: 100px;
	}

	.Img {
		height: 178px;
		width: 178px;
		border-radius: 6px;
	}

	.img-container {
		height: 178px;
		width: 178px;
		border: 1px dashed #ccc;
		text-align: center;
		border-radius: 6px;
		margin: 0 auto;
	}

	.btn {
		text-align: center;
		margin-top: 20px;
	}

	.title {
		margin-top: 50px;
		text-align: center;
	}

	.trackquery {
		height: 850px;
	}

	#container {
		height: 100%;
	}

	.avatar-uploader {
		border: 1px dashed #000;
		width: 178px;
		border-radius: 6px;
		cursor: pointer;
		margin: 20px auto;
		position: relative;
		overflow: hidden;
	}

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

	.click {
		margin-left: 20px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #000;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.state {
		height: 800px;
		width: 350px;
		background-color: rgba(230, 240, 238, 0.877);
		position: absolute;
		top: 0;
		left: 0;

		z-index: 20;
	}
</style>
