<template>
	<div class="Screen cm-layout">
		<!-- 新增：原生模态框 -->
		<div class="native-modal" :class="{ 'active': showUnListModal }">
			<div class="modal-mask" @click="closeModal"></div>
			<div class="modal-content">
				<div class="modal-header">
					<h3>离线设备列表</h3>
					<button class="modal-close" @click="closeModal">×</button>
				</div>
				<div class="modal-body" id="unListContainer">
					<!-- 动态渲染的列表将插入此处 -->
				</div>
			</div>
		</div>
		<div class="a_0">
			<!-- <cesium
				ref="CesiumMap" 
				:mapinfo="mapinfo"
				:onload="mapOnload" 
				@click="mapClick" 
			/> -->
		</div>
		<div class="b_0">
			<header>
				<div class="b1_a">
					<h2>{{title}}</h2>
					<div class="b1_a1">
						<span class="font_digit" id="nowTime"></span>
					</div>
					<div class="b1_a2 logo"></div>
				</div>
			</header>
			<section class="b_2">
				<div class="b_2a">
					<div class="b2_a">
						<div class="b2_a1">
							<div v-for="(item, i) in area.b2_a1" class="view-item">
								<div class="view-flx">
									<Carousel
										:ref="'view_' + item.id" 
									/>
								</div>
							</div>
						</div>
						<div class="b2_a2" id="b2_a2">
							<div class="b2a_2a view-item" v-for="(item, i) in area.b2a_2a">
								<div class="view-flx">
									<Center-Views
										:ref="'view_' + item.id"
									/>
								</div>
							</div>
							<div class="b2a_2b">
								<div v-for="(item, i) in area.b2a_2b" class="view-item">
									<div class="view-flx">
										<Carousel
											:ref="'view_' + item.id" 
										/>
									</div>
								</div>
							</div>
						</div>
						<div class="b2_a3">
							<div v-for="(item, i) in area.b2_a3" class="view-item">
								<div class="view-flx">
									<Carousel
										:ref="'view_' + item.id" 
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</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 cesium from '@/components/Cesium';
import Carousel from '@/components/Carousel';
import CenterViews from '@/components/CenterViews';

