var firstAxo = false;
var nowSn = null;
var shipLi = [];
var center = ol.proj.transform([118.26718,22.45402], "EPSG:4326", "EPSG:3857");

window.addEventListener('message',(data)=>{
	setOpen(data.data);
})
$(document).ready(function(){
	firstData(0);
	// setInterval(()=>{
	// 	firstData(1);
	// },10*1000)
})
var norMap = new ol.layer.Tile({
	visible: true,
	source: new ol.source.XYZ({
		url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235'
	}),
	isGroup: true,
	name: '天地图路网'
});
var callMap = new ol.layer.Tile({
	visible: true,
	source: new ol.source.XYZ({
		url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235'
	}),
	isGroup: true,
	name: '天地图文字标注'
});
//初始化地图
var map = new ol.Map({
	target: 'container',
	layers: [norMap, callMap],
	view: new ol.View({
		center: center,
		zoom: 5,
		minZoom: 2
	})
});

function firstData(_num){
	if(_num == 0){yzkj.load("load1")};
	infoAjaxLi(function(sju){
		var ysyLi = sju;
		setTimeout(()=>{
			getShip(function acb(_data){
				nowSn = localStorage.getItem("shipSn");
				shipLi = _data;
				let _str = "";
				if(nowSn!=null&&nowSn!="null"){
					nowSn = nowSn;
				}else{
					nowSn = shipLi[0].sn;
					localStorage.setItem("shipSn",nowSn);
				}
				for(var i=0;i<shipLi.length;i++){
					let _sta = "", _yssta = 0;
					if(shipLi[i].devicelist == null){
						_sta = (shipLi[i].onlin == 1?"text-blue":"");
					}else{
						if(ysyLi.length){
							let _jcn = shipLi[i].devicelist.split(",")[0];
							let _sji = ysyLi.filter(item => item.deviceSerial == _jcn)[0];
							_yssta = _sji.status;
							if(_sji.status == 1&&shipLi[i].onlin != 0){
								_sta = "text-blue";
							}else if(shipLi[i].onlin == 1&&_sji.status == 0){
								_sta = "text-orange";
							}else if(shipLi[i].onlin == 0&&_sji.status == 1){
								_sta = "text-green";
							}
						}
					}
					_str += `<li class="flex align-center justify-between text-gray" data-id="${shipLi[i].sn}">
								<div class="flex align-start">
									<div class="iconfont icon-chuanbo ${_sta}"></div>
									<div class="text-sm text-white">${prodSn[shipLi[i].sn].chn}</div>
								</div>
								<div>
									${shipLi[i].onlin != undefined?`<span class="iconfont icon-baobiao ${shipLi[i].onlin == 1?'text-green':''}"></span>`:''}
									${shipLi[i].devicelist == null?'':`<span class="iconfont icon-shipinjiankong ${_yssta == 1?'text-green':''}">${prodSn[shipLi[i].sn].enn.length?'.':''}</span>`}
								</div>
							</li>`;
				}
									// ${prodSn[shipLi[i].sn].enn.length?`<span class="">•</span>`:''}
				
				$("#html_view").html(_str);
				setMarskMap(shipLi);
				setOpen(localStorage.getItem("shipSn") || shipLi[0].sn);
				if(_num == 0){yzkj.closeLoad("load1");}
			})
		},100)
	})
}
var createLabelStyle = function(feature) {
	return new ol.style.Style({
		image: new ol.style.Icon({ 
			anchor: [0.5,1.2],
			anchorOrigin: 'top-center',
			src: staticUrl+"/imgs/ship1.png",
			rotation: 0
		}),
		text: new ol.style.Text({
			textAlign: 'center',
			font: ' 12px 微软雅黑',
			offsetX: 0,
			offsetY: 0,
			text: feature.get('name'),
			fill: new ol.style.Fill({
				color: '#000'
			}),
			backgroundFill: new ol.style.Fill({
			  color: "rgba(255, 255, 255, 1)",
			}),
			padding: [2, 4, 2, 4]
		})
	});
};
var mapLayers = {};
function setMarskMap(){
	shipLi.forEach(function(item) {
		if(mapLayers[item.sn] != undefined){
			mapLayers[item.sn].getSource().clear();
			map.removeLayer(mapLayers[item.sn]);
		}
		var iconFeature = new ol.Feature({
			geometry: new ol.geom.Point(ol.proj.fromLonLat(item._ponew)),
			name: prodSn[item.sn].chn,
			key: item.sn
		});
		iconFeature.setStyle(createLabelStyle(iconFeature));
		mapLayers[item.sn]  = new ol.layer.Vector({
			source: new ol.source.Vector({features: [iconFeature]})
		});
		map.addLayer(mapLayers[item.sn]);
	})
}
map.on('click', function(evt) {
	var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
	if(feature != undefined){
		let _sn = feature.A.key;
		let _ind = shipLi.findIndex((item,indx) => { return item.sn == _sn});
		firstAxo = false;
		setOpen(shipLi[_ind].sn);
	}
});
function setOpen(_sn){
	for (var i = 0; i < shipLi.length; i++) {
		if (_sn == shipLi[i].sn) {
			let _str = shipLi[i];
			if(!firstAxo){
				firstAxo = true;
				map.getView().animate({
					center: ol.proj.fromLonLat(_str._ponew),
					duration: 1000
				});
			}
			localStorage.setItem("shipSn",_str.sn);
			// PC端
			$("#html_view .text-sm").removeClass("act");
			$("#html_view li[data-id='"+_str.sn+"'] .text-sm").addClass("act");
			
			$(".map_title").text(_str.prod);
			$("#gps_lat").text(_str._ponew[1].toFixed(6));
			$("#gps_lon").text(_str._ponew[0].toFixed(6));
			$("#sound").text(_str.sound+" m");
			$("#head").text(_str.head+" °");
			$("#speed").text(_str.speed+" km/h");
			$("#nowtime").text(_str.time);
			$("#sailing").text(checkSta(_str.sail));
			getFormattedAddress(_str._ponew, function(_pos){
				$("#gps_pos").text(_pos);
			})
			return;
		}
	}
}
$("#html_view").on("click","li",function(){
	let _id = $(this).data("id");
	window.parent.postMessage({sn: _id,change: "acb"}, '*');
	firstAxo = false;
	setOpen(_id);
})