<!--监控中心-->
<template>
	<div class="visual-con">
		<!--头部-->
		<vheader></vheader>
		<!--主体-->
		<div class="visual-body">
			<!-- 左侧 -->
			<div class="leftbar" :class="indentleft" ref="left">
				<div class="forthis">
					<div class="this-title">
						<span>态势感知</span>
					</div>
					<div class="i-list-con h-73">
						<div class="d-l-con-icon">
							<div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
								v-for="(item,index) in visuForestCloudMapDeviceBOList"
								v-on:click="selectDeviceType(index)">
								<!--   -->
								<div class="icon icon-dot"></div>
								<div class="icon-text">
									<h6>{{item.deviceCount}}</h6>
									<h5>{{item.deviceName}}</h5>
								</div>
							</div>
						</div>
						<div class="overflow-y" style="height: 33vh;">
							<el-collapse accordion>
								<el-collapse-item v-for="(item,index) in region" :key="index">
									<!-- deptId -->
									<template slot="title">
										<div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
											v-on:click="selectCameraByDeptId(item.deptId)">
											<div class="d-l-l-text">
												<h4 class="collapse-title">{{item.deptName}}</h4>
											</div>
											<div class="d-l-l-count">{{item.deptCount}}</div>
										</div>
									</template>
								</el-collapse-item>
							</el-collapse>
						</div>

						<!-- 横向柱状 echart -->
						<div class="overflow-y" style="height: 33vh;">
							<div id="camera-chart" style="width: 100%;height:33vh;"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
				:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
			</supermap>
			</button>
			<!-- 右侧 -->
			<div class="rightbar" :class="indentright" ref="right">
				<div class="forthis">
					<div class="this-title">
						<span>列表</span>
					</div>
					<div class="i-list-con h-43">
						<div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
							:class="{on:listCurrentIndex2 == index}"
							v-on:click="dropLocation(item.latitude,item.longitude,index)">
							<div class="d-l-l-text">
								<i class="iconfont sj-icon-jkzx icon-sxt"></i>
								<h4>{{item.cameraName}}</h4>
							</div>
						</div>
					</div>
				</div>
				<div class="forthis">
					<div class="this-title">
						<span>重点区域</span>
					</div>
					<div class="i-list-con h-25">
						<div class="d-l-con" v-for="(item,index) in keyAreaList" @click="">
							<div class="d-l-l-text">
								<i class="i-small"></i>
								<h4>{{item.areaName}}</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
			<vBottomMenu ref="bottomMenu"></vBottomMenu>
			<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
				<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
						src="@/assets/images/mascot.png" /></div>
			</el-tooltip>

		</div>
		<eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
	</div>
</template>