// style
//import '@/../static/js/Cesium/Widgets/widgets.css';
export default {
	components: {Carousel, CenterViews},
	data() {
		return {
			area:{
				b2_a1:[],
				b2a_2b:[], 
				b2_a3:[],
				views:[],
			},
			title:'',
			// 原有数据保持不变
			showUnListModal: false,  // 控制模态框显示
			currentUnList: []        // 当前离线设备列表
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			this.pageApi = Config.getModuleInfo(this);
			
			// 时钟
			var nowTimeEl = this.$el.querySelector("#nowTime");
			var Loop1 = qf.Async.intervalLoop(1000, function(){
				var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
				//Loop1.clear();
			}, function(){
				var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
			});

			qf(function(){
				this.initData();
			}.bind(this));

			//报警弹窗
			(function reqAlarmsPopup(){
				that.pageApi.alterAbnormal('get', {}).then((res)=>{
					var list = res.body || [];
					qf.Async.loopList.call(this, list, function(key, item, next){
						var alarmDict = ['', 
							{name:'红色报警', color:'red'}, {name:'橙色报警', color:'orange'}, 
							{name:'黄色报警', color:'#FFC900'}, {name:'蓝色报警', color:'blue'}, 
						];
						var alarmItem = alarmDict[item.alarmlevel];
						var name = item.equipname;
						var Notify = new qf.UI.Notify({
							type: 'warning',
							duration: 10000,
							autoOpen:true,
							message: '<div><div>'+name+' <span style="color:'+alarmItem.color+'">'+alarmItem.name+'</span> '+item.evalue+'('+item.unit+')</div><div>时间：'+item.time+'</div><div class="btn-groub" style="margin-top:5px;display:flex;justify-content:center;"><button data-id="0">解除报警</button><button data-id="1" style="margin-left:30px;">关闭报警</button><button data-id="2" style="margin-left:30px;">不再提示</button></div></div>',
							onClose: function(v){
								setTimeout(function(){
									next()
								}, ~~(1+Math.random()*3) * 1000);
							},
							onClick: function(tag){
								if(tag.nodeName === 'BUTTON'){
									var self = this, id = tag.dataset.id;
									if(id === '0'){		// 解除报警
										Notify.pause();
										that.openRelieveAlarm({equipno:item.equipno}, function(){
											Notify.close(true);
											reqAlarmsPopup();
										}, function(){
											Notify.recover();
										});
									}else if(id === '1'){	// 关闭报警
										Notify.pause();
										qf.UI.popupLayer({
											title:'提示',
											className:'confirm',
											closeBtnColor:'#eee',
											width:'350px',
											html:'点击确认后，该条数据仍会处于报警状态，但是不会再提示，您确认要这么做吗？',
											confirm: function(el){
												var parm = {id:item.id};
												that.pageApi.alterAbnormal('put', parm).then((res)=>{
													if(res.code === 200){
														Notify.close();
													};
												});
											},
											close: function(){
												Notify.recover();
											},
										});
									}else if(id === '2'){	// 不再提示
										delete this.onClose;
										Notify.close();
									};
								};
							},
						});
					}, function(){
						setTimeout(function(){
							reqAlarmsPopup();
						}, 15000);
					})
				});
			}.bind(this))();
		});
	},
	methods: {
		// 创建区域列表
		initData(list){
			var self = this;
			this.pageApi.getViewsConfig().then((res)=>{
				if(res.code === 200){
					var areas = res.body || [];
					for(var area of areas){
						this.area[area.areaid] = area.views;
						this.area.views = this.area.views.concat(area.views);
					};

					// onload
					this.$nextTick(() => {
						new qf.Async.intervalLoop(600000, function(){
							// 加载数据
							self.loadViewData(self.area.views);
						})
					});
				};
			});

			// 标题
			reqApi.system.moduleConfig.reqScreenTitle('get').then((res)=>{
				var body = res.body || {};
				this.title = body.title || '';
			});
		},
		
		// 加载模块数据
		loadViewData(list){
			//list = list.splice(0, 1);
			// 模块数据加工
			var viewDatas = {};
			for(var item of list){
				var viewCode = 'view_'+item.id;
				viewDatas[viewCode] = item;
				var view = (this.$refs[viewCode] || [])[0];
				var slider = view && view.createViews(item).then(panels => {
					this.moduleInfoDistribute(panels);
				});
			};
		},

		// 模块信息分发
		moduleInfoDistribute(panels){
			Tools.asyncLoop.call(this, panels, function(key, panel, next){
				var item = panel.item, param = {range:item.range,subitem:item.subitem,values:item.values, deviceid:item.deviceid}, type = panel.type;
				if(type === 't_1'){	// 干滩
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
							},
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_2'){	// 库水位
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								plotOptions: {
									column: {
										grouping: false,
										shadow: false,
										borderWidth: 0
									}
								},
							},
							
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_3'){	// 表面位移
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								xAxis: {
									labels: {
										rotation: 0,  // 设置轴标签旋转角度
									},
								},
							},
							warningLine:'double',
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_4'){	// 内部位移
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var chartType = param.values === '水平' ? 'bar' : 'column';
						var opts = {
							chartConfig:{
								chart:{
									type:chartType,
									borderWidth:0,
									marginLeft:55,
								},
							},
							warningLine:'double',
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_5'){	// 浸润线
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								chart:{type:'bar', marginLeft:55,},
								xAxis: {
									labels: {
										rotation: 0,  // 设置轴标签旋转角度
									},
								},
								/* 
								plotOptions: {
									series: {
										stacking: 'normal'
									}
								}, */
								tooltip: {
									formatter: function () {
										return this.series.name + "："+ this.key +'<br/>'+ Math.abs(this.y)+' 米';
									}
								},
							},
							callback: function(key, extend, give){
								if(key === 'series' && give[key].constructor.name === 'Array'){
									var mobj = extend[key], asobj = give[key];
									var arr = mobj[1].data, len = arr.length;
									for(var i=0; i<len; i++){
										var val = arr[i];
										arr[i] = 0 - val;
									};
								};
							}
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_6'){	// 降雨量
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								xAxis: [{
									labels: {
										rotation: -25,  // 设置轴标签旋转角度
									},
								}],
								series:[
									{type:'column', color:'#1DF7F9', borderRadius:'.05rem'},
									{type:'column', color:'#FAE728', borderRadius:'.05rem'}
								],
							},
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_7'){	// 排流量
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								chart: {
									type: 'cylinder',
									marginLeft:10,
									marginRight:-5,
									options3d:{
										enabled: true,
										alpha: 10,
										beta: 5,		// 左右
										depth: 50,
										viewDistance: 0
									}
								},
								plotOptions: {
									series: {
										depth: 25,
										//colorByPoint: true
									}
								},
								series:[
									{type:'column', color:'#00B2FC', showInLegend:false},
									//{type:'spline', color:'#FBC000', showInLegend:false, dashStyle:'Dash', lineWidth:1,}
								],
							},
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_8'){	// 水质
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{


						res = {"body":[{"unit":"ug/m³","svalue":"12.00","time":1723248388000,"sensroname":"气象站东PM25","sensorid":"37068520080801"},{"unit":"ug/m³","svalue":"12.00","time":1723248388000,"sensroname":"气象站东PM10","sensorid":"37068520080802"},{"unit":"db","svalue":"52.20","time":1723248389000,"sensroname":"气象站东噪音","sensorid":"37068520080803"},{"unit":"℃","svalue":"29.25","time":1723248390000,"sensroname":"气象站东温度","sensorid":"37068520080804"},{"unit":"%RH","svalue":"82.81","time":1723248391000,"sensroname":"气象站东湿度","sensorid":"37068520080805"},{"unit":"m/s","svalue":"2.80","time":1723248393000,"sensroname":"气象站东风速","sensorid":"37068520080807"},{"unit":"","svalue":"西南","time":1723248392000,"sensroname":"气象站东风向","sensorid":"37068520080808"}],"code":200,"msg":"操作成功"};

						var types = ['PM25', 'PM10','噪音','温度','湿度','风速','风向'];
						var data = res.body || {};
						var info = document.createElement("ul");
						info.className = 'info';
						//var len = data.length > 5 ? 5 : data.length, li;
						// 2024/1/9(周二) 去掉5个的限制
						var len = data.length, li;
						for(var i=0; i<len; i++){
							var item = data[i];
							if(!(i%2)){
								li = document.createElement("li");
							};
							var div = document.createElement("div");

							// 2024/8/10(周六) 为了缩减设备名称, 类型名称过长超出边界，添加对类型过滤
							var name = types.find(function(val, i){
								if(item.sensroname.includes(val)){
									return 1;
								};
							});

							if(i%2){
								//div.innerHTML = '<font>'+item.sensroname+'</font><span>'+item.svalue+'</span>';
								div.innerHTML = '<font>'+name+'</font><span>'+item.svalue+'</span>';
							}else{	// 左
								//div.innerHTML = '<span>'+item.svalue+'</span><font>'+item.sensroname+'</font>';
								div.innerHTML = '<span>'+item.svalue+'</span><font>'+name+'</font>';
							};
							li.appendChild(div);
							info.appendChild(li);
						};
						panel.el.innerHTML = '';
						panel.el.appendChild(info);
					});
				}else if(type === 't_9'){	// 渗流量
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								series:[
									{type:'column', color:'#00B2FC'},
									//{type:'spline', color:'#FBC000', dashStyle:'ShortDot',}
								],
							},
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_10'){	// 设备信息
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {}, that = this;
						panel.info.sum = data.all;
						panel.info.online = data.online;
						panel.info.offline = data.unline;
						
						// 离线设备点击事件
						this.currentUnList =  data.unlineList;  // 存储数据
						this.addLastLiClickEvent();
						

						
						var opts = {
							chartConfig:{
								chart: {
									backgroundColor:'transparent',
									marginBottom: null,
									marginLeft: null,
								},
								title: {
									floating:true,
									text: '总数<br/>'+data.all,
									verticalAlign: 'middle',
									y:22,
									floating: true,
									style:{
										color:'#00f6ff',
									}
								},
								tooltip: {
									formatter: function (e) {
										return this.key +'：'+ this.y;
									}
								},
								plotOptions: {
									pie: {
										allowPointSelect: true,
										borderWidth: 0,
										minSize:130,
										//size:200,
										cursor: 'pointer',
										dataLabels: {
											enabled: true,
											distance:10,
											format: '<b>{point.name}</b>: {point.y}',
											style: {
												color: 'black'
											}
										},
									}
								},
								series: [{
									type: 'pie',
									innerSize: '70%',
									name: '设备数量',
									data: [
										{name:'在线', y:data.online, color:'#48abe1'},
										{name:'离线', y:data.unline, color:'#064f94'},
									],
								}]
							},
							isSeriesData:true,
							type:item.type,
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_11'){	// 实时数据
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var datas = res.body || {}, target = panel.el;
						var scrolling = target.parentNode;
						var dataList = [];
						for(var item of datas){
							var data = item.data, time = item.time;
							if(data){
								for(var kitem of item.keys){
									dataList.push({
										name:item.name+ ' ' + kitem.name, value:data[kitem.key],
										unit:item.eqdanwei,
										time:time,
									});
								};
							};
						};
						
						// 创建列表
						var frag = document.createDocumentFragment();
						var ul = document.createElement('ul');
						ul.calssName = 'list';
						for(var item of dataList){
							var li = document.createElement('li');
							li.innerHTML = '<h5>'+item.name+'</h5><div><span>'+item.value+'</span><font>('+item.unit+')</font></div><font>'+item.time+'</font>';
							ul.appendChild(li);
						};
						target.firstElementChild.innerHTML = '';
						target.firstElementChild.appendChild(ul);
						qf.UI.scrollingPreview(scrolling);
					});
				}else if(type === 't_12'){	// 报警信息
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var dataList = res.body || {}, target = panel.el;
						var scrolling = target.parentNode;

						// 创建列表
						var frag = document.createDocumentFragment();
						var ul = document.createElement('ul');
						ul.calssName = 'list';
						for(var item of dataList){
							var li = document.createElement('li');
							var value = item.evalue + '('+item.eqdanwei+')';
							li.innerHTML = '<h5><i class="level'+item.alarmlevel+'"></i>'+item.equipname+'</h5><span> '+value+'</span><font>'+item.time+'</font>';
							ul.appendChild(li);
						};
						target.firstElementChild.innerHTML = '';
						target.firstElementChild.appendChild(ul);

						qf.UI.scrollingPreview(scrolling);
					});
				}else if(type === 't_13'){	// 实时天气
					var city = panel.item.city_weather || "weihai";
					var param = {c:'code', a:'getcode', id:48, icon:1, py:city};
					reqApi.getWeather(param).then((res)=>{
						var body = document.createElement("div");
						setTimeout(function(){
							body.innerHTML = res;
							var styles = body.querySelectorAll("link");
							for(var style of styles){
								body.removeChild(style)
							};
							var scripts = body.querySelectorAll("script");
							for(var script of scripts){
								script.parentNode.removeChild(script)
							};

							// 查看图片
							var img = body.querySelector("#day_1 .img").firstElementChild;
							img.src = 'http://plugin.tianqistatic.com/static/' + img.src.split('static/')[1];

							// 修剪dom
							var mobile05 = body.querySelector("#mobile05");
							var mleft = mobile05.firstElementChild;
							var cityCtn = mleft.firstElementChild;
							var cityEl = document.createElement("font");
							cityEl.innerText = '('+cityCtn.firstElementChild.innerText+')';
							mleft.nextElementSibling.firstElementChild.appendChild(cityEl);
							mobile05.removeChild(mleft);
							mobile05.removeChild(mobile05.lastElementChild);
							var childs = mobile05.children;
							for(var child of childs){
								child.innerHTML = child.firstElementChild.innerHTML;
							}
							panel.el.innerHTML = '<div class="weather" style="padding-top:0.2rem">'+body.innerHTML+'</div>';
						}, 300);
					});
				}else if(type === 't_14'){	// 视频监控
					param.id = item.id;
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var vparam = {
							id:data.v_id,
							appKey:data.v_appkey,
							appSecret:data.v_appsecret,
							name:data.v_name,
							channel:data.v_channel,
							remark:data.v_remark,
						};
						panel.setData(vparam)
					});
				}else if(type === 't_15'){	// 监测点
					var initModule = () => {
						reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
							var data = res.body || {};
							panel.setData(data, Tools, this.pageApi, initModule)
						});
					};
					initModule();
					/* new qf.Async.intervalLoop(30000, function(){
						initModule();
					}, function(){
						initModule();
					}) */
				}else if(type === 't_16'){	// 外坡比
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						var opts = {
							chartConfig:{
								plotOptions: {
									column: {
										grouping: false,
										shadow: false,
										borderWidth: 0
									}
								},
							},
							
						};
						Highchart.template.high(panel.el, data, opts);
					});
				}else if(type === 't_17'){	// 浸润线剖面
					reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{
						var data = res.body || {};
						this.cuCharts(panel.el, data, {
							axisLineWidth:2,
							axisColor:'pink',
						});
					});
				};
				next();
			}, function(){});
		},
		 // 新增：为 t_10 类下最后一个 li 添加点击事件
		 addLastLiClickEvent() {
			// 定位类名为 t_10 的容器（根据实际 DOM 结构调整选择器）
			const t10Container = document.querySelector('.t_10');
			if (!t10Container) return;

			// 获取容器内所有 li 元素
			const lis = t10Container.getElementsByTagName('li');
			if (lis.length === 0) return;

			// 取最后一个 li 元素
			const lastLi = lis[lis.length - 1];

			// 添加点击事件
			lastLi.addEventListener('click', (event)=> {
				// 点击事件逻辑（示例）
				this.showUnListModal = true;    // 显示模态框
				this.renderUnList()
				// 可在此处添加自定义业务逻辑（如弹框、数据请求等）
			});
		},
		// 新增：渲染离线设备列表
		renderUnList() {
			const container = document.getElementById('unListContainer');
			container.innerHTML = ''; // 清空旧内容
			
			// 创建列表
			const ul = document.createElement('ul');
			ul.style.listStyle = 'none';
			ul.style.padding = '0 15px';
			
			this.currentUnList.forEach(item => {
				const li = document.createElement('li');
				li.style.padding = '8px 0';
				li.style.borderBottom = '1px solid #e5e5e5';
				li.innerHTML = `
					<span style="width: 40%; display: inline-block;">${item.equipname}</span>
				`;
				ul.appendChild(li);
			});
			
			container.appendChild(ul);
		},

		// 新增：关闭模态框
		closeModal() {
			this.showUnListModal = false;
		},
		cuCharts(ctn, data, opts){
			//
			var cuCharts=function(ctn,data,opts){var ctn=this.ctn=typeof element==="string"?document.getElementById(ctn):ctn;if(!ctn)return console.log('%c cuCharts Error Element is a invalid param! ','color:red');var self=this,setDpr=1;var dpr=window.devicePixelRatio||qf.envir.dpr;self.dpr=dpr*setDpr;self.Cache={};!ctn.style.position&&(ctn.style.position='relative');var canvas=this.canvas=document.createElement("canvas");canvas.style.cssText='position:absolute;height:100%;width:100%;';this.ctx=canvas.getContext("2d");ctn.appendChild(canvas);var defaults=this.defaults={altitude:1000,damHeight:data.dissect.height||100,damWidth:data.dissect.width||100,axisLineWidth:6,axisColor:'red',margin:{top:14,right:0,bottom:0,left:18},};var left=defaults.margin.left*this.dpr,top=defaults.margin.top*this.dpr,right=defaults.margin.right*this.dpr,bottom=defaults.margin.bottom*this.dpr;this.ladders=data.steps||[];this.devices=this.formatDeviceParam(data.devices);var ladderInfo=this.discernDamHeight(this.ladders);this.options={damWidth:defaults.damWidth,damHeight:ladderInfo.damHeight,axisLineWidth:defaults.axisLineWidth||6,stepAverageHeight:ladderInfo.averageHeight,initX:defaults.margin.left*dpr+(defaults.axisLineWidth/2),initY:defaults.margin.top*dpr,bottomDist:defaults.margin.bottom*dpr,rightDist:defaults.margin.right*dpr,waterArea:{startAngle:data.dissect.sdeg,radius:data.dissect.diameter},alarm:data.alarm,axisLineWidth:opts.axisLineWidth||defaults.axisLineWidth,axisColor:opts.axisColor||defaults.axisColor,};this.init()};cuCharts.prototype={init:function(){this.setModule();this.onresize()},drawAxis:function(color,damHeight){var lw=this.options.axisLineWidth;var wHalf=lw/2;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var axisYSX=initX-wHalf;var axisXEY=endY+lw;var axisYEY=endY+wHalf;this.drawLiner({sx:axisYSX,sy:0,ex:axisYSX,ey:axisXEY,width:lw,color:color});var fontY=~~(this.options.damPxHeight/2+this.options.initY);var fontSize=12;var axisXText='剖面高度'+~~damHeight+'米';this.drawText({x:this.options.initY/2+2,y:fontY,size:fontSize,width:fontSize*this.dpr,text:axisXText,color:'#fff',align:'center',vertical:'center',});this.drawLiner({sx:initX,sy:axisYEY,ex:endX,ey:axisYEY,width:lw,color:color})},drawSteps:function(ladders){ladders=ladders||[0];var initX=this.options.initX,initY=this.options.initY;var cumulationX=initX,cumulationY=initY;var damLength=this.options.endX;var damDepth=this.options.endY;var pxRetioY=this.options.pxRetioY;var averageHeight=this.options.stepAverageHeight*pxRetioY;var damPxWidth=this.options.damPxWidth;var damPxHeight=this.options.damPxHeight;var len=ladders.length;var stepWidth=damPxWidth/(len+0);var stepHeight=damPxHeight/(len+0);var slopeRatio=damPxHeight/damPxWidth;var maxStepDepth={ratio:slopeRatio};this.Cache.ladders=[];for(var i=0;i<len;i++){var item=ladders[i];var setWidth=item.width*this.dpr*this.options.pxRetioX;var setHeight=item.height*pxRetioY||averageHeight;var slope=item.slope||0;var aCoord=this.byAngleAndHeightToCoord(slope,setHeight);var fEndX,fEndY;if(setWidth){fEndX=cumulationX+setWidth;stepWidth=(damLength-(cumulationX+setWidth+aCoord.x*this.dpr))/(len-(i+1))}else{fEndX=cumulationX+(stepWidth-aCoord.x*this.dpr)};if(setHeight){fEndY=cumulationY+setHeight;stepHeight=(damDepth-(cumulationY+setHeight))/(len-(i+1))}else{fEndY=cumulationY+stepHeight};var lEndX=fEndX+aCoord.x*this.dpr,lEndY=fEndY+aCoord.y*this.dpr;var stepDepthRatio=(damDepth-~~lEndY)/(damLength-lEndX);if(stepDepthRatio&&stepDepthRatio<maxStepDepth.ratio&&i<len-1){maxStepDepth={ratio:stepDepthRatio,x:lEndX,y:lEndY,}};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,width:2,color:"#8b8b8b"});this.drawLiner({sx:fEndX,sy:cumulationY,ex:lEndX,ey:lEndY,width:2,color:"#8b8b8b"});this.Cache.ladders[i]={sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,slope:slope,slopeX:lEndX,slopeY:lEndY,xy:aCoord.xy};cumulationX=lEndX;cumulationY=lEndY};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:damLength,ey:damDepth,width:2,color:"#8b8b8b"});var damHeight=(cumulationY-this.options.initY)/pxRetioY;return maxStepDepth.damHeight=damHeight,maxStepDepth},drawDevice:function(list){var lineW=4*this.dpr,deviceW=6*this.dpr,deviceH=3*this.dpr;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var ladders=this.Cache.ladders||[];var fontSize=11;var fontTopDev=fontSize*this.dpr+3;this.options.deviceCoords=[];for(var device of list){var holeX=~~(endX-device.x*this.options.pxRetioX);var depthText='埋深'+device.depth+'米';var holeDistY=device.holeDepth*this.options.pxRetioY;var deviceY=device.value*this.options.pxRetioY;var ladderSY=this.xPixelToStepsYPixel(holeX);this.drawText({x:holeX,y:ladderSY-fontTopDev,size:fontSize,text:depthText,color:'red',align:'center',});var holeEndY=ladderSY+holeDistY;holeEndY=holeEndY>endY?endY:holeEndY;this.drawLiner({sx:holeX,sy:ladderSY,ex:holeX,ey:holeEndY,width:lineW,color:"grey"});var deviceLY=ladderSY+deviceY;var deviceEY=deviceLY+(deviceH/2);var deviceSY=deviceEY-deviceH;this.drawLiner({sx:holeX,sy:deviceSY,ex:holeX,ey:deviceEY,width:deviceW,color:"#3403CB"});this.options.deviceCoords.push({x:holeX,y:deviceLY,stepY:ladderSY});var valFont=11;var valueSY=~~(deviceSY-valFont*this.dpr-6);var text='水位值'+device.waterValue+'米';this.drawText({x:holeX,y:valueSY,size:valFont,text:text,color:'white',align:'center',})}},drawAlarmLine:function(alarms,Steps){var alarmValues=alarms.value;var alarmLevel=alarms.alarmLevel;var deviceCoords=this.options.deviceCoords||[];var deviceSX=deviceCoords[0].x;var deviceSY=deviceCoords[0].y;var initX=this.options.initX;var initY=this.options.initY;var endY=this.options.endY;var endX=this.options.endX;var alarmLevelNum=['red','orange','yellow','blue']||Object.keys(alarmValues);var alarmLine={};var level=(~~alarmLevel||alarmLevelNum.length+1)-1;var nearLevel=level?level-1:level;var alarm=alarmLevelNum[level];var nearAlarm=alarmLevelNum[nearLevel];alarmLine[nearAlarm]=alarmValues[nearAlarm];if(alarm){alarmLine[alarm]=alarmValues[alarm]};var alarmRealParam=this.getAlarmRealParam(Object.values(alarmLine))||Steps.ratio;var deviceSlopeRatio=alarmRealParam.ratio;for(var key in alarmLine){var value=alarmValues[key];if(key){var ladderSY=this.xPixelToStepsYPixel(deviceSX)-initX+6;var lineSY=(value*this.options.pxRetioY+ladderSY)-(deviceSX-initX)*deviceSlopeRatio;var lineEX=(endY-lineSY)/deviceSlopeRatio;this.drawLiner({sx:initX,sy:lineSY+initY,ex:lineEX,ey:endY,width:2,color:key})}}},getCirHeightDev:function(r,x){return r-Math.sqrt(Math.pow(r,2)-Math.pow(x,2))},drawWaterArea:function(depth){depth=100;var startAngle=this.options.waterArea.startAngle;var radiusMultiple=this.options.waterArea.radius;var angleRatio=90/0.5;var initArc=startAngle/angleRatio;var ctx=this.ctx,initX=this.options.initX;var arcOrigin=1.50,arcStart=arcOrigin+initArc;var sAngle=(arcStart-arcOrigin)*angleRatio;var r1=this.options['damPxWidth']*radiusMultiple;var waterApexToAxisXDist=Math.sin(sAngle*0.017453293)*r1;var sAngleToTopSpotDist=(r1-(Math.cos(sAngle*0.017453293)*r1));var depth=(depth||30)*this.options.pxRetioY+sAngleToTopSpotDist;var firstDeviceX=this.devices[0].x*this.options.pxRetioX;var ladderSY=this.xPixelToStepsYPixel(firstDeviceX+initX)-initX+6;var deviceToAxisXDist=firstDeviceX+waterApexToAxisXDist;var deviceToAxisYDist=Math.sqrt(r1*r1-deviceToAxisXDist*deviceToAxisXDist);var deviceAreaToApexDev=r1-deviceToAxisYDist-sAngleToTopSpotDist-ladderSY;var firstDeviceY=this.options.damPxHeight-this.devices[0].value*this.options.pxRetioY;firstDeviceY+=deviceAreaToApexDev;var ry=r1+this.options.endY-sAngleToTopSpotDist-firstDeviceY;var lineToY=r1-sAngleToTopSpotDist-firstDeviceY;var eAngle=Math.acos(lineToY/r1)/0.017453293;var arcEnd=eAngle/angleRatio+arcOrigin;ctx.beginPath();ctx.arc(initX-waterApexToAxisXDist,ry,r1,arcStart*Math.PI,arcEnd*Math.PI,false);ctx.lineTo(initX,ry-lineToY);ctx.fillStyle='#00A2E8';ctx.fill()},byAngleAndHeightToCoord:function(angle,height){var devX=Math.tan(angle*0.017453293)*height;var xy=height/Math.cos(angle*0.017453293);var devY=height-devX;var yRatio=height/devX;var x=0,y=0;if(angle>50){x=height,y=devY*yRatio}else{x=devX,y=0};return{x:x,y:y,xy:xy}},discernDamHeight(list){var not=0,set=0,sum=0;for(var item of list){var height=item.height;height?(set++,sum+=height):not++};var damHeight=not?this.defaults.damHeight:sum;var averageHeight=(damHeight-sum)/not;return{averageHeight:averageHeight,damHeight:damHeight}},setModule:function(){this.ctx.clearRect(0,0,this.SumWidth,this.SumHeight);var canvas=this.canvas;var SumWidth=this.SumWidth=(this.ctn.clientWidth*this.dpr)-this.ctn.clientLeft-0;var SumHeight=this.SumHeight=this.ctn.clientHeight*this.dpr-this.ctn.clientTop-0;canvas.width=SumWidth*this.dpr;canvas.height=SumHeight*this.dpr;canvas.style.cssText='position:absolute;top:0;left:0;height:'+(SumHeight)+'px;width:'+SumWidth+'px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;';var top=this.options.initY,left=this.options.initX,bottom=this.options.bottomDist,right=this.options.rightDist;var damPxWidth=SumWidth-(right+left),damPxHeight=SumHeight-(bottom+top+this.options.axisLineWidth),endX=SumWidth-right,endY=SumHeight-bottom-this.options.axisLineWidth;this.options['endX']=endX;this.options['endY']=endY;this.options['damPxWidth']=damPxWidth;this.options['damPxHeight']=damPxHeight;this.options['pxRetioX']=damPxWidth/this.defaults.damWidth;this.options['pxRetioY']=damPxHeight/this.options.damHeight;this.options['HWRation']=(endY-top)/(endX-left);this.drawChart()},formatDeviceParam:function(devices){var devices=devices||[];var arr=[];for(var item of devices){arr.push({x:item.jrx_coord_x,holeDepth:item.jrx_trepanning,value:item.depth,depth:item.jrx_burial,waterValue:item.stage})};return arr},getAlarmRealParam:function(aValues){var aval=aValues[0];var coords=this.options.deviceCoords||[];var valY=aval*this.options.pxRetioY;var sy=valY+coords[0].stepY,sx=coords[0].x,ey=0,ex=0;var len=coords.length;for(var i=1;i<len;i++){var item=coords[i];ey=valY+item.stepY,ex=item.x};return{ratio:(ey-sy)/(ex-sx),sy:sy,ey:ey}},drawChart:function(){var Steps=this.drawSteps(this.ladders);this.drawAxis(this.options.axisColor,Steps.damHeight);var depth=55;this.drawWaterArea(depth);this.drawDevice(this.devices);this.drawAlarmLine(this.options.alarm,Steps)},onresize:function(){qf.resize(()=>{this.setModule()})},updateData:function(data){data=data||{};this.stations=data.stations||this.stations;this.points=data.points||this.points;this.draw(this.cacheX+this.destX,true)},drawLiner:function(o){var ctx=this.ctx;ctx.beginPath();ctx.moveTo(o.sx,o.sy);ctx.lineTo(o.ex,o.ey);ctx.lineWidth=o.width;ctx.strokeStyle=o.color;ctx.stroke()},drawText:function(o){var ctx=this.ctx;var fontSize=(o.size||14)*this.dpr;var text=o.text||'';var textWidth=this.getTextWidth(text,fontSize);var width=o.width||textWidth;var align=o.align||'normal';ctx.font='normal '+fontSize+"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";var rows=[];if(width&&~~width<textWidth){var str='',texts=text.split("");for(var word of texts){var testStr=str+word;var testWidth=ctx.measureText(testStr).width;if(testWidth>width){rows.push(str);str=word}else{if(testWidth===width){rows.push(testStr);str=''}else{str=testStr}}};str&&rows.push(str)}else{rows=text.split(/\r\n|\n/g)};var rlen=rows.length,sumHeight=(rlen+1)*fontSize;var x=o.x;var y=o.vertical==='center'?o.y-(sumHeight/2):o.y;var color=o.randomColor?this.getRandomColor():o.color||'red';var lsx=x,lsy=y;for(var b=0;b<rlen;b++){if(align==='center'){var textW=this.getTextWidth(rows[b],fontSize);lsx=x-(textW/2)};lsy=(b+1)*fontSize;ctx.lineHeight=1;ctx.fillStyle=color;ctx.fillText(rows[b],~~lsx+0.5,y+(~~lsy)+0.5)}},getTextWidth:function(text,fontSize){return(this.ctx.measureText(text).width/parseInt(this.ctx.font))*fontSize},drawImg:function(img,x,y,w,h){x=x-w/2;y=y-h;ctx.drawImage(img,x,y,w,h)},getRandomColor:function(){return"#"+Math.floor(Math.random()*16777215).toString(16)},getEventTarget:function(x,y){if(y>bottomReferY-imgA.height-1&&y<bottomReferY+1){var arr=this.points;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}};if(y>bottomReferY-imgB.height-1&&y<bottomReferY+1){var arr=this.stations;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}}},xPixelToStepsYPixel:function(x){var ladders=this.Cache.ladders||[],ladderSY=0;for(var ladder of ladders){if(x>=ladder.sx&&x<ladder.slopeX){if(x<ladder.ex){ladderSY=ladder.sy}else{var slopeWidth=ladder.slopeX-ladder.ex;var slopeHeight=ladder.slopeY-ladder.ey;ladderSY=(x-ladder.ex)*(slopeHeight/slopeWidth)+ladder.ey}}};return ladderSY},};return new cuCharts(ctn,data,opts);
		},
		
		mapOnload(){
		},

		openRelieveAlarm(params, fn, close){
			var self = this;
			qf.UI.popupLayer({
				title:'解除报警',
				className:'screenAlart',
				closeBtnColor:'#eee',
				html:'<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>',
				confirm: function(el){
					var inputs = el.querySelectorAll("input");
					for(var el of inputs){
						var key = el.dataset.name;
						var val = el.value;
						if(key === 'jchours'){
							val = parseInt(val) || 12;
						}else{
							val = val || '默认原因！';
						};
						params[key] = val;
					};

					// 解除
					self.pageApi.relieveAlarm(params).then((res)=>{
						//if(res.code === 200){};
						fn && fn()
					});
				},
				close: function(){
					close && close()
				},
			});
		},
	},
}
</script>

