<template>
	<div class="da-ping">
		<div class="dp-title">
		</div>
		<div class="body">
			<div class="left">
				<div class="in-space">
					<div class="panle_div">
						<div class="panel-liner">
							<div class="panel-title">设备状况</div>
							<div class="panel-content panel-a">
								<div class="pa-l">
									<div id="chart1" class="charts-box"></div>
								</div>
								<div class="pa-r">
									<div id="chart2" class="charts-box"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="panle_div">
						<div class="panel-liner">
							<div class="panel-title">项目列表</div>
							<div class="panel-content panel-b">
								<div class="scrolling">
									<dl>
										<dd v-for="(item, index) in projectList" 
											:class="itemActive === index && 'active'"
											@click ="setListActive(index)"
											:key="index"
										>
											<div>{{item.name}}</div>
											<div>{{item.createTime}}</div>
										</dd>
									</dl>
								</div>
							</div>
						</div>
					</div>
					<div class="panle_div">
						<div class="panel-liner">
							<div class="panel-title">设备信息</div>
							<div class="panel-content panel-c column-4">
								<div class="scrolling">
									<dl>
										<dt>
											<div>设备ID</div>
											<div>名称</div>
											<div>状态</div>
											<div>备注</div>
										</dt>
										<dd v-for="(item,index) in deviceInfo" :key="index">
											<div>{{item.id}}</div>
											<div>{{item.name}}</div>
											<div>{{item.status == 1 ? '在线' : '离线'}}</div>
											<div>{{item.premark}}</div>
										</dd>
									</dl>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-layout">
				<div class="right-ltop">
					<div class="center">
						<div class="panle_div">
							<div class="panel-liner">
								<div class="panel-title">地图定位</div>
								<div class="panel-content">
									<div class="in-space">
										<div id="mapCtn" class="amap-ctn"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="right">
						<div class="in-space">
							<!-- <div class="panle_div">
								<div class="panel-liner">
									<div class="panel-title">报警信息</div>
									<div class="panel-content">
										<div id="chart3" class="charts-box"></div>
									</div>
								</div>
							</div> -->
							<div class="panle_div">
								<div class="panel-liner">
									<div class="panel-title">报警列表</div>
									<div class="panel-content co-table">
										<div class="scrolling">
											<div class="table-box">
												<dl>
													<dt>
														<div>项目ID</div>
														<div>设备ID</div>
														<div>报警状态</div>
														<div>报警时间</div>
													</dt>
													<dd v-for="(item,index) in warningList" :key="index">
														<div>{{item.projectId}}</div>
														<div>{{item.equipmentId}}</div>
														<div>{{item.status === 1 ? '已处理' : '未处理'}}</div>
														<div>{{item.createTime}}</div>
													</dd>
												</dl>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="right-lbottom">
					<div class="panle_div_2 panle_div">
						<div class="panel-liner">
							<div class="panel-title">实时数据</div>
							<div class="panel-content co-table">
								<div class="scrolling">
									<div class="table-box">
										<dl>
											<dt>
												<div>所属用户ID</div>
												<div>所属用户名称</div>
												<div>风速</div>
												<div>温度</div>
												<div>湿度</div>
												<div>二氧化碳</div>
												<div>光照</div>
												<div>酸碱度</div>
												<div>水温</div>
												<div>电导率</div>
												<div>液位</div>
												<div>上传时间</div>
											</dt>
											<dd v-for="(item,index) in realDataList" :key="index">
												<div>{{item.userId}}</div>
												<div>{{item.userName}}</div>
												<div>{{item.windspeed}}</div>
												<div>{{item.temperature}}</div>
												<div>{{item.humidity}}</div>
												<div>{{item.co2}}</div>
												<div>{{item.mlux}}</div>
												<div>{{item.ph}}</div>
												<div>{{item.waterTemperature}}</div>
												<div>{{item.electricalConductance}}</div>
												<div>{{item.waterDepth}}</div>
												<div>{{item.createTime}}</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

