<template>
	<div class="warning">
		<div class="conditions-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="taskIds">
					<el-select v-model="formData.taskIds" placeholder="请选择任务列表" clearable @change="taskChange">
						<el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="摄像头" prop="cameraIds">
					<el-select v-model="formData.cameraIds" placeholder="请选择摄像头列表" clearable>
						<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-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> -->
				</el-form-item>
			</el-form>
		</div>


		<el-row :gutter="20" style="margin-top: 20px;">
			<el-col :span="8" v-for="(item,index) in warningList" :key=index.libId>
				<div style="background-color: #FFF;margin-bottom: 20px;border-radius: 2px;cursor: pointer;" @click="openTask(item)">
					<div style="height:40px;line-height:40px;display:flex;justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
						<i>
							<i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i>
						</i>
						<i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i>
					</div>
					<div style="position: relative;">
						<div style="display: flex;align-items: center;height: 150px;margin-left: 30px;">
							<div style="width: 120px;height: 120px;background: #F1F6F9;">
								<canvas width=120 height=120 :ref="'warningImage'+index">
								</canvas>
							</div>
							<!-- 可考虑用背景图 -->
							<div style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;">
								<img :src="$replaceImgUrl(item.faceUrl)" alt="目标图片" height="100%">
							</div>
							<div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;">
								<span><i>姓名：{{item.name}}</i></span>
								<span><i>性别：{{item.sex}}</i></span>
								<span><i>来源：{{item.libName}}</i></span>
								<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;font-family:Bahnschrift;">{{(item.score*100).toFixed(2)}}%</i></span>
							</div>
						</div>
						<div style="position: absolute;top:20px;right: 30px;">
							<img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
							<img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
							<img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 弹窗 任务详情 -->
		<task v-if="taskVisible" ref="task" @refreshTaskList></task>
		<!-- 地图详情 -->
		<warning-map ref="mapRef" @mapRefClick="mapRefClick"> </warning-map>
		<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>
</template>

