let layer,table,form;
let myChart = echarts.init(document.getElementById('tendency'));
const bidCode = parent.$('#bidPro').val();

$('#modelIframe').attr('src', '../../pages/3Dglb/index.html');

layui.use(['layer','table','form'], function () {
    layer = layui.layer;
	table = layui.table;
	form = layui.form;
	// 标段工程下拉选监听
	form.on('select(gt)', function (data) {
		getDeviceList(data.value);
	});
			// 响应成功后的拦截器
			$.ajaxSetup({
				beforeSend: function(xhr, options) {
					var originalSuccess = options.success
					options.success = function(data, textStatus, jqXhr) {
							data = modifyResponseData(data);
					// success(data,textStatus, jqXhr);
						originalSuccess.apply(this, arguments)
					}
				}
			})
	//杆塔下拉选
	getGtLists();
});

function getGtLists(){
	const url = commonUrl + "system/sys/select/getGtLists?bidCode="+ bidCode; // 杆塔url
	ajaxRequest(url, "get",  null , true, function () {
	}, function (result) {
	    if (result.code === 200) {
			let html = '';
			if (result.data && result.data.length > 0 && result.data[0] !== null) {
			    $.each(result.data, function (index, item) {
			        html += '<option value="' + item.gtId + '">' + item.name + '</option>'
			    })
				// 设备列表
				getDeviceList(result.data[0].gtId);
			}else{
				html += '<option value="">无数据</option>'
				getDeviceList("");
			}
			$('#gt').empty().append(html);
			layui.form.render();
	    } else if (result.code === 500) {
	        layer.msg(result.msg, { icon: 2 });
	    }
	}, function (xhr) {
		layer.msg(xhr, { icon: 2 });
	});
}

function getDeviceList(gtId){
	const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&gtId=' + gtId;
	let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
	const url = commonUrl + "screen/largeScreen/towerAssInspect/getDeviceList?params="+montageParam; // url	
	ajaxRequestGet(url, "get", true, function () {
	}, function (result) {
		let html = '';
		if (result.code === 200) {
			if (result.data && result.data.length > 0 && result.data[0] !== null) {
			    $.each(result.data, function (index, item) {
					html += '<div class="device-list-device" style="cursor: pointer;" onclick="getInfo(\'' +item.deviceId+ '\')" >';
					html +='<input value = "'+item.deviceId +'" style="display:none;" />';
					if(item.type=="1"){
						html += '<div class="img-style normal"></div>';
					}else if(item.type=="2"){
						html += '<div class="img-style alarm"></div>';
					}else if(item.type=="0"){
						html += '<div class="img-style connection"></div>';
					}
					html += '<div class="device-list-font">'+ item.deviceName +'</div>';
					html +='</div>';
				})
				getInfo(result.data[0].deviceId)
			}else{
				html += '<div style="color:#71757B;">无数据</div>'
				getInfo("")
			}
		} else if (result.code === 500) {
			layer.msg(result.msg, { icon: 2 });
		}
		$('#deviceList').empty().append(html);
	}, function (xhr , status, error) {
        error(xhr, status, error)
	}, aqEnnable);
}

//根据点击的设备去查询其他信息
function getInfo(deviceId){
	//实时检测
	getRealTimeDetection(deviceId);
	
	//实时告警
	getRealTimeAlarmList(deviceId)
	
	//历史记录
	getHistoryList(deviceId)
}

function getRealTimeDetection(deviceId){
	let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&deviceId=' + deviceId;
	let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
	const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeDetection?params="+montageParam; // url	
	ajaxRequestGet(url, "get", true, function () {
	}, function (result) {
		let html = '';
		if (result.code === 200) {
			if (result.data && result.data.length > 0 && result.data[0] !== null) {
			    $.each(result.data, function (index, item) {
						let modeName =  nullToEmpty(item.modeName);
						let val =  nullToEmpty(item.val);
						html +='<div style="cursor: pointer;" class="detection-style detection-incline" onclick="getTrend(\'' +deviceId+ '\', \'' +item.id+ '\')">' ;
						html +='<div class="detection-style-font">';
						html +='<div class="detection-style-font-top">'+ modeName +'</div>';
						html +='<div class="detection-style-font-bot">'+ val  +'</div>';
						html +='</div>';
						html +='</div>';
				})
				//当日检测变化趋势
				getTrend(deviceId,result.data[0].id)
			}else{
				html += '<div style="color:#71757B;">无数据</div>'
			}
		} else if (result.code === 500) {
			layer.msg(result.msg, { icon: 2 });
		}
		$('#detection').empty().append(html);
	}, function (xhr, status, error) {
        error(xhr, status, error)
        setData(null);
    }, aqEnnable);
}

function nullToEmpty(name){
	if (name === null || name === undefined) {
	    name = "";
	}
	return name
}

function getTrend(deviceId,id){
	let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&deviceId=' + deviceId + '&id=' + id;
	let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
	const url = commonUrl + "screen/largeScreen/towerAssInspect/getTrend?params="+montageParam; // url	
	ajaxRequestGet(url, "GET", true, function () {
	}, function (result) {
		let html = '';
		if (result.code === 200) {
			if (result.data && result.data.length > 0 && result.data[0] !== null) {
			    let xLabel =[];
				let dataValue = [];
				$.each(result.data, function (index, item) {
					xLabel.push(item.time);
					dataValue.push(item.changeVal);
				});
				initEchartsOne(xLabel,dataValue);
			}else{
				initEchartsOne([],[]);
			}
			
		} else if (result.code === 500) {
			layer.msg(result.msg, { icon: 2 });
		}
	}, function (xhr, status, error) {
        error(xhr, status, error)
        setData(null);
    }, aqEnnable);
}


function getRealTimeAlarmList(deviceId){
	const url = commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeAlarmList"; // 建管单位url
	    table.render({
	        elem: '#demo1',
			height:'full-530',
	        url: url,
	        skin: 'line',
	        page: true,
			headers:{
				decrypt:"decrypt",
				"Authorization":token
			},
			where: {
				deviceId:deviceId
			},
	        cols: [[
	            {type: 'numbers', title: '序号'}, // 添加序号列
	            {field: 'warnContent', title: '告警内容',align:'center'},
	            {field: 'warnTime', title: '预警时间',align:'center'}
	        ]],
			initComplete: function () {
			  // 在表格渲染完成后，重新渲染序号列
			  var that = this.elem.next();
			  var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
			  tool.find("tr").each(function (index, item) {
				$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
			  });
			},
			done:function(res, curr, count, origin){
				console.log(res);
			}
	    })
}

function getHistoryList(deviceId){
	const url = commonUrl + "screen/largeScreen/towerAssInspect/getHistoryList"; // 建管单位url
	table.render({
		elem: '#demo2',
		height:'full-560',
		url: url,
		skin: 'line',
		page: true,
		headers:{
			decrypt:"decrypt",
			"Authorization":token
		},
		where: {
			deviceId:deviceId,
		},
		cols: [[
			{type: 'numbers', title: '序号'}, // 添加序号列
			//{field: 'areaName', align: 'center', title: '区域名称'},
            {field: 'deviceName', align: 'center', title: '设备名称'},
            {field: 'modeName', align: 'center', title: '施工工艺'},
            {field: 'changeVal', align: 'center', title: '变化值'},
            {field: 'val', align: 'center', title: '检测值'},
            {field: 'createTime', align: 'center', title: '检测时间'},
            {field: 'isWarn', align: 'center', title: '是否告警'},

			// {field: 'areaName', title: '区域名称',align:'center'},
			// {field: 'modeName', title: '检测点名称',align:'center'},
			// {field: 'val', title: '检测值',align:'center'},
			// {field: 'thisChangeVal', title: '本次变化值',align:'center'},
			// {field: 'changeVal', title: '累计变化值',align:'center'},
			// {field: 'updateTime', title: '检测时间',align:'center'},
			// {field: 'isWarn', title: '状态',align:'center'}
		]],
		initComplete: function () {
		  // 在表格渲染完成后，重新渲染序号列
		  var that = this.elem.next();
		  var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
		  tool.find("tr").each(function (index, item) {
			$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
		  });
		},
		done:function(res, curr, count, origin){
			console.log(res);
		}
	})
}

/* 变化趋势 */
function initEchartsOne(xLabel,dataValue) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
   // let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
   // let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let option = {
        backgroundColor: 'transparent',
        tooltip,
        legend: {
            show: false,
        },
        grid: {
            top: '25%',
            left: '5%',
            right: '5%',
            bottom: '15%',
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    padding: [0, 60, 0, 0],
                    fontFamily: fontFamily
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#25393B',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '周计划数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        // color: '#1ED6FF', // 线条颜色
						color: new echarts.graphic.LinearGradient(
						    0,
						    0,
						    0,
						    1,
						    [
						        {
						            offset: 0,
						            color: '#0DF0FD',
						        },
						        {
						            offset: 0.6,
						            color: '#00F1D4',
						        },
						        {
						            offset: 1,
						            color: '#0EEEFC',
						        },
						    ],
						    false
						),
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1ED6FF',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#01DDE9',
                                },
                                {
                                    offset: 0.6,
                                    color: '#086A79',
                                },
                                {
                                    offset: 1,
                                    color: '#0D3134',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue,
            }
        ]
    }
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}