export default {
	components: {  },
	data() {
		return {
			swiperOptions: {
				slidesPerView: 3,
				spaceBetween: 0,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false,
				},
			},
			projectList:[],
			projectItem:{},
			realDataList:[],
			itemActive:null,
			deviceInfo:[],
			warningList:[],
		}
	},

	mounted() {
		this.initMap();

		var chart1 = document.getElementById("chart1");
		this.myEchart1 = this.createPanelEchartA(chart1);

		var chart2 = document.getElementById("chart2");
		this.myEchart2 = this.createPanelEchartA(chart2);

		// var chart3 = document.getElementById("chart3");
		// this.myEchart3 = this.createPanelEcharts(chart3);

		window.onresize = () => {
			this.myEchart1 && this.myEchart1.myChart.resize();
			this.myEchart2 && this.myEchart2.myChart.resize();
			//this.myEchart3 && this.myEchart3.myChart.resize();
		};

		// 列表焦点播放
		setTimeout(() => {
			// 实时数据
			var rolling = document.getElementById("rolling");
			var that = this, playTimer;
			(that.itemPlay = function() {
				clearInterval(playTimer);

				playTimer = setTimeout(function(){
					that.itemActive ++;
					that.itemActive = that.itemActive % (that.projectList.length);
					that.setListActive(that.itemActive);
				}, 9000);
			})();
			/* rolling.onmousedown = function(){
				cancelAnimationFrame(animId);
			};
			rolling.onmouseup = function(e){
				if(e.target.id === 'rolling'){
					scrollTop = e.target.scrollTop;
				};
				animloop()
			}; */
		}, 1000);

		this.$nextTick(() => {
			this.markers = {};

			// 获取项目
			this.reqProjectInfo();

			// 请求报警图表信息
			// this.reqAlarms();

			// 获取设备总数
			this.reqDeviceCount();

			// 设备在线离线状态刷新
			/* setInterval(() => {
				this.reqDeviceCount();
			}, 6000) */
		});
	},
	methods: {
		setListActive(index){
			this.itemActive = index;

			// reset Timer
			this.itemPlay();

			// 查询设备信息
			this.reqGetDeviceInfo(index);

			// setTimeout(() => {
			// 	// 获取设备总数
			// 	this.reqDeviceCount()
			// }, 3000);
		},
		reqGetDeviceInfo(index){
			// 清除上一个 marker 颜色
			var id = this.projectItem.id;
			var marker = this.markers[id];
			marker && marker.setIcon();
	
			this.projectItem = this.projectList[index];
			id = this.projectItem.id;
			marker = this.markers[id];
			marker && marker.setIcon(this.cAMap.marker.red1);

			// 动态设置中心点
			//this.cAMap.setCenter([this.projectItem.lng, this.projectItem.lat]);

			// 请求设备信息
			this.reqDevicesById(this.projectItem);
		},
		// 请求项目
		reqProjectInfo(){
			var param = {sort:'createTime,desc'};
			HttpReq.project.getProject(param).then((res) => {
				//console.log(res);

				// 请求设备信息(全部)
				this.reqDevicesById({});

				if(res.code == 200){
					var body = res.data || {};
					this.projectList = body.content || [];
					// 添加地图标记点
					for(var item of body.content){
						this.markers[item.id] = this.cAMap.addMarkers([{lng:parseFloat(item.lng).toFixed(6), lat:parseFloat(item.lat).toFixed(6)}])[0];
					};
				};

			})
		},
		// 请求设备
		reqDevicesById(item){
			var that = this;
			var sort = 'addTime,desc';
			var param = {};
			param.sort = sort;
			param.projectId = item.id;
			HttpReq.plantFactory.getDeviceManageList(param).then((res) => {
				//console.log(res);
				this.deviceInfo = res.content;

				// 请求实时数据
				this.reqRealtimeByCodes(item.id);

				// 请求报警数据
				this.reqAlarmByCodes(item.id);

			})
		},
		// 设备状况(在线离线)
		reqDeviceCount(){
			let onlineNum = 0;
			let offlineNum = 0;
			let allNum = 0;
			HttpReq.plantFactory.getEquipmentOnlineTotal().then((res)=>{
				if(!res[0].id){
					onlineNum = 0;
				}else{
					onlineNum = res[0].id;
				}
				HttpReq.plantFactory.getEquipmentOfflineTotal().then((res) => {
					if(!res[0].id){
						offlineNum = 0;
					}else{
						offlineNum = res[0].id;
					}
					allNum = onlineNum + offlineNum;

					// 在线图表
					var percentage1 = ~~(onlineNum/allNum * 100);
					this.myEchart1.setData({
						title:[{text:'在线' + onlineNum,}, {text:percentage1+'%',}], 
						series:[{
							data:[percentage1],
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: '#b8f708'
									}, {
										offset: 1,
										color: '#29fac3'
									}]),
								}
							}
						}]
					});
					
					// 离线图表
					var percentage2 = ~~(offlineNum/allNum * 100);
					this.myEchart2.setData({
						title:[{text:'离线' + offlineNum,}, {text:percentage2+'%',}], 
						series:[{
							data:[percentage2],
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: '#b8f708'
									}, {
										offset: 1,
										color: '#29fac3'
									}]),
								}
							}
						}]
					})

				})
			})

		},
		// 实时数据
		reqRealtimeByCodes(projectId){
			var param = {};
			param.sort = 'createTime,desc';
			param.projectId = projectId;
			HttpReq.plantFactory.getLargeScreenNowDataList(param).then((res) => {
				//console.log(res);
				this.realDataList = res.content;
			})
		},
		// 报警列表
		reqAlarmByCodes(projectId){
			var param = {};
			param.sort = 'createTime,desc';
			param.projectId = projectId;
			HttpReq.plantFactory.getLargeScreenAlarmList(param).then((res) => {
				//console.log(res);
				this.warningList = res.data.content;
			})
		},
		// 报警图表数据
		reqAlarms(){
			HttpReq.alarm.getItemOnMonthStatistics().then((res) => {
				if(res.head.code === '0000'){
					var body = res.body || {};
					var list = body.list || [];
					var dict = {};

					// 加工1
					for(var item of list){
						dict[~~item.month] = item;
					};

					var aelementalarm = [];
					var atemperaturealarm = [];
					var ahumidityalarm = [];
					var alenghtalarm = [];
					for(var i=1; i<13; i++){
						var item = dict[i];
						if(item){
							aelementalarm.push(item.elementalarm);
							atemperaturealarm.push(item.temperaturealarm);
							ahumidityalarm.push(item.humidityalarm);
							alenghtalarm.push(item.lenghtcount);
						}else{
							aelementalarm.push(0);
							atemperaturealarm.push(0);
							ahumidityalarm.push(0);
							alenghtalarm.push(0);
						};
					};

					this.myEchart3.setData({
						series: [
							{
								name: '电压报警',
								type: 'bar',
								data: aelementalarm,
							},
							{
								name: '温度报警',
								type: 'bar',
								data: atemperaturealarm,
							},
							{
								name: '裂缝报警',
								type: 'bar',
								data: alenghtalarm,
								//itemStyle: {normal: {areaStyle: {type:'default', color:'red'}, color:'#1849fe'}, color:'red'},
							}
						]
					});
				};
			})
		},

		initMap(){

			var cAMap = this.cAMap = new CAMap({container:'mapCtn'});
			var map = cAMap.map;

			/* var maskerIn = new AMap.Marker({
				position: [122.065951,37.487842],
				map: map
			})
			var maskerOut = new AMap.Marker({//区域外的不会显示
				position: [122.065951,37.487842],
				map: map
			}) */

			return ;

			var opts = {
				subdistrict: 0,
				extensions: 'all',
				level: "district", // street:街道, district:区县, city:市,	province(省), country(国)
			};
			//利用行政区查询获取边界构建mask路径
			//也可以直接通过经纬度构建mask路径
			var district = new AMap.DistrictSearch(opts);
			district.search('威海市', function (status, result) {
				var bounds = result.districtList[0].boundaries;
				var mask = [];
				for (var i = 0; i < bounds.length; i += 1) {
					mask.push([bounds[i]])
				};

				//添加高度面
				//var object3Dlayer = new AMap.Object3DLayer({zIndex: 1});
				//map.add(object3Dlayer)
				var height = -7000;
				var color = '#00000cc';//rgba
				var wall = new AMap.Object3D.Wall({
					path: bounds,
					height: height,
					color: color
				});
				wall.transparent = true
				//object3Dlayer.add(wall)
				//添加描边
				for (var i = 0; i < bounds.length; i += 1) {
					var polygon = new AMap.Polygon({
						map: map,
						bubble: true,
						strokeWeight: 5,
						strokeDasharray: [10, 20],
						strokeColor: 'rgba(7, 247, 247, 1)',
						fillColor: 'rgba(7, 247, 247, 1)',
						fillOpacity: 0.2,
						path: bounds[i],
					})		
				}
			});
		},

		createPanelEcharts(el){
			var myChart = echarts.init(el),
				lineColor = 'green';
			var option = {
				title: {
					text: '',
					subtext: '报警数(个)'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['电压报警', '温度报警', '裂缝报警'],
					textStyle: {
						color: "#fff"
					},
				},
				textStyle: {
					color: "#fff"
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					}
				],
				yAxis: [
					{
						type: 'value',
					}
				],
				grid:{
					top:40,
					right:5,
					bottom:20,
					left:35,
				},
				series: [
					{
						name: '电压报警',
						type: 'bar',
						//data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						itemStyle: {normal: {areaStyle: {type: 'default', color:'#00e5ff'}, color:'#00e5ff'}, color:'green'},
					},
					{
						name: '温度报警',
						type: 'bar',
						//data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						//itemStyle: {normal: {areaStyle: {type: 'default', color:'#00e5ff'}, color:'#00e5ff'}, color:'green'},
					},
					{
						name: '裂缝报警',
						type: 'bar',
						///data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						itemStyle: {normal: {areaStyle: {type:'default', color:'red'}, color:'#1849fe'}, color:'red'},
					}
				]
			};

			myChart.setOption(option);

			var setData = function(option){
				myChart.hideLoading();
				myChart.setOption(option)
			};
			return {setData:setData, myChart:myChart}
		},

		createPanelEchartA(el){
			var myChart = echarts.init(el), num = 0;
			var option = {
				backgroundColor: 'transparent',
				title: [
					{
						text: '在线7',
						x: 'center',
						top: '55%',
						textStyle: {
							color: '#02cffa',
							fontSize: 18,
							fontWeight: '100',
						}
					}, {
						text: '70%',
						x: 'center',
						top: '32%',
						textStyle: {
							fontSize: '40',
							color: '#fdf914',
							fontFamily: 'Lato',
							foontWeight: '600',
						},
					}
				],
				polar: {
					radius: ['65%', '76%'],
					center: ['50%', '50%'],
				},
				angleAxis: {
					max: 100,
					show: false,
				},
				radiusAxis: {
					type: 'category',
					show: true,
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,

					},
					axisTick: {
						show: false
					},
				},
				series: [
					{
						name: '',
						type: 'bar',
						roundCap: true,
						barWidth: 60,
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(66, 66, 66, .3)',
						},
						data: [70],
						coordinateSystem: 'polar',

						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#fdf914'
								}, {
									offset: 1,
									color: '#38a700'
								}]),
							}
						}

					}, 
					{
						type: 'gauge',
						name: '',
						radius: '87%',
						startAngle: '0',
						endAngle: '-359.99',
						splitNumber: '200',
						center: ['50%', '50%'],
						pointer: {
							show: false
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: 95,
							name: ''
						}],
						axisLine: {
							lineStyle: {
								width: 20,
								opacity: 0
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true,
							length: 8,
							lineStyle: {
								color: {
									type: 'linear',
									x: 1,
									y: 0,
									x2: 0,
									y2: 0,
									colorStops: [{
										offset: 0,
										color: '#111'
									}, {
										offset: 0.5,
										color: 'rgba(66, 66, 66, 1)',
									}, {
										offset: 1,
										color: '#111'
									}],
									globalCoord: false
								},
								width: 1,
								type: 'solid',
							},
						},
						axisLabel: {
							show: false
						}
					},
					{
						name: '',
						type: 'pie',
						startAngle: 90,
						radius: ['90%', '92%'],
						hoverAnimation: false,
						center: ['50%', '50%'],
						itemStyle: {
							normal: {
								labelLine: {
									show: false
								},
								color: 'rgba(66, 66, 66, .4)',
								shadowBlur: 10,
								shadowColor: 'rgba(253, 249, 20, .3)',
							}
						},
						data: [{
							value: 100,

						}]
					},
					{
						name: '',
						type: 'pie',
						startAngle: 90,
						radius: ['93.5%', '95%'],
						hoverAnimation: false,
						center: ['50%', '50%'],
						itemStyle: {
							normal: {
								labelLine: {
									show: false
								},
								color: 'rgba(66, 66, 66, .3)',
								shadowBlur: 10,
								shadowColor: 'rgba(253, 249, 20, .3)',
							}
						},
						data: [{
							value: 100,

						}]
					},
					{
						name: '',
						type: 'pie',
						startAngle: 90,
						radius: ['95.5%', '96.8%'],
						hoverAnimation: false,
						center: ['50%', '50%'],
						itemStyle: {
							normal: {
								labelLine: {
									show: false
								},
								color: 'rgba(66, 66, 66, .2)',
								shadowBlur: 10,
								shadowColor: 'rgba(253, 249, 20, .3)',
							}
						},
						data: [{
							value: 100,

						}]
					},
					{
						name: '',
						type: 'pie',
						startAngle: 90,
						radius: ['97.5%', '98.5%'],
						hoverAnimation: false,
						center: ['50%', '50%'],
						itemStyle: {
							normal: {
								labelLine: {
									show: false
								},
								color: 'rgba(66, 66, 66, .1)',
								shadowBlur: 10,
								shadowColor: 'rgba(253, 249, 20, .3)',
							}
						},
						data: [{
							value: 100,

						}]
					},
					{
						name: "",
						type: 'custom',
						coordinateSystem: "none",
						renderItem: function(params, api) {
							return {
								type: 'arc',
								shape: {
									cx: api.getWidth() / 2,
									cy: api.getHeight() / 2,
									r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.82,
									startAngle: (0+num) * Math.PI / 180,
									endAngle: (1+num) * Math.PI / 180
								},
								style: {
									stroke: "#fdf914",
									fill: "transparent",
									lineWidth: 7
								},
								silent: true
							};
						},
						data: [0]
					},
				]
			};

			function numb(){
				num = num+5
				myChart.setOption(option, true)
			}
			/* setInterval(function() {
				numb()
			}, 100); */

			numb()
			var setData = function(data, grid){

				myChart.hideLoading();

				if(data){
					myChart.setOption(data)
				}else{
					myChart.setOption({
						title: {
							show: true,
							extStyle: {
								color: "grey",
								fontSize: 20
							},
							text: "暂无数据",
							left: "center",
							top: "center"
						}
					})
				}
			};
			return {setData:setData, myChart:myChart}
		},

		echartTooltipFormat(params, a, b){
			var param = params[0];
		}
	},
}
</script>