<script>
	import Task from './barrier-task'
	import warningMap from './warning-map'
	export default {
		name: "watch",
		data() {
			return {
				// 任务列表
				taskList: [],
				// 摄像头列表
				cameraOptions: [],
				formData: {
					// dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[]
					dateValue: [],
					taskIds: "",
					cameraIds: "",
				},
				// 分页变量
				pageObj: {
					"cameraIds": [],
					"page": {
						"pageNo": 1,
						"pageSize": 9,
						"startTimestamp": null,
						"stopTimestamp": null,
					},
					taskIds: [],
				},
				total: 0,
				// 任务Id
				taskId: "",
				// 预警列表
				warningList: [],
				// 详情
				taskVisible: false,
				val: {}
			}
		},
		components: {
			Task,
			warningMap
		},
		// activated
		created() {
			// 第一次加载(非路由跳转)
			if (this.$route.params.taskId === undefined) {
				// 任务列表
				this.commonGetTaskList()
				// 预警列表
				this.getWarningList()
			}
			// 第一次加载(路由跳转，来自卡口)
			else if (this.$route.params.taskId === "") {
				// 任务列表
				this.commonGetTaskList()
				// 预警列表
				this.getWarningList()
			}
			// 第一次加载(路由跳转，来自布控)
			else {
				this.formData.taskIds = this.$route.params.taskId
				this.pageObj.taskIds = this.formData.taskIds.split()
				this.getWarningList()
				this.$http.post("/control/tasklist", {
					"pageNo": 1,
					"pageSize": 9999,
				}).then(res => {
					let taskList = res.data.data.records
					this.taskList = []
					taskList.forEach(item => {
						this.taskList.push({
							label: item.taskName,
							value: item.taskNo
						})
					})
					this.commonGetCameraList(this.formData.taskIds)
				})
			}
		},
		watch: {
			$route(to, from) {
				if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name ==
					"monitoring-warning") {

					this.formData = {
						dateValue: [],
						taskIds: "",
						cameraIds: "",
					}
					this.pageObj = {
						"cameraIds": [],
						"page": {
							"pageNo": 1,
							"pageSize": 9,
							"startTimestamp": null,
							"stopTimestamp": null,
						},
						taskIds: [],
					}
					this.cameraOptions = []
					// 非路由跳转
					if (this.$route.params.taskId === undefined) {
						return
					}
					// 路由跳转
					else {
						this.formData.taskIds = this.$route.params.taskId
						this.$http.post("/control/tasklist", {
							"pageNo": 1,
							"pageSize": 9999,
						}).then(res => {
							if (res.data.code == 0) {
								let taskList = res.data.data.records
								this.taskList = []
								taskList.forEach(item => {
									this.taskList.push({
										label: item.taskName,
										value: item.taskNo
									})
								})
								this.commonGetCameraList(this.formData.taskIds)
								let dateArr = this.formData.dateValue
								if (dateArr != null && 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.taskIds != "") {
									this.pageObj.page.pageNo = 1
									this.pageObj.taskIds = this.formData.taskIds.split()
									if (this.formData.cameraIds != "") {
										this.pageObj.page.pageNo = 1
										this.pageObj.cameraIds = this.formData.cameraIds.split()
									} else {
										this.pageObj.cameraIds = []
									}
								} else {
									this.pageObj.taskIds = []
								}
								this.getWarningList()
							}
						})
					}
				}
			}
		},
		methods: {
			// 打开单个预警信息
			openTask(val) {
				this.taskVisible = true
				this.$nextTick(() => {
					this.$refs.task.init(JSON.stringify(val))
				})
			},
			// 搜索
			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.taskIds != "") {
					this.pageObj.page.pageNo = 1
					this.pageObj.taskIds = this.formData.taskIds.split()
					// if (this.formData.cameraIds != "") {
					// 	this.pageObj.page.pageNo = 1
					// 	this.pageObj.cameraIds = this.formData.cameraIds.split()
					// } else {
					// 	this.pageObj.cameraIds = []
					// }
				} else {
					this.pageObj.taskIds = []
				}
				if (this.formData.cameraIds != "") {
					this.pageObj.page.pageNo = 1
					this.pageObj.cameraIds = this.formData.cameraIds.split()
				} else {
					this.pageObj.cameraIds = []
				}
				this.getWarningList()
			},
			// 页码
			handleCurrentChange(val) {
				this.pageObj.page.pageNo = val
				let dateArr = this.formData.dateValue
				if (dateArr == null || dateArr.length == 0) {
					this.pageObj.page.startTimestamp = null
					this.pageObj.page.stopTimestamp = null
				} else if (dateArr.length != 0) {
					let startDate = dateArr[0].getTime()
					let endDate = dateArr[1].getTime()
					this.pageObj.page.startTimestamp = startDate
					this.pageObj.page.stopTimestamp = endDate
				}
				if (this.formData.taskIds != "") {
					this.pageObj.taskIds = this.formData.taskIds.split()
					// if (this.formData.cameraIds != "") {
					// 	this.pageObj.cameraIds = this.formData.cameraIds.split()
					// } else {
					// 	this.pageObj.cameraIds = []
					// }
				} else {
					this.pageObj.taskIds = []
				}
				if (this.formData.cameraIds != "") {
					this.pageObj.cameraIds = this.formData.cameraIds.split()
				} else {
					this.pageObj.cameraIds = []
				}
				this.getWarningList()
			},
			// 表单重置
			resetClick(rueleName) {
				this.$refs[rueleName].resetFields()
			},
			// 切换任务
			taskChange() {
				this.cameraOptions = []
				this.formData.cameraIds = ""
				if (this.formData.taskIds != "") {
					this.commonGetCameraList(this.formData.taskIds)
				}
			},
			// 获取预警列表
			getWarningList(obj = this.pageObj) {
				this.$http.post("/warning/alarm", obj).then(res => {
					if (res.data.code === 0) {
						let warningList = res.data.data.records
						this.warningList = warningList
						this.total = Number(res.data.data.total);
						this.warningList.forEach((item, index, arr) => {
							this.$nextTick(() => {
								let canvas = this.$refs[`warningImage${index}`][0]
								let cxt = canvas.getContext("2d");
								cxt.clearRect(0, 0, 120, 120);
								let img = new Image();
								img.src = item.bgImg;
								img.onload = function() {
									cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0,
										120,
										120);
								}
							})
						})
					}
				})
			},
			// 获取任务列表
			commonGetTaskList() {
				this.$http.post("/control/tasklist", {
					"pageNo": 1,
					"pageSize": 9999,
				}).then(res => {
					if (res.data.code == 0) {
						this.taskList = []
						let taskList = res.data.data.records
						taskList.forEach(item => {
							this.taskList.push({
								label: item.taskName,
								value: item.taskNo
							})
						})
					}
				})
			},
			// 获取摄像头列表
			commonGetCameraList(taskId) {
				this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						let cameraList = res.data.data
						cameraList.forEach(item => {
							this.cameraOptions.push({
								label: item.cameraName,
								value: item.idFaceCamera
							})
						})
					}
				})
			},
			// 预警地图模式
			openMapClick() {
				this.$nextTick(() => {
					this.$refs.mapRef.init()
				})
			},
			// 地图模式回调
			mapRefClick() {}
		},
	}
</script>

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

	.conditions-div {
		background-color: #FFF;
		border-radius: 2px;
	}

	.conditions-div>>>.el-form-item {
		margin: 10px
	}
</style>