<style lang="scss" scope>
	/* 新增原生模态框样式 */
	.native-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: none;
	}

	.native-modal.active {
		display: block;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 8px;
		min-width: 600px;
		max-width: 80%;
		max-height: 80%;
		overflow-y: auto;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	}

	.modal-header {
		padding: 15px 20px;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-header h3 {
		margin: 0;
		font-size: 18px;
		color: #333;
	}

	.modal-close {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: #666;
		padding: 0 8px;
	}

	.modal-body {
		padding: 20px;
		max-height: calc(100vh - 600px);
		overflow-y: auto;
	}
	@font-face {
		font-family:"diget year";
		src: url("~@/assets/fonts/DS-Digital.ttf");
	};
	.font_digit{font-family:diget year;}
	
	.Screen {
		position:relative;height:100%;width:100%;overflow:hidden;background-color:#00164e;

		.a_0, .b_0{position:absolute;}
		>.actv{display:block;}
		.a_0{
			top:0;left:0;height:100%;width:100%;
			background:no-repeat center center url('~@/assets/images/layout/s_bg_min.png');
			background-size:100% 100%;

		}
		.b_0{
			display:flex;width:100%;height:100%;padding-top:.65rem;background-color:rgba(0,0,0,.15);
			header{
				position:absolute;top:0;left:0;height:.64rem;width:100%;z-index:5;
				display:flex;user-select:none;
				.b1_a{
					position:absolute;top:0;left:0;height:.64rem;width:100%;
					background:no-repeat top left url('~@/assets/images/layout/s_hd_min.png');background-size:100% auto;
					display:flex;justify-content:center;align-items:center;
					h2{
						font-size:.32rem;line-height:1;margin-top:-.04rem;
						background-image: -webkit-linear-gradient(top, #fff, #d5f3fe, #7adbfe);
						-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02rem;
					}
					.b1_a1{
						position:absolute;top:0;right:0;height:100%;width:3.5rem;
						display:flex;align-items:center;justify-content:left;
						.font_digit{
							margin-right:.20rem;font-size:.28rem;color:#2ef4ee;
							span{font-family:serif;font-size:.24rem;margin:0 .05rem;}
						}
					}
					.b1_a2{
						position:absolute;top:0;left:.20rem;height:100%;
						display:flex;align-items:center;
						&:before{
							content:'';display:block;height:.35rem;width:1.58rem;
							background:no-repeat top left url('~@/assets/images/logo_ks.png');background-size:100% auto;
						}
					}
				}
			}

			.b_2{
				flex:1;position:relative;margin:0 .08rem;
				.b_2a{
					position:absolute;top:0;left:0;height:100%;width:100%;
					display:flex;flex-direction:column;
					
					.b2_a{
						flex:1;display:flex;

						.b2_a1, .b2_a3{
							flex:1;
							>div{
								//background-color:pink;
								flex:1;
							}
						}
						.b2_a1, .b2_a2, .b2_a3{
							display:flex;flex-direction:column;
							>div{margin-bottom:.08rem;}
						}

						.b2_a2{
							width:8.84rem;margin:0 .08rem;
							>div:first-child{
								height:7.52rem;
								/* background-color:yellow; */
								box-shadow: inset 0rem 0rem 0.15rem 0.24rem rgba(2,43,80, .8);
							}
							>div:last-child{
								//height:2.46rem;
								flex:1;
								display:flex;
								//height:22.777vh;
								>div{
									flex:1;margin-right:.08rem;
									//background-color:pink;
									&:last-child{
										margin-right:0;
									}
								}
							}

							.b2a2_a{
								flex:1;position:relative;
								/* background:no-repeat center center url('~@/assets/images/layout/map_min.png');background-size:100% auto; */
								>div{
									display:none;position:absolute;top:0;left:0;height:100%;width:100%;
								}
								>div.show{display:block;}
								>div:first-child{}
							}
						}
						.b2_a3{
						}

						.view-item{
							border:1px solid #004a8b;
							position:relative;
							box-shadow:inset 0rem 0rem .15rem .04rem rgba(10,106,180,.8);
							&:before, &:after, .view-flx:before, .view-flx:after{
								content:"";position:absolute;height:.10rem;width:.10rem;z-index:1;
								border-style:solid;border-color:#02f6ff;
							}
							&:before, &:after{top:-1px;}
							&:before{
								left:-1px;
								border-width:.02rem 0 0 .02rem;
							}
							&:after{
								right:-1px;
								border-width:.02rem .02rem 0 0;
							}
							.view-flx{
								position:absolute;top:0;left:0;height:100%;width:100%;
								background-color:rgb(1,19,70, .3);
								&:before, &:after{bottom:-1px;}
								&:before{
									left:-1px;
									border-width:0 0 .02rem .02rem;
								}
								&:after{
									right:-1px;
									border-width:0 .02rem .02rem 0;
								}
							}
						}
					}

					.weather{
						font-size:11px;
						.mleft{display:none;}
						.wtpath{display:none;}
						.mright{flex:1;text-align:center;}
						img{display:block;width:2vw !important;height:auto !important;margin:0 auto;}
						ul{margin:5px 0;color:#d0d2ff;}
						#mobile05{
							display:flex;position:relative;padding-top:5vh !important;
						}
						#mobile05>div:last-child{display:none;}
						#mright_1{
							position:absolute;top:0;left:0;height:auto;width:100%;display:flex;
							ul{margin:0;color:#03d3fe;}
							.wt{display:flex;align-items:center;margin-left:140px;}
							.day{display:none;}
							span:last-child{display:block;
								position:absolute;top:4px;left:0px;height:auto;
								font-size:26px;
							}
							font{margin:6px 0 0 10px;color:#35ecfa}
						}
					}
				}
			}
		}
	}
</style>