<style lang="scss" scope>
	.da-ping {
		color: #00d8fd;
		min-width:1024px;
		position:relative;
		height: 100vh;
		flex-direction: column;
		background-image: url('~@/assets/images/layout/backgound_a.png');
		user-select:none;

		ul, dl, dd{margin:0;padding:0;}

		.dp-title{
			position:relative;
			margin:0 1.041vw;
			height: 7.314vh;
			background:no-repeat top center url('~@/assets/images/layout/top_daping.png');
			background-size:100% 100%;
		}

		.body{
			height:89.907vh;
			display:flex;
			margin:1.574vh 1.041vw 1.203vh;

			>div{}
		}


		.left,
		.right {
			width: 28.958vw;
			flex-direction: column;
			justify-content: space-between;
			display:flex;

			.in-space{
				height:100%;flex:1;margin-top:-2.685vh;display:flex;flex-direction:column;
			}

			.panle_div:last-child{margin-bottom:0;}
		}

		.right{
			.charts-box{}
		}
		

		.right-layout{
			flex:1;display:flex;flex-direction:column;margin-left:.520vw;

			.right-ltop{
				flex:1;display:flex;
			}

			.right-lbottom{margin-top:1.388vh;}

			.panle_div_2 {
				display:flex;flex:none;margin-bottom:0;
				height:29.752vh;
				background:no-repeat center center url('~@/assets/images/layout/area_2.png');
				background-size:100% 100%;
			}
		}

		.center {
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			flex:1;
			margin-right:.520vw;

			.panle_div {
				background-image:url('~@/assets/images/layout/area_1.png');
				margin-bottom:0;
			}
			
			.amap-ctn{width:100%;height:100%;}
			
			.panel-content{
				margin-left:5px;margin-right:5px;

				.in-space{position:absolute;top:0;left:0;height:100%;width:100%;}
			}
			
		}

		.panle_div{
			flex:1;margin-bottom:1.388vh;
			background:no-repeat center center url('~@/assets/images/layout/area_0.png');
			background-size:100% 100%;

			.panel-liner{
				height:100%;width:100%;display:flex;flex-direction:column;
			}

			.panel-title {
				position: relative;
				padding:1.1vh 0 0 1.14vw;
				height:4.155vh;
				font-size:16px;
				&::before {content:'';display:inline-block;width:1.71vw;height:1.29vh;margin-right:0.91vw;
					background:no-repeat center center url('~@/assets/images/layout/title_sign.png');
					background-size:100% 100%;
				}
			}
			.panel-content{
				position:relative;flex:1;margin-bottom:1.5vh;
				font-size:13px;

				.scrolling{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;color:#c4d8fb;}
			}
			.charts-box{position:absolute;top:0;left:0;height:100%;width:100%;}

			.panel-a{
				display:flex;padding:0 10px;
				>div{flex:1;position:relative;}
			}

			.panel-b{
				dl{margin:0 10px;}
				dd{
					padding:8px 10px;display:grid;grid-template-columns:65% 35%;

					>div{margin-right:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
					div:last-child{margin-right:0;}
				}

				.active{border:1px solid #05eae3;border-radius:5px;background-color:rgba(15, 86, 136, .3);}
			}
			
			.panel-c{
				dl{margin:0 20px;}
				dt, dd{
					>div{margin-right:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
					div:last-child{margin-right:0;}
				}
				dt{padding:10px 0;font-size:14px;color:#01bafb;font-weight:bold;}
				dd{padding:5px 0;}
			}

			.co-table{
				.table-box{margin:0 10px;}
				dl{display:table;width:100%;}
				dt, dd{display:table-row;
					>div{display:table-cell;padding:7px 3px;}
				}
				dt{padding:10px 0;font-size:14px;color:#01bafb;font-weight:bold;}
				dd{padding:5px 0;color:#d5ceff;background-color:#091a38}
				dd:nth-child(odd){background-color:#0d1b48}
			}


			.column-4{
				dt, dd{display:grid;grid-template-columns:25% 25% 25% 25%;}
			}
		}
	}
</style>