<template>
	<el-header>
		<!-- 右侧导航栏折叠按钮 -->
		<span class="btn-collapse" @click="collapseChage" :title="collapse ? '展开侧边栏' : '收起侧边栏'">
			<i class="el-icon-menu"></i>
		</span>
		<!-- 系统标题 -->
		<h3 class="header-title margin-l-10">小之安全智能管理系统</h3>
		<div class="header-right">
			<div class="btn-info">
				<span class="datatime">{{datatime}}</span>
			</div>
			<div class="btn-info voiceimg">
				<img src="../../assets/img/dk.png" alt="" v-if="!vocieStatus" @click="voicfun" />
				<img src="../../assets/img/jy.png" alt="" v-else @click="voicfun1" />

			</div>
			<!-- 消息中心 -->
			<div class="btn-info">
				<el-tooltip placement="bottom">
					<span slot="content">正在开门报警</span>
					<!-- <router-link to="/info"> -->
					<i class="el-icon-bell" @click="showbar"></i>
					<!-- </router-link> -->
				</el-tooltip>
				<span class="btn-info-tip" v-if="message"></span>
			</div>
			<!-- 用户头像 -->
			<img class="header-portrait" src="static/portrait.png" alt="用户头像">
			<!-- 用户名下拉菜单 -->
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					{{username}}
					<i class="el-icon-caret-bottom"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<audio ref='audio' muted :src='audiosrc' controls="controls" :autoplay="true" class="voice" loop></audio>
		<el-drawer title="" :visible.sync="drawer" custom-class="drawlist" size="100%" :before-close="handleClose"
			:show-close="false">
			<el-row class="marginTop">
				<div class="tablecell">
					<el-table ref="multipleTable" v-if="!activeiconfont" :data="tableData" :border="true"
						tooltip-effect="dark" style="width: 100%" :header-cell-style="rowClass"
						:cell-style="{fontSize:'12px'}" stripe height="590">
						<!-- <el-table-column type="selection" width="55">
						</el-table-column> -->
						<el-table-column prop="name" label="房间名称">
						</el-table-column>
						<el-table-column prop="deviceNum" label="设备名称">
						</el-table-column>
						<el-table-column prop="createAt" label="开门时间">
						</el-table-column>
						<!-- 	<el-table-column prop="deviceNum" label="设备名称" width="150">
						</el-table-column>
						<el-table-column prop="isOnline" label="设备状态" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.isOnline==0">离线</span>
								<span v-if="scope.row.isOnline==1">在线</span>
							</template>
						</el-table-column>
						<el-table-column prop="roomName" label="安装点位" show-overflow-tooltip> </el-table-column>
						<el-table-column prop="accessPlatform" label="类型" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.accessPlatform==0">锁平台</span>
								<span v-if="scope.row.accessPlatform==1">电信</span>
								<span v-if="scope.row.accessPlatform==2">移动</span>
								<span v-if="scope.row.accessPlatform==3">联通</span>
							</template>
						</el-table-column>
						<el-table-column prop="lastReportAt" label="最近事件时间" label-width="200px" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="enterpriseName" label="所属单位" show-overflow-tooltip>
						</el-table-column> -->
					</el-table>
					<div class="roomcontent" v-else>
						<div class="roomconli roomconlinomar" v-for="(item, index) in tableData" :key="index">
							<deviceLiT :data="item" :class="item.sharkFlag?'my-shark':''"></deviceLiT>
						</div>
					</div>
					<!-- <el-carousel height="90vh" class="overflowCarousel" direction="vertical" :loop="true"
						indicator-position="outside" :autoplay="true" :interval="3000" @change="changgePage">
						<el-carousel-item v-for="item in carouselPage" :key="item">
							<div class="roomcontent">
								<div class="roomconli roomconlinomar" v-for="(item, index) in tableData" :key="index">
									<deviceLiT :data="item"></deviceLiT>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel> -->
				</div>
				<div class="page pagebtn">
					<el-button type="primary" class="btn" size="mini" @click="handleClose">关闭</el-button>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="[10, 100, 200, 300]" :page-size="pageSize"
						layout="total,sizes, prev, pager, next, jumper" :total="pageTotal">
					</el-pagination>
				</div>
			</el-row>
		</el-drawer>
	</el-header>
</template>

<script>
	import deviceLiT from "../common/deviceLi1.vue";
	import {
		httpGet,
		httpPostno
	} from "../../../api/index";
	import Bus from './bus';
	import moment from "moment"
	export default {
		name: "Header",
		data() {
			return {
				audiosrc: require("../../../assets/img/ls.mp3"),
				pageSize: 10,
				vocieStatus: true,
				pageTotal: 0,
				currentPage: 1,
				drawer: false,
				direction: 'ttb',
				message: 1,
				username: localStorage.getItem('username'),
				collapse: false,
				unlinedeviceSum: 0,
				activeiconfont: true,
				tableData: [],
				carouselPage: 0,
				settime2: '',
				datatime: '',
				tiemr: '',
				audio: '',
				prelist: []
			}
		},
		components: {
			deviceLiT
		},
		activated() {
			var _this=this
			this.settime2 = setInterval(function() {
				_this.getalertDevice()
			}, 3000)
		},
		beforeRouteLeave(to, from, next) {
			window.clearInterval(this.settime2)
			next()
		},
		beforeDestroy(){
			window.clearInterval(this.settime2)
		},
		created() {
			var _this = this
			httpGet('', this.$api.userInfo).then(res3 => {
				localStorage.setItem('userInfo', JSON.stringify(res3.data))
			})
			setInterval(function() {
				_this.datatime = moment().format('YYYY年MM月DD日 HH:mm:ss')
			}, 1000)
		},
		mounted() {
			var _this=this
			// this.$refs.audio.play()
			this.getalertDevice()
			this.settime2 = setInterval(function() {
				_this.getalertDevice()
			}, 3000)
		},
		methods: {
			voicfun() {
				this.$refs.audio.pause()
				this.vocieStatus = true
			},
			voicfun1() {
				this.$refs.audio.play()
				this.vocieStatus = false
			},
			changgePage(e) {
				if (this.currentPage > this.carouselPage) {
					this.currentPage = 1
				} else {
					this.currentPage += 1
				}
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.getalertDevice()
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getalertDevice()
				console.log(`当前页: ${val}`);
			},
			showbar() {
				this.drawer = true
			},
			getalertDevice() {
				// if (this.currentPage > this.carouselPage) {
				// 	this.currentPage = 1
				// }
				var data = {
					pageNum: 1,
					pageSize: 1,
					orderType: 'desc',
					orderBy: "createAt",
					q: JSON.stringify({
						lockStatus: 1
					})
				}
				httpPostno(data, this.$api.getList).then(res => {
					if (res.success) {
						this.$store.commit('updatedata', res.data.total);
					}
				})
				var data = {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
					orderType: 'desc',
					orderBy: "createAt",
					q: JSON.stringify({
						operateCode: 1,
						startTime: moment().subtract('days', 0).format('YYYY-MM-DD 00:00:00'),
						endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
					})
				}
				httpPostno(data, this.$api.getReportList).then(res => {
					if (res.success) {
						// if (res.data.total > 0) {

						// } else {
						// 	this.$refs.audio.pause()
						// 	this.vocieStatus = true
						// }
						res.data.list.map(li => {
							li.createAt = moment(li.createAt).format('YYYY/MM/DD HH:mm:ss')
						})
						var time = new Date();
						var list = []
						res.data.list.map(li => {
							var time = moment(time).valueOf()
							var time1 = moment(li.createAt).valueOf()
							li['sharkFlag'] = false
							if (time - time1 < 6000) {
								list.push(li)
								li['sharkFlag'] = true
							}
						})
						this.poplist(list)
						// this.alarmList = res.data.list
						this.unlinedeviceSum = res.data.total
						this.tableData = res.data.list
						this.pageTotal = res.data.total
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			validate(arr1, arr2) {
				if (!arr1 instanceof Array || !arr2 instanceof Array) {
					return true;
				}
				if (arr1.length != arr2.length) {
					return false;
				}
				let arr1Str = JSON.stringify(arr1);
				for (let i = 0; i < arr2.length; i++) {
					if (arr1Str.indexOf(JSON.stringify(arr2[i])) == -1) {
						return false;
					}
				}
			 return true;
			},
			unique(arr, u_key) {
				let map = new Map()
				arr.forEach((item, index) => {
					if (!map.has(item[u_key])) {
						map.set(item[u_key], item)
					}
				})
				return [...map.values()]
			},
			poplist(list) {
				var list1 = this.unique(list, 'imei')
				var tt = this.validate(this.prelist, list1)

				if (tt) {

				} else {
					this.prelist=list1
					if (list1.length == 0) {
						this.$refs.audio.pause()
					} else {
						if (!this.vocieStatus) {
							this.$refs.audio.play()
							this.vocieStatus = false
							setTimeout(() => {
								this.$refs.audio.pause()
							}, 10000)
					}
					}
					list1.map(li => {
						setTimeout(() => {
							this.$notify({
								title: li.name,
								offset: 200,
								duration: 2000,
								message: li.createAt + ' 开门警报',
								type: 'warning'
							});
						}, 3000)
				})

				}
			},
			// 表头样式
			rowClass({
				row,
				rowIndex
			}) {
				return "background:#f8f9fa;color:#333;font-blod:none;font-size:12px;"
			},
			handleClose(done) {
				this.drawer = false
			},
			// 侧边栏折叠打开效果
			collapseChage() {

				this.collapse = !this.collapse;
				Bus.$emit('collapse', this.collapse);
			},

			// 用户名下拉菜单选择事件
			handleCommand(command) {
				if ('loginout' == command) {
					httpGet({}, '/oauth/revoke').then(res4 => {})
					localStorage.removeItem('username');
					this.$router.push('/login');
				}
			}
		}
	}
</script>

<style scoped lang="less">
	[class*='el-icon'] {
		cursor: pointer;
	}

	.el-header {
		width: 100%;
		padding: 0 30px;
		background-color: @headerBgColor;
		color: white;
		font-size: 16px;
		line-height: 53px;
	}

	.header-title,
	.btn-info {
		display: inline-block;
	}

	.header-title,
	.btn-collapse,
	.el-icon-bell {
		font-size: 1.75rem;
	}

	.header-right {
		float: right;
	}

	.btn-collapse {
		vertical-align: sub;
	}

	.btn-info {
		position: relative;
	}

	.btn-info-tip {
		position: absolute;
		top: 10px;
		.circle(8px);
		background-color: #ff464f;
	}

	.el-icon-bell {
		color: white;
		vertical-align: text-top;
	}

	.header-portrait {
		.circle(40px);
		margin: 0 20px;
		vertical-align: middle;
	}

	.el-dropdown-link {
		color: white;
		cursor: pointer;
	}

	.drawlist {
		width: 100%;
		padding: 1.875rem;
		left: 0;
		top: 0;
		background: #fff;
	}

	.roomcontent {
		width: 90%;
		margin: 0 auto;
		overflow-y: auto;
		height: 90vh;
	}

	.roomcontent .roomconli {
		display: inline-block;
		cursor: pointer;
		position: relative;
	}
</style>
<style>
	.drawlist {
		width: 100%;
		padding: 1.25rem;
		box-sizing: border-box;
		height: 100vh;
	}

	.el-drawer__wrapper {
		z-index: 99999;
		width: 100%;
		left: 0;
		top: 0;
		background: #fff;
		color: #333;
	}

	.drawlist .el-drawer__close-btn {
		position: absolute;
		z-index: 9999;
		right: 1.25rem;
		top: 1.25rem;
	}

	.roomconlinomar .lock .lock-name {
		margin: 0 !important;
	}

	.pagebtn {
		position: relative;
	}

	.pagebtn .btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.datatime {
		font-size: 0.875rem;
		margin-right: 0.625rem;
	}

	.overflowCarousel {
		overflow: hidden;
	}

	.voice {
		position: fixed;
		top: -100%;
		left: -100%;
		opacity: 0;
	}

	.voiceimg img {
		width: 1.875rem;
		vertical-align: middle;
		cursor: pointer;
	}

	.my-shark {
		animation: login-shake 1s 1 ease-in;
	}

	@keyframes login-shake {
		0% {
			transform: scale(1);
		}

		10%,
		20% {
			transform: scale(0.9) rotate(-3deg);
		}

		30%,
		50%,
		70%,
		90% {
			transform: scale(1.1) rotate(3deg);
		}

		40%,
		60%,
		80% {
			transform: scale(1.1) rotate(-3deg);
		}

		100% {
			transform: scale(1) rotate(0);
		}
	}
</style>