<script>
	import {
		selectDeviceType,
		selectCameraByDeptId,
    selectKeyAreaList
	} from '@/api/monitor'

	import supermap from '@/components/supermap' //超图
	import vheader from '@/components/v-header.vue' //一体化共用头部
	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
	import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
  import TVWall from '@/components/TVWall.vue' //电视墙弹窗

	/** ----------------------------------摄像头预览开始------------------------------------- */
	import {
		getDahuaVideoServer
	} from "@/api/dahua/dahua";
	import DHWs from '@/dahua/lib/DHWs'

	/** ----------------------------------摄像头预览结束------------------------------------- */
	// import echarts from 'echarts'
	let echarts = require('echarts')

	export default {
		components: {
			supermap,
			vheader,
			vBottomMenu,
			eventLocation,
      TVWall,
		},
		created() {
			/** ----------------------------------摄像头预览开始------------------------------------- */
			const DHWsInstance = DHWs.getInstance();
			this.ws = DHWsInstance;
			console.log(this.ws);
			/** ----------------------------------摄像头预览结束------------------------------------- */

			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			window.showDialog = this.showDialog
			window.choseLayerSwitching = this.choseLayerSwitching
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
		},
		mounted() {
			this.selectDeviceType()
			this.selectKeyAreaList()
		},
		data() {
			return {
				iconCurrentIndex1: '',
				listCurrentIndex1: '',
				listCurrentIndex2: '',
				listCurrentIndex3: '',
				/** ----------------------------------摄像头预览开始------------------------------------- */
				activePanel: 'key1',
				isLogin: false,
				cameraParams: [],
        ws:null,
				/** ----------------------------------摄像头预览结束------------------------------------- */
				visuForestCloudMapDeviceBOList: [],
				visuForestCloudCameraBOList: [],
				cameraMarkersList: [],
				sourceData: [],
        keyAreaList:[],//重点区域
				iframeBoo: true,
				open: false,
				iframeVue: null,
				activeName: 'info',
				radio: '1',
				region: [],
				//左右缩进
				indentStyle: '',
				indentleft: '',
				indentright: '',
				indentText: '收起左右栏',
				indentdisabled: false
			}
		},
		methods: {
			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			showDialog(click) {
				if (click == 'eventLocation') {
					this.$refs.eventLocation.showEventLocation()
					this.$refs.supermap.isEditableLayers = false
					this.$refs.bottomMenu.showChild = false
				} else if (click == 'editableLayers') {
					this.$refs.bottomMenu.showChild = false
					if (!this.$refs.supermap.isEditableLayers) {
						this.$refs.supermap.isEditableLayers = true
					} else {
						this.$refs.supermap.isEditableLayers = false
					}
				} else if (click == 'layerSwitching') {
					this.$refs.supermap.isEditableLayers = false
					if (!this.$refs.bottomMenu.showChild) {
						this.$refs.bottomMenu.showChild = true
					} else {
						this.$refs.bottomMenu.showChild = false
					}
				} else if (click == 'TVWall') {
          this.$refs.TVWall.showTVWall()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
        }
			},
			//选择图层
			choseLayerSwitching(url) {
				this.$refs.supermap.layerSwitching(url, true);
			},
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
			cameraChat() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('camera-chart'))
				// 绘制图表
				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
				myChart.setOption({
					dataset: {
						source: this.sourceData
					},
					tooltip: {
						trigger: 'item'

					},
					grid: {
						top: '5%',
						left: '2%',
						// right: "4%",
						bottom: '-15%',
						width: '75%',
						containLabel: true
					},
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: {
						type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#5deaff',
								fontSize: '12'
							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						}
					},

					series: [{

						type: 'bar',
						animationCurve: 'easeOutBack',
						barWidth: 5,
						label: {
							show: true,
							position: 'right',
							offset: [0, 0],
							color: '#88dfd5',
							// fontSize: "12",
							style: {
								fill: '#fff'
							}
						},
						backgroundBar: {
							show: true,
							style: {
								fill: 'rgba(97,152,255,0.20)'
							}
						},
						barStyle: {
							stroke: 'rgba(41,244,236,1)'
						},
						gradient: {
							color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
						},
						itemStyle: {
							label: {
								show: true
							},
							labelLine: {
								show: false
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: 'rgba(41,244,236,0)'
								},
								{
									offset: 1,
									color: 'rgba(41,244,236,.5)'
								}
							]),
							borderColor: '#a2f9f7',
							shadowBlur: 16,
							shadowColor: '#a2f9f7'
						}
					}]
				})
			},
      selectKeyAreaList() {
        //获取重点区域
        let that = this
        selectKeyAreaList().then(res => {
          that.keyAreaList=res
        })
      },
			selectDeviceType(index) {
				this.iconCurrentIndex1 = index
				//获取左侧动态感知设备
				let that = this
				selectDeviceType().then(res => {
					that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList


					that.region = res.data.visuForestCloudTodaySjfbBOList

					if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
						.length > 0) {
						for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
							let aa = [];
							aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
							aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
							this.sourceData.push(aa);
						}
					}

					that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
					this.cameraChat();
					if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
						.length > 0) {
						for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'camera',
								bindPopupHtml: '',
								click: 'preview',
								parameter: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.visuForestCloudCameraBOList.length > 50) {
								markersMap.isAggregation = true
							}
							if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
								markersMap.parameter = res.data.visuForestCloudCameraBOList[i].channelCode.split(
									',')
							} else {
								markersMap.parameter = [];
							}

							markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
							markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.visuForestCloudCameraBOList[i].longitude +
								',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>摄像头名称：' + res.data.visuForestCloudCameraBOList[i]
								.cameraName + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>'
							this.cameraMarkersList.push(markersMap)
							//   cameraAccount: "1"
							// cameraCode: "1000010"
							// cameraFactory: "2"
							// cameraIp: "1"
							// cameraName: "2"
							// cameraPasword: "2"
							// cameraPort: 2
							// cameraRadius: 20
							// cameraRegion: "3"
							// dataDeptId: null
							// dataStatus: null
							// eventType: null
							// height: "11"
							// id: "0d165fc362514f79b12a899ea66295fd"
							// latitude: "49.325625"
							// longitude: "125.3333"
						}
						setTimeout(() => {
							that.$refs.supermap.clearM(true)
							that.$refs.supermap.clearM(false)
							that.$refs.supermap.setMarkers(this.cameraMarkersList)
						}, 1000)
					}
				})
			},
			dropLocation(lat, lng, index) {
				this.listCurrentIndex2 = index
				this.$refs.supermap.dropLocation(lat, lng)
			},
			selectCameraByDeptId(depId) {
				this.listCurrentIndex1 = depId
				let that = this;
				that.cameraMarkersList = [];
				that.visuForestCloudCameraBOList = [];
				selectCameraByDeptId(depId).then(res => {
					//根据设备类型查看列表
					that.visuForestCloudCameraBOList = res.data

					if (res.data != null && res.data.length > 0) {
						for (let i = 0; i < res.data.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'camera',
								bindPopupHtml: '',
								click: 'preview',
								parameter: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.length > 50) {
								markersMap.isAggregation = true
							}
							if (res.data[i].channelCode != null) {
								markersMap.parameter = res.data[i].channelCode.split(',')
							} else {
								markersMap.parameter = []
							}

							markersMap.lng = res.data[i].longitude
							markersMap.lat = res.data[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude +
								'</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>'
							this.cameraMarkersList.push(markersMap)
							//   cameraAccount: "1"
							// cameraCode: "1000010"
							// cameraFactory: "2"
							// cameraIp: "1"
							// cameraName: "2"
							// cameraPasword: "2"
							// cameraPort: 2
							// cameraRadius: 20
							// cameraRegion: "3"
							// dataDeptId: null
							// dataStatus: null
							// eventType: null
							// height: "11"
							// id: "0d165fc362514f79b12a899ea66295fd"
							// latitude: "49.325625"
							// longitude: "125.3333"
						}
						setTimeout(() => {
							that.$refs.supermap.clearM(true)
							that.$refs.supermap.clearM(false)
							that.$refs.supermap.setMarkers(this.cameraMarkersList)
						}, 1000)
					}
				})
			},
			//吉祥物收起左右框
			indent() {
				let list = document.getElementsByClassName('el-tooltip__popper')
				list[list.length - 1].style.display = 'none'
				if (this.indentStyle == '') {
					this.indentStyle = 'indent-style'
					this.indentleft = 'indent-left'
					this.indentright = 'indent-right'
					this.indentText = '展开左右栏'
				} else if (this.indentText == '展开左右栏') {
					this.indentStyle = ''
					this.indentleft = ''
					this.indentright = ''
					this.indentText = '收起左右栏'
				}
			},
			/** ----------------------------------摄像头预览开始------------------------------------- */
			alertLogin: function() {
				this.$modal.msg("登录中....");
			},
			alertLoginSuccess: function() {
				this.$modal.msgSuccess("登录成功！");
			},
			alertLoginFailed: function() {
				this.$modal.msgError("登陆失败！");
			},
			alertReinstall: function() {
				this.$modal.msgWarning("请重新安装客户端");
			},
			/** 预览按钮操作 */
			preview(channelCode) {
				getDahuaVideoServer().then(newResponse => {
					this.ws.detectConnectQt().then(res => {
						if (res) { // 连接客户端成功
							this.alertLogin();
							this.ws.login({
								loginIp: newResponse.loginIp,
								loginPort: newResponse.loginPort,
								userName: newResponse.userName,
								userPwd: newResponse.userPwd,
								token: '',
								https: 1
							});
							this.ws.on('loginState', (res) => {
								this.isLogin = res;
								console.log('---res-----', res);
								if (res) {
									this.alertLoginSuccess()
									this.activePanel = 'key2'
									this.realTimeVideoDialog(channelCode);
								} else {
									this.alertLoginFailed();
								}
							});
						} else { // 连接客户端失败
							this.alertReinstall();
						}
					});
				});
			},
			realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
				if (!this.isLogin) {
					this.$Message.info('正在登陆客户端，请稍等......');
					return false;
				}
				this.ws.openVideo(cameraParams);
			},
			/** ----------------------------------摄像头预览结束------------------------------------- */

		}
	}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';


	.header {
		width: 100%;
		background: #a7ec12;
		background: url(../assets/images/visual/v-header.png) repeat-x;
		height: 2.5rem;
		display: flex;
		align-items: center;
		z-index: 1000;
		position: absolute;
		top: 0;

		.title {
			display: flex;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);

			h3 {
				display: flex;
				align-items: center;
				text-align: center;
				color: $white;
				font-size: 1.8rem;
				font-family: $fontFk;
				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;

				img {
					margin-right: .5rem;
				}
			}
		}

		.bignav {
			height: 40px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 2.4rem;
			z-index: 1000;
			border-radius: 5px;
			display: flex;
			justify-content: cetner;
			align-items: center;

			.bignav-list {
				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
				float: left;
				display: flex;
				justify-content: cetner;
				align-items: center;
				color: $white;
				height: 40px;
				font-size: 12px;
				padding: 0 23px;
				cursor: pointer;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.3s ease-in-out;
			}

			.router-link-active,
			.bignav-list:hover {
				filter: brightness(2.3);
				-webkit-transform: translateY(-1px);
				transform: translateY(-1px);
				color: $inBlueHover;
				border-bottom: 1px solid $inBlueHover;
				transition: all 0.3s ease-in-out;

			}
		}

	}
</style>
