<template>
	<div class="home_manage cm-layout">
		<div class="m-view flex-disf-col">
			<div class="a-1">
				<ul class="ctn-fix ctn-range" id="cardGroub">
					<li>
						<div class="ctn-absfull" style="">
							<div class="disf-col">
								<h3 v-if="cardNav['bwy-1'].equipname"><em>●</em>{{"表面位移1" || cardNav['bwy-1'].equipname}}({{cardNav['bwy-1'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc">
									<dd>X变化量：<span>{{cardNav['bwy-1'].disp_x}}</span></dd>
									<dd>Y变化量：<span>{{cardNav['bwy-1'].disp_y}}</span></dd>
									<dd>Z变化量：<span>{{cardNav['bwy-1'].disp_h}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
					<li>
						<div class="ctn-absfull" style="">
							<div class="disf-col">
								<h3 v-if="cardNav['bwy-2'].equipname"><em>●</em>{{"表面位移2" || cardNav['bwy-2'].equipname}}({{cardNav['bwy-2'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc">
									<dd>X变化量：<span>{{cardNav['bwy-2'].disp_x}}</span></dd>
									<dd>Y变化量：<span>{{cardNav['bwy-2'].disp_y}}</span></dd>
									<dd>Z变化量：<span>{{cardNav['bwy-2'].disp_h}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
					<li>
						<div class="ctn-absfull" style="">
							<div class="disf-col">
								<h3 v-if="cardNav['bwy-3'].equipname"><em>●</em>{{"表面位移3" || cardNav['bwy-3'].equipname}}({{cardNav['bwy-3'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc">
									<dd>X变化量：<span>{{cardNav['bwy-3'].disp_x}}</span></dd>
									<dd>Y变化量：<span>{{cardNav['bwy-3'].disp_y}}</span></dd>
									<dd>Z变化量：<span>{{cardNav['bwy-3'].disp_h}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
					<li>
						<div class="ctn-absfull">
							<div class="disf-col">
								<h3 v-if="cardNav['nbwy-1'].equipname"><em>●</em>{{"内部位移1" || cardNav['nbwy-1'].equipname}}({{cardNav['nbwy-1'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc min-line">
									<dd>水平变化(设备1)：<span>{{cardNav['nbwy-1'].dispA}}</span></dd>
									<dd>竖向变化(设备1)：<span>{{cardNav['nbwy-1'].dispB}}</span></dd>
									<dd>沉降变化(设备1)：<span>{{cardNav['nbwy-1'].cjvalue}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
					<li>
						<div class="ctn-absfull">
							<div class="disf-col">
								<h3 v-if="cardNav['nbwy-2'].equipname"><em>●</em>{{"内部位移2" || cardNav['nbwy-2'].equipname}}({{cardNav['nbwy-2'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc min-line">
									<dd>水平变化(设备1)：<span>{{cardNav['nbwy-2'].dispA}}</span></dd>
									<dd>竖向变化(设备1)：<span>{{cardNav['nbwy-2'].dispB}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
					<li>
						<div class="ctn-absfull">
							<div class="disf-col">
								<h3 v-if="cardNav['lf-1'].equipname"><em>●</em>{{cardNav['lf-1'].equipname}}({{cardNav['lf-1'].unit}})</h3>
								<dl class="flex-disf-col fix-rcc">
									<dd>变化量：<span>{{cardNav['lf-1'].lfvalue}}</span></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="b-1 disf-col ctn-range" id="b1">
				<ul class="grid3 flex1">
					<li>
						<div class="md-ctn">
							<h4>裂缝监测</h4>
							<div class="flex-rel">
								<div class="ctn-abs" data-id="lfData"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="md-ctn" id="md2">
							<div class="point-bar grid4">
								<a v-for="(item, index) in nbwyList" :data-id="index">{{item.equipname}}</a>
							</div>
							<div class="flex-rel">
								<div class="ctn-absfull">
									<Carousel
										:ref="'Carousel2'" 
									/>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="md-ctn" id="md3">
							<!-- <h4>表面位移监测</h4> -->
							<div class="point-bar grid4">
								<a v-for="(item, index) in bmwyList" :data-id="index">{{item.equipname}}</a>
							</div>
							<div class="flex-rel">
								<div class="ctn-absfull">
									<Carousel
										:ref="'Carousel3'" 
									/>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<ul class="grid3 flex1">
					<li>
						<div class="md-ctn" id="md4">
							<!-- <h4>人员/车辆定位信息</h4> -->
							<div class="point-bar grid4">
								<a data-id="0">人员信息</a>
								<a data-id="1">车辆信息</a>
							</div>
							<div class="flex-rel">
								<div class="ctn-absfull">
									<Carousel
										:ref="'Carousel4'" 
									/>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="md-ctn">
							<h4>设备报警级别数量统计</h4>
							<div class="flex-rel">
								<div class="ctn-abs" data-id="count" data-type="1"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="md-ctn">
							<h4>设备报警实时列表</h4>
							<div class="flex-rel">
								<div class="ctn-abs scroll-list scrolling4" data-id="list" data-type="1"  id="chart4">
									<ul class="info-list">
										<li v-for="item in alarmList">
											<h5><i :class="'level'+(item.alarmlevel)"></i>{{item.equipname}}</h5>
											<span>{{alarmlevel[item.alarmlevel]}}</span><span>{{item.evalue}}</span><font>{{item.time}}</font>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools} from '@/assets/js/common.js';
import { reqApi, Config} from '@/assets/js/httpApi.js';
import { Highchart } from '@/assets/js/chartTemplates.js';
import Carousel from '@/components/Carousel';
import '@/assets/styles/page_switch.css';
export default {
	name: 'Dashboard',
	components: {Carousel},
	data() {
		return {
			cardNav:{
				"bwy-1":{},
				"bwy-2":{},
				"bwy-3":{},
				"bwy-4":{},
				"nbwy-1":{},
				"nbwy-2":{},
				"lf-1":{}
			},
			alarmList:[],
			alarmlevel:['正常', '红色预警', '橙色预警', '黄色预警', '蓝色预警', '进入'],
			bmwyList:[],
			nbwyList:[],
		}
	},
	created(){
		// 获取基本信息
		this.pageApi = Config.getModuleInfo(this);
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			qf.ready(()=>{
				this.loadData();
				//this.createCharts();
			});
		})
	},
	methods: {
		loadData() {
			
			// 卡片
			this.pageApi.cards({}).then((res) => {
				if(res && res.code === 200){
					var body = res.body || {};
					this.cardNav = body
				}else{
					this.$notify({title: res.msg,type: 'error',duration: 2500})
				};
			});
	
			// Carousel 模块
			this.loadCarousel();

			// 
			this.loadMoreModule();

			//
			this.eventListener();
		},

		loadCarousel(){
			// 内部位移
			// 192.168.4.61:8001/history/dmData/visual/imgHistory
			this.pageApi.Carousel2({}).then((res) => {
				if(res && res.code === 200){
					var body = res.body || {};
					this.nbwyList = body;
					var md2 = this.$el.querySelector("#md2");
					var pointBar = md2.firstElementChild;
					var points = pointBar.children;
					var Carousel2 = this.$refs['Carousel2'];
					var index = 0;
					var items = {"areaid":"b2_a3","children":body,"id":9,"interval":6000,"sortid":"3","viewsid":"9"};
					var slider = Carousel2 && Carousel2.createViews({
						items:items,
						index:index,
					}).then(panels => {
						// 回调事件
						Carousel2.change = (function checkPoint(index){
							var actv = md2.querySelector(".actv");
							actv && (actv.className = '');
							var point = points[index];
							point && point.classList.add('actv');
							return checkPoint
						})(0);

						for(var panel of panels){
							var data = panel.item;
							var opts = {
								chartConfig:{
									chart:{
										//marginLeft:110,
										type:'line',
									},
									xAxis: {
										labels: {
											rotation: -25,  // 设置轴标签旋转角度
											
										},
									},
								},
							};
							Highchart.template.high(panel.el, data, opts);
						};

						// 索引事件
						pointBar.onclick = function(e){
							var tag = e.target || e.srcElement;
							var id = ~~ tag.dataset.id;
							Carousel2.$refs.sliders.setActiveItem(id);
						};
					});
				}else{
					this.$notify({title: res.msg,type: 'error',duration: 2500})
				};
			});

			// 表面位移
			this.pageApi.Carousel3({}).then((res) => {
				if(res && res.code === 200){
					var body = res.body || {};
					var dataList = [];
					for(var key in body){
						dataList.push(body[key]);
					};
					this.bmwyList = dataList;

					var md3 = this.$el.querySelector("#md3");
					var pointBar = md3.firstElementChild;
					var points = pointBar.children;
					var Carousel3 = this.$refs['Carousel3'];
					var index = 0;
					var items = {"areaid":"b2_a3","children":dataList,"id":9,"interval":6000,"sortid":"3","viewsid":"9"};
					var slider = Carousel3 && Carousel3.createViews({
						items:items,
						index:index,
					}).then(panels => {
						
						// 回调事件
						Carousel3.change = (function checkPoint(index){
							var actv = md3.querySelector(".actv");
							actv && (actv.className = '');
							var point = points[index];
							point && point.classList.add('actv');
							return checkPoint
						})(0);

						for(var panel of panels){
							var data = panel.item;
							var opts = {
								chartConfig:{
									chart:{
										//marginLeft:110,
										type:'line',
									},
									xAxis: {
										labels: {
											rotation: -25,  // 设置轴标签旋转角度
											
										},
									},
								},
							};
							Highchart.template.high(panel.el, data, opts);
						};

						// 索引事件
						pointBar.onclick = function(e){
							var tag = e.target || e.srcElement;
							var id = ~~ tag.dataset.id;
							Carousel3.$refs.sliders.setActiveItem(id);
						};
					});
				}else{
					this.$notify({title: res.msg,type: 'error',duration: 2500})
				};
			});

			// 人员/车辆
			this.pageApi.Carousel4({}).then((res) => {
				if(res && res.code === 200){
					var body = res.body || {};
					var md4 = this.$el.querySelector("#md4");
					var pointBar = md4.firstElementChild;
					var points = pointBar.children;
					var Carousel4 = this.$refs['Carousel4'];
					var index = 0;
					var items = {"areaid":"b2_a3","children":body,"id":9,"interval":6000,"sortid":"3","viewsid":"9"};
					var slider = Carousel4 && Carousel4.createViews({
						items:items,
						index:index,
					}).then(panels => {
						// 回调事件
						Carousel4.change = (function checkPoint(index){
							var actv = md4.querySelector(".actv");
							actv && (actv.className = '');
							var point = points[index];
							point && point.classList.add('actv');
							return checkPoint
						})(0);
						for(var panel of panels){
							var data = panel.item;
							var pieSeriesData = [
								{name:'人员在线设备', y:data.online, color:'#00D7EB'},
								{name:'人员离线设备', y:data.unline, color:'#00B1FF'},
							];
							var opts = {
								chartConfig:{
									chart: {
										type: 'pie',
										animation: false,
										events: {
											load: function() {
											}
										},
										options3d: {
											enabled: true,
											alpha: 65,
											beta: 0
										},
										marginLeft:5,
										marginRight:5,
									},
									plotOptions: {
										pie: {
											allowPointSelect: true,
											cursor: 'pointer',
											depth: 25,
											dataLabels: {
												enabled: true,
												connectorPadding:0,
												distance:15,
											}
										}
									},
									series: [{
										type:'pie',
										name:'数量统计',
										//innerSize:'70%',
										data:pieSeriesData,
										size: '110%',
										borderWidth:0,
									}]
								},
								isSeriesData:true,
								notExtendsOptions:true,
							};
							Highchart.template.high(panel.el, data, opts);
						};

						// 索引事件
						pointBar.onclick = function(e){
							var tag = e.target || e.srcElement;
							var id = ~~ tag.dataset.id;
							Carousel4.$refs.sliders.setActiveItem(id);
						};
					});
				}else{
					this.$notify({title: res.msg,type: 'error',duration: 2500})
				};
			});
		},

		loadMoreModule(){
			var b1 = this.$el.querySelector("#b1");
			var dms = b1.querySelectorAll(".ctn-abs");

			qf.UI.asyncLoop.call(this, dms, function(key, panel, next){
				var id = panel.dataset.id;
				if(id){
					var url = panel.dataset.type ? 'tab/abnormal/visual/'+id : 'history/'+id+'/imgHistory';
					reqApi.common.requstEdge('get', url, {}).then((res)=>{
						if(res && res.code === 200){
							var body = res.body || {}, opts = {};

							if(id === 'count'){
								var categories = [], series = [], alarms = [
									{color:'red', name:'红色报警'}, 
									{color:'orange', name:'橙色报警'}, 
									{color:'yellow', name:'黄色报警'}, 
									{color:'blue', name:'蓝色报警'}];
								
								var cacheData = {};
								for(var item of body){
									categories.push(item.equipname);
									for(var alarm of alarms){
										var alarmItem = cacheData[alarm.color];
										var serieItem = alarmItem ? alarmItem : (cacheData[alarm.color] = {name:alarm.name, color:alarm.color, data:[]});

										serieItem.data.push(~~item[alarm.color]);

									};
								};

								// create series
								for(var key in cacheData){
									var item = cacheData[key];
									series.push(item);
								};

								opts = {
									chartConfig:{
										chart:{
											type: 'bar',
											marginLeft:60,
											//marginBottom:60,
										},
										xAxis: {
											categories: categories,
											labels: {
												//rotation: -15,  // 设置轴标签旋转角度
												y:0,
												x:-10,
											},
										},
										yAxis: {
											min: 0,
											title: {
												//text: '报警级别数量统计'
											}
										},
										legend: {
											/* 图例显示顺序反转
											 * 这是因为堆叠的顺序默认是反转的，可以设置 
											 * yAxis.reversedStacks = false 来达到类似的效果 
											 */
											reversed: true,
											enabled: true,
										},
										plotOptions: {
											series: {
												stacking: 'normal'
											}
										},
										series:series,
									},
									isSeriesData:true,
									notExtendsOptions:true,
								};

								Highchart.template.high(panel, body, opts);
							}else if(id === 'list'){
								this.alarmList = body;

								this.$nextTick(() => {
									// 列表滚动
									var chart4 = this.$el.querySelector("#chart4");
									qf.UI.scrollingPreview(chart4);
								});
							}else{
								opts = {
									chartConfig:{
										chart:{
											//marginLeft:110,
										},
										xAxis: {
											labels: {
												rotation: -25,  // 设置轴标签旋转角度
											},
										},
									},
								};
								Highchart.template.high(panel, body, opts);
							};
						}else{
							this.$notify({title: res.msg,type: 'error',duration: 2500})
						};

						next()
					});
				};
			}, function(){});
		},

		eventListener(){
			var self = this;

			var randomTimerFilter = new qf.Async.timeFilterRandomCall(function(time){
				self.activeAnimate();
			});
			this.$el.addEventListener('mousemove', function(e){
				randomTimerFilter.run();
			});
		},

		activeAnimate(){
			this.cards = this.cards || this.$el.querySelector("#cardGroub").children;
			var clen = this.cards.length;

			if(!this.cardWheel || !this.cardWheel.length){
				this.cardWheel = [];
				for(var i=0; i<clen; i++){this.cardWheel.push(i);};
			};

			var index = ~~(Math.random()*this.cardWheel.length);
			var rnum = this.cardWheel.splice(index, 1);
			var card = this.cards[rnum[0]].firstElementChild;
			var aniArr = ['twisterInUpRight 1s ease .0s 1', 'zoomIn 1s ease .0s 1', 'bounceIn 1.5s ease .0s 1', 'rollInRight 1.5s ease .0s 1', 'flipInY 1.5s ease .0s 1', 'twisterInDownLeft 1.5s ease .0s 1', 'bounceInDown 1.5s ease .0s 1', 'twisterInUpRight 1.5s ease .0s 1', 'fadeInRight 1.5s ease .0s 1', 'tada 1.5s ease .0s 1', 'puffOut 1s ease-in-out .0s 2'];
			var aini = ~~(Math.random()*aniArr.length);
			var aniname = aniArr[aini];
			card.style.cssText = 'animation:' + aniname + ' normal both';
			setTimeout(() => {
				card.style.cssText = 'animation:';
			}, 2000);
		},
	}
}
</script>
<style lang="scss">
	.home_manage{
		
		//border:1px solid red;
		display:flex;position:relative;

		.m-view{
			margin:8px 15px;
			//border:1px solid green;
		}

		.a-1{
			height:2.07rem;color:#fff;user-select:none;
			ul{height:100%;}
			li{
				margin-right:.16rem;
				&:last-child{margin-right:0;}
				>div{
					//height:100%;margin:0 .08rem;
				}
				.disf-col{margin:0 .08rem;height:100%;}
				h3{
					height:.48rem;line-height:.60rem;font-size:.20rem;font-weight:600;
					em{font-size:.25rem;margin-right:.08rem;}
				}
				dl{
					margin:0 0 .10rem .05rem;line-height:.40rem;
					dd{
						width:100%;text-align:center;font-size:.16rem;
						overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;
					}
				}
				.min-line{line-height:.30rem;}
			}
			li:nth-child(1)>div{background-image:linear-gradient(to right, #3955b6, #177cb4);}
			li:nth-child(2)>div{background-image:linear-gradient(to right, #bc4370, #f00d79);}
			li:nth-child(3)>div{background-image:linear-gradient(to right, #2a88ae, #12aa9b);}
			li:nth-child(4)>div{background-image:linear-gradient(to right, #5954bb, #9655af);}
			li:nth-child(5)>div{background-image:linear-gradient(to right, #b74a47, #b97b40);}
			li:nth-child(6)>div{background-image:linear-gradient(to right, #4b35b4, #084d9a);}
		}

		.b-1{
			//height:7.50rem;margin-top:.18rem;max-height:7.50rem;
			flex:1;margin-top:.18rem;
			ul.grid3{
				margin-bottom:.16rem;
				>li{
					//border:1px solid white;
					//margin:0 .15rem .15rem 0;
					margin-right:.15rem;background-color:#031b57;
				}
				>li:last-child{margin:0;}
			}
			ul.grid3:last-child{margin:0;}

			.md-ctn{
				display:flex;flex-direction:column;height:100%;

				h4{
					font-size:.18rem;padding-left:.04rem;
					background-image: -webkit-linear-gradient(top, #04f6cc, #05dcdf, #04bbf7);
					-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02rem;
				}

				.point-bar{
					margin:6px 4px 0;
					a{
						font-size:.15rem;border:1px solid #072f77;box-shadow:0px 0px .07rem #0446be inset;
						text-align:center;margin:0 4px;border-radius:.05rem;height:.24rem;line-height:.25rem;
						background-image: -webkit-linear-gradient(top, #61a2c0, #2ca9bf, #03aaba);
						-webkit-background-clip:text;-webkit-text-fill-color:transparent;
					}
					a.actv{
						border:1px solid #0092e8;box-shadow:0px 0px .08rem #029cf6 inset;
						background-image: -webkit-linear-gradient(top, #86d9eb, #61f5ff, #00fcfd);
						-webkit-background-clip:text;-webkit-text-fill-color:transparent;
					}
				}

				.flex-rel{
					margin:6px 0;user-select:none;
					.ctn-abs{
					}
				}
			}
			.scroll-list{
				overflow-y:scroll;
			}
		}

		.info-list{
			li{
				display:flex;justify-content:space-between;height:.49rem;line-height:.47rem;
				border:1px solid #0f5680;margin:.06rem 0;padding:0 .10rem;
				background-image:linear-gradient(to right, transparent 30%, #13286b 80%);color:#35ecfa;
				h5{
					font-weight:normal;color:#fff;font-size:.14rem;

					display:flex;align-items:center;
					i{
						position:relative;width:.30rem;height:.24rem;margin-right:.06rem;
						display:flex;justify-content:center;
						&:before{
							content:"";position:absolute;height:0;width:0;bottom:0;
							border-width:.24rem .14rem;border-style:solid;
						}
						&:after{
							content:"!";position:absolute;font-style:normal;line-height:.30rem;font-size:.14rem;color:black;
						}
					}
					.level0{
						&:before{
							border-color:transparent;
						}
						&:after{
							content:"";
						}
					}
					.level1{
						&:before{
							border-color:transparent transparent #F93C58 transparent;
						}
					}
					.level2{
						&:before{
							border-color:transparent transparent #FA953A transparent;
						}
					}
					.level3{
						&:before{
							border-color:transparent transparent #E9FA3C transparent;
						}
					}
					.level4{
						&:before{
							border-color:transparent transparent #3BAFFB transparent;
						}
					}
					.level5{
						&:before{
							border-color:transparent transparent #3BAFFB transparent;
						}
					}
				}
				span{font-size:.16rem;display:inline-block;margin-left:5px;}
				font{font-size:.14rem;margin-left:5px;}

				h5, span, font, div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
			}
		}
	}
</style>
