<template>
	<div class="allPic">
		<div><span class="el-icon-arrow-left cursor-class" @click="returnAllPicStateClick()"><i class="font-fourteen">返回</i></span></div>
		<p><i class="eighteen-font">全部抓拍</i></p>
		<div class="item-div">
			<el-form ref="formRef" :model="formData" :inline="true">
				<el-form-item label="抓拍时间" prop="dateValue">
					<el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间"
					 end-placeholder="结束时间" clearable>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="区域" prop="equipmentArr">
					<el-cascader :options="areaOptions" v-model="formData.equipmentArr" clearable :props="{ checkStrictly: true }"
					 @change="areaChange" placeholder="请选择摄区域" style="width: 400px;">
					</el-cascader>
				</el-form-item>
				<el-form-item label="摄像头列表" prop="camera">
					<el-select v-model="formData.camera" placeholder="请选择摄像头列表" clearable style="width: 300px;">
						<el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="float:right">
					<el-button type="primary" @click="clickSearch()">搜索</el-button>
					<el-button @click="resetClick('formRef')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="pic-list-div">
			<div class="pic-div" v-for="(item,i) in imageList">
				<div class="pic-class" @mouseover="btnOver(item,$event)" @mouseout="btnOut(item,$event)">
					<canvas width=120 height=120 :ref="'image'+i">
					</canvas>
					<div class="search-btn" v-show="item.btnState">
						<i class="cursor-class font-fourteen" style="color: #FFF;" @click="toRetrieval(item)">检 索</i>
					</div>
				</div>
				<div class="pic-text">
					<span><i>卡口：{{item.cameraName}}</i></span>
					<span><i>时间：{{item.date}}</i></span>

					<div style="display: flex;flex-wrap:wrap">
						<template v-for="(item1,index) in item.faces">
							<span><i>特征：</i></span>
							<el-tag type="info"><i>{{item1.feature.gender}}</i></el-tag>
							<el-tag type="info"><i>{{item1.feature.age}}</i></el-tag>
						</template>
					</div>
					<!-- <div v-if="item.faces.length > 1" style="display: flex;flex-wrap:wrap">
						<span><i>选择头像：</i></span>
						<template v-for="(item1,index) in item.faces">
							<el-button size="mini" @click="changePicture(item1,i)">{{index+1}}</el-button>
						</template>
					</div>
					<div v-else>
						<span><i>头像数量：1</i></span>
					</div> -->
				</div>
			</div>
		</div>
		<div style="clear:both"></div>
		<div>
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="pageObj.page.pageNo" :page-size="pageObj.page.pageSize"
			 layout="total,prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 区域列表
				areaOptions: [],
				// 摄像头列表
				cameraOptions: [],
				// allPicState: false,
				// equipmentList: [],
				formData: {
					dateValue: [],
					equipmentArr: [],
					camera: "",
				},
				// 分页变量
				total: 0,
				pageObj: {
					"cameraId": "1001",
					"page": {
						"pageNo": 1,
						"pageSize": 16,
						"startTimestamp": null,
						"stopTimestamp": null,
					},
				},
				// 图片参数
				imageList: [],
				// 单个头像信息
				singlePicture: {},

			}
		},
		methods: {
			// 切换区域
			areaChange(e) {
				let areaLastStr = ""
				if (e.length > 0) {
					this.cameraOptions = []
					this.formData.camera = ""
					areaLastStr = String(e[e.length - 1])
					this.$http.get(`/camera/getRegion/${areaLastStr}`).then(res => {
						if (res.data.code === 0) {
							this.cameraOptions = res.data.data
						} else {
							console.log(res)
						}
					})
				}
			},
			// 查询
			clickSearch() {
				let dateArr = this.formData.dateValue
				if (dateArr == null || dateArr.length == 0) {
					this.pageObj.page.startTimestamp = null
					this.pageObj.page.stopTimestamp = null
					this.pageObj.page.pageNo = 1
				} else if (dateArr.length != 0) {
					let startDate = dateArr[0].getTime()
					let endDate = dateArr[1].getTime()
					this.pageObj.page.pageNo = 1
					this.pageObj.page.startTimestamp = startDate
					this.pageObj.page.stopTimestamp = endDate
				}
				if (this.formData.camera != "") {
					this.pageObj.cameraId = this.formData.camera
					this.pageObj.page.pageNo = 1
				} else {
					this.pageObj.cameraId = ""
				}
				this.commonSearch(this.pageObj)
			},
			// 页码
			handleCurrentChange(val) {
				this.pageObj.page.pageNo = val
				this.commonSearch(this.pageObj)
			},
			// 初始化
			init(param, treeArr) {
				this.$refs['formRef'].resetFields()
				this.formData.equipmentArr = treeArr
				this.formData.camera = param
				this.pageObj.cameraId = param
				this.commonSearch(this.pageObj)
				// 调用树形结构数据
				this.$http.get("/camera/getRegion").then(res => {
					if (res.data.code === 0) {
						this.areaOptions = res.data.data
					}
				})
				this.areaChange(treeArr)
			},
			// 返回父页面
			returnAllPicStateClick() {
				this.$emit('returnAllPicState', "11")
			},
			// 表单重置
			resetClick(formName) {
				this.$refs[formName].resetFields()
			},
			// 鼠标事件
			btnOver(row, $event) {
				this.imageList.forEach((item, index, arr) => {
					if (row.alarmId === item.alarmId) {
						arr[index].btnState = true
					}
				})
			},
			btnOut(row, $event) {
				this.imageList.forEach((item, index, arr) => {
					if (row.alarmId === item.alarmId) {
						arr[index].btnState = false
					}
				})
			},
			// 跳转检索页面
			toRetrieval(row) {
				let params = {}
				if (this.singlePicture === undefined || row.faceRect.faceBgUrl != this.singlePicture.faceBgUrl) {
					params = row.faceRect
				} else {
					params = this.singlePicture
				}
				console.log(params)
				this.$router.push({
					name: 'monitoring-retrieval',
					params,
				})
			},
			// // 切换头像
			// changePicture(row, i) {
			// 	this.singlePicture = row.faceRect
			// 	let canvas = this.$refs[`image${i}`][0]
			// 	let cxt = canvas.getContext("2d");
			// 	cxt.clearRect(0, 0, 120, 120);
			// 	let img = new Image();
			// 	img.src = row.faceRect.faceBgUrl;
			// 	img.onload = function() {
			// 		cxt.drawImage(img, row.faceRect.x, row.faceRect.y, row.faceRect.w, row.faceRect.h, 0, 0, 120, 120);
			// 	}
			// },
			// 公共查询
			commonSearch(pageObj) {
				this.$http.post("/warning/bayonet", pageObj).then(res => {
					console.log(res)
					if (res.data.code === 0) {
						let {
							page,
							result
						} = res.data.data
						this.total = Number(page.total)
						this.imageList = result.map(item => {
							// 初始化检索状态为false
							item.btnState = false
							// 将背景图片url添加到背景图片头像的对象
							item.faces.map(item1 => {
								item1.faceRect.faceBgUrl = item.faceBgUrl
								// item1.faceRect.faceBgUrl = item.faceBgUrl
								return item1
							})
							// 将第一个人头对象提到上一级
							item.faceRect = item.faces[0].faceRect
							return item
						})
						this.imageList.forEach((item, index, arr) => {
							this.$nextTick(() => {
								let canvas = this.$refs[`image${index}`][0]
								let cxt = canvas.getContext("2d");
								cxt.clearRect(0, 0, 120, 120);
								let img = new Image();
								img.src = item.faceBgUrl;
								img.onload = function() {
									cxt.drawImage(img, item.faceRect.x, item.faceRect.y, item.faceRect.w, item.faceRect.h, 0, 0, 120, 120);
								}
							})
						})
					} else {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style scoped>
	i {
		font-style: normal;
		font-family: "Noto Sans SC";
		color: #333
	}

	.font-fourteen {
		font-size: 14px;
		font-weight: 400;
	}

	.eighteen-font {
		font-size: 18px;
		font-weight: bold;
	}

	.cursor-class {
		cursor: pointer;
	}

	.item-div {
		background-color: #FFF;
	}

	.item-div>>>.el-form-item {
		margin: 10px;
	}

	.pic-list-div {}

	.pic-div {
		width: 24%;
		background: #FFF;
		float: left;
		margin: 5px 0.5%;
		padding: 10px;
		display: flex;
		box-shadow: 0px 0px 5px 0px rgba(19, 22, 30, 0.1);
		border-radius: 2px;
	}

	.pic-class {
		display: flex;
		align-items: center;
		position: relative;
	}

	.pic-text {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 5%;
	}

	.search-btn {
		background: #000000;
		line-height: 2;
		width: 100%;
		color: #FFF;
		text-align: center;
		position: absolute;
		opacity: 0.5;
		bottom: 0;
	}
</style>
