<template>
	<div class="common-page device-manage">

		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->

				<label class="el-form-item-label" style="font-weight: 500;">车牌号</label>
				<el-input v-model="query.vehiIdno" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>

				<label class="el-form-item-label" style="font-weight: 500;">报警类型</label>
				<el-select v-model="query.name" placeholder="请选择报警类型" style="width:180px;">
					<el-option label="接打电话" value="接打电话"></el-option>
					<el-option label="分神驾驶" value="分神驾驶"></el-option>
					<el-option label="前向碰撞" value="前向碰撞"></el-option>
					<el-option label="疲劳驾驶" value="疲劳驾驶"></el-option>
					<el-option label="接近报警" value="接近报警"></el-option>
				</el-select>

				<label class="el-form-item-label" style="font-weight: 500;">时间范围</label>
				<el-date-picker v-model="query.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
				<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>

				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
			</div>
		</div>

    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>视频AI报警历史</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName" height="66vh">
								<el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
								<el-table-column prop="road" label="所属车队" align="center"></el-table-column>
								<el-table-column prop="name" label="报警类型" align="center"></el-table-column>
								<el-table-column prop="fileTime" label="报警时间" align="center"></el-table-column>
								<el-table-column label="查看图片" align="center">
									<template slot-scope="scope">
										<el-image v-if="scope.row.type == 0" style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
										<div v-else>暂无图片</div>
									</template>
								</el-table-column>
								<el-table-column label="查看视频" align="center">
									<template slot-scope="scope">
										<el-button v-if="scope.row.type == 1" size="mini" type="primary" @click="showVideo(scope.row)">查看视频</el-button>
										<div v-else>暂无视频</div>
									</template>
								</el-table-column>
								<el-table-column prop="updateTime" label="解除报警时间" align="center"></el-table-column>
								<el-table-column prop="updateBy" label="处理人" align="center"></el-table-column>
								<el-table-column label="操作" align="center" fixed="right">
									<template slot-scope="scope">
										<el-button v-if="scope.row.status == 0" size="mini" type="primary" @click="relieveAlarm(scope.row)">解除报警</el-button>
										<div v-else>已解除报警</div>
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="videoMengCeng" v-if="videoSrcShow">
			<div class="closeVideoDiv" @click="closeVideo"><i class="el-icon-close"></i></div>
			<video :src="videoSrc" autoplay controls height="700px" width="1200px" class="videoShowDiv"></video>
		</div>

	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	name: 'VideoAlarmList',
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			carInformationData:[],
			videoSrc:'',
			videoSrcShow:false,
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		loadData() {
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			if(this.query.startTime){
				param.startTime = this.currentTime(this.query.startTime);
			}
			if(this.query.endTime){
				param.endTime = this.currentTime(this.query.endTime);
			}

			var paramAll = {...this.query};
			paramAll.page = 0;
			paramAll.size = 99999;
			if(this.query.startTime){
				paramAll.startTime = this.currentTime(this.query.startTime);
			}
			if(this.query.endTime){
				paramAll.endTime = this.currentTime(this.query.endTime);
			}

			this.$nextTick(()=>{
				//获取车辆信息(主要用来匹配车队)
				HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res1) => {
					if(res1.code == 200){
						this.carInformationData = res1.data.content;
						//获取报警历史数据
						HttpReq.truckDispatching.apiCameraUrllistQuery(param).then((res2) => {
							if(res2.code == 200){
								let lastData1 = [];
								res2.data.forEach((item2,index)=>{
									res1.data.content.forEach((item1,index1)=>{
										if(item2.vehiIdno == item1.number){
											item2.road = item1.road;
											lastData1.push(item2);
										}
									})
								})
								this.tableData = lastData1;
							}
						})
						//获取报警历史数据总数
						HttpReq.truckDispatching.apiCameraUrllistQuery(paramAll).then((res3) => {
							if(res3.code == 200){
								this.total = res3.data.length;
							}
						})

					}
				})
			})

		},
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},	
		//点击搜索
		toSearch() {
			this.page = 1;
			this.loadData();
		},
		//重置搜索
		clearLimit(){
			this.page = 1;
			this.size = 10;
			this.query = {};
			this.loadData();
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		//时间格式处理
		currentTime(time){
			var date = new Date(time);
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
			var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
			var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			//修改小时格式
			if (hours >= 0 && hours <= 9) {
				hours = "0" + hours;
			}
			//修改分钟格式
			if (minutes >= 0 && minutes <= 9) {
				minutes = "0" + minutes;
			}
			//修改秒格式
			if (seconds >= 0 && seconds <= 9) {
				seconds = "0" + seconds;
			}
			//获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
			let currentFormatDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			return currentFormatDate;
		},
		//解除报警
		relieveAlarm(item){
			this.$confirm('请确认是否处理此条报警信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let lastData = {...item};
				lastData.status = 1;
				HttpReq.truckDispatching.apiCameraUrlUpdate(lastData).then((res) => {
					if(res.code == 200){
						this.$notify({
							title: '车队修改成功！',
							type: 'success',
							duration: 2500
						});
						this.loadData()
					}else{
						this.$notify({
							title: res.msg,
							type: 'error',
							duration: 2500
						})
					}
				})
				this.loadData();
			}).catch(() => {});
		},
		//查看视频
		showVideo(item){
			this.videoSrcShow = true;
			this.videoSrc = item.downloadUrl;
		},
		//关闭视频
		closeVideo(){
			this.videoSrcShow = false;
			this.videoSrc = '';
		}
	},
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}
	
	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
	.videoMengCeng{
		width: 100%;
		height: 100%;
		padding: 4vh 0px 0px 10vw;
		box-sizing: border-box;
		background-color: rgba(0,0,0,0.8);
		z-index: 50;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.closeVideoDiv{
		position: absolute;
		right: 2vw;
		top: 2vh;
		color: white;
		z-index: 51;
		font-size: 50px;
		font-weight: 600;
		cursor: pointer;
	}
</style>
