// 同步加载 markers.json 文件
function loadJSONSync(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, false); // false 表示同步请求
    try {
        xhr.send(null);
        if (xhr.status === 200) {
            return JSON.parse(xhr.responseText);
        } else {
            // console.error('请求失败，状态码:', xhr.status);
            return null;
        }
    } catch (e) {
        // console.error('请求过程中出错:', e);
        return null;
    }
}
 // DOM元素
const elements = {
	htmlElement: document.documentElement,
	bodyElement: document.body
};
var baseURL='https://dashboard-server.hesuu.com'
// var baseURL='http://219.157.255.213:25505'
var city_data;
function addlist() {
	$('.citylist').liMarquee('destroy');
	let html = ""
	for (i = 0; i < city_data.length; i++) {
		html += `<li class="item" data-item='${JSON.stringify(city_data[i])}'>
			  <p>${city_data[i].brand}</p>
			  <p><span>${city_data[i].vin}</span></p>
			  <p><span>${city_data[i].model}</span> <span class="status">${city_data[i].status}</span></p>
			</li>`
	}
	$(".citylist #nav").html(html)
	$(".citylist").fadeIn()
	listsc()
}
function addlist1(data) {
	$('.citylist').liMarquee('destroy');
	let html = ""
	for (i = 0; i < data.length; i++) {
		html += `<li class="item" data-item='${JSON.stringify(data[i])}'>
			  <p>${data[i].brand}</p>
			  <p><span>${data[i].vin}</span></p>
			  <p><span>${data[i].model}</span> <span class="status">${data[i].status}</span></p>
			</li>`
	}
	$(".citylist #nav").append(html)
	listsc1()
}
$(".citylist").on('click', '.item', function() {
	var data = $(this).attr('data-item')
	data = JSON.parse(data)
	$('.item').removeClass('liactive')
	
	$(this).addClass('liactive')
	$(".cartitle").html(data.brand)
	var  langs = localStorage.getItem('lang') || 'en';
	if(data.img_url&&data.img_url!=''){
		$(".inner").html('<img src="'+data.img_url+'" alt="" />')
	}else{
		if(langs=='en'){$(".inner").html('<img src="../img/none2.jpg" alt="" />')}
		if(langs=='ru'){$(".inner").html('<img src="../img/none3.jpg" alt="" />')}
		if(langs=='ar'){$(".inner").html('<img src="../img/none4.jpg" alt="" />')}
		if(langs=='zh'){$(".inner").html('<img src="../img/none1.jpg" alt="" />')}
	}
	$(".vin").html(data.vin)
	$(".classify").html(data.location?data.location.name:'')
	$(".model").html(data.model)
	$(".destination").html(data.final_location!=null?data.final_location.name:'')
	$(".fbo_destination").html(data.fbo_destination)
	$(".departure_time").html(data.departure_time)
	$(".status").html(data.status)
	$(".arrival_time").html(data.arrival_time)
});
//初始化滚动
function listsc() {
	$('.citylist').liMarquee({
		direction: 'up',
		runshort: false,
		scrollamount: 20 ,//滚动速度
	});
	var $lis = $('.citylist li')
	var index =5; // 当前li的索引
	 var $currentLi = $lis.eq(index); // 获取当前索引的li元素
	 $currentLi.trigger('click'); // 模拟点击事件
	// setInterval(function() {
	// 	var $currentLi = $lis.eq(index); // 获取当前索引的li元素
	// 	$currentLi.trigger('click'); // 模拟点击事件
	//     index++; // 增加索引
	//     if (index >= $lis.length) { // 如果索引超出li的数量，重置为0
	//         index = 0;
	//     }
	// }, 2000); // 每2秒执行一次
	// $('.citylist li').off('click').on('click', function(){
	// 	$(this).addClass('liactive').siblings().removeClass('liactive');
	// }); 
	var timer = setInterval(function() {
		if(currentPage*50>count){
			
		}else{
			currentPage++
			Vehiclefn1(currentPage,localStorage.getItem("lang"))
		}
	}, 1000); // 每2秒执行一次
}
function listsc1() {
	$('.citylist').liMarquee({
		direction: 'up',
		runshort: false,
		scrollamount: 20 ,//滚动速度
	});
	var timer = setInterval(function() {
		if(currentPage*50>count){
			
		}else{
			currentPage++
			Vehiclefn1(currentPage,localStorage.getItem("lang"))
		}
	}, 1000); // 每2秒执行一次
}
var count;
var currentPage=1;
var statusnew='';

function Vehiclefn1(currentPage,lang){
	$.ajax({
		url:baseURL+'/Vehicle',
		type:'POST',
		data:{
			lang: lang,
			page: currentPage,
			pageSize: 50,
			status:statusnew
		},
		success: function(result){
			if(result.code==0){
				var data= result.data.list
				addlist1(data)
			}else{
				alert(result.message)
			}
		}
	});
}
function Vehiclefn(lang,status){
	statusnew = status
	$.ajax({
		url:baseURL+'/Vehicle',
		type:'POST',
		data:{
			lang: lang,
			page: currentPage,
			pageSize: 50,
			status:status
		},
		success: function(result){
			if(result.code==0){
				city_data= result.data.list
				count=result.data.count;
				var i=result.data.count;
				let arr = Array.from(String(i), Number);
				var v=''
				for(var n = 0; n < arr.length; n++) {
					v+='<span>'+arr[n]+'</span>'
				}
				$(".all").html(v)	
				$(".cartitle").html('')
				$(".inner").html('')
				$(".vin").html('')
				$(".classify").html('')
				$(".model").html('')
				$(".destination").html('')
				$(".fbo_destination").html('')
				$(".departure_time").html('')
				$(".status").html('')
				$(".arrival_time").html('')
				addlist()
			}else{
				alert(result.message)
			}
		}
	});
}
var myChart = echarts.init(document.getElementById('world'));
var lineDatas;
var shipListdatas;//运输中 船
var navigatedatas;//待发船
var production;//生产城市
function locationfn(lang,status){
	$.ajax({
		url:baseURL+'/location/production',
		type:'POST',
		async:false,
		data:{lang:lang,status:status},
		success: function(result){
			production = result.data
		}
	});
	$.ajax({
		url:baseURL+'/Vehicle/shipList',
		type:'POST',
		async:false,
		data:{lang:lang},
		success: function(result){
			navigatedatas = result.data.navigate
			shipListdatas = result.data.pending
			var navigatedatashtml=''
			var shipListdatashtml=''
			$.each(navigatedatas,function(){
				navigatedatashtml+=`<div class="shiptopcard" data-name="navigate" data-id="${this.id}">
					<p class="displayflex">${this.ship_name}  <span class="tag">${this.count}</span></p>
					<p>DEST: ${this.port}</p>
					<p>ETA:${this.last_time}</p>
				</div>`
			});
			$.each(shipListdatas,function(){
				shipListdatashtml+=`<div class="shiptopcard" data-name="shipList" data-id="${this.id}">
					<p class="displayflex">${this.ship_name}  <span class="tag">${this.count}</span></p>
					<p>DEST: ${this.port}</p>
					<p>ETA:${this.last_time}</p>
				</div>`
			});
			$(".shipListdatas").html(shipListdatashtml)
			$(".navigatedatas").html(navigatedatashtml)
			// console.log($('.centers').outerWidth())
			// console.log($(window).width())
			if($(window).width()<1650){
				if(navigatedatas.length>3||shipListdatas.length>3){
					$('.mores').show()
				}
			}else{
				if(navigatedatas.length>4||shipListdatas.length>4){
					$('.mores').show()
				}
			}
			
		}
	});
	$.ajax({
		url:baseURL+'/location',
		type:'POST',
		async:false,
		data:{lang:lang},
		success: function(result){
			lineDatas = result.data
			Global(chinaGeoCoordMap,nameMap,localStorage.getItem("lang"))
			if(result.code==0){
			}else{
				alert(result.message)
			}
		}
	});
}

// 状态按钮切换功能
document.querySelectorAll('.statusbtn > div').forEach(btn => {
	btn.addEventListener('click', function() {
		// 移除所有按钮的 active 类
		document.querySelectorAll('.statusbtn > div').forEach(b => b.classList.remove('active'));
		// 为当前点击的按钮添加 active 类
		this.classList.add('active');
		var status = $(this).attr('data-id')
		currentPage =1
		if(status=='all'){
			status = ''
		}
		var currentLang = localStorage.getItem('lang')|| 'en';
		Vehiclefn(currentLang,status)
		locationfn(currentLang,status)
		// console.log(status)
		// // 获取当前状态
		// const status = this.className.split(' ')[0]; // 获取按钮的类名（statusall, status1, status2 等）
	});
});			
const i18n = {
  currentLang: 'en', // 默认语言
  init: function() {
	  var that = this
    this.currentLang = localStorage.getItem('lang') || navigator.language.substr(0, 2) || 'en';
    this.loadLanguage(this.currentLang);
	if (this.currentLang === 'ar') {
		elements.htmlElement.lang = 'ar';
		elements.htmlElement.dir = 'rtl';
		elements.bodyElement.setAttribute('dir', 'rtl');
	} else {
		elements.htmlElement.lang = this.currentLang;
		elements.htmlElement.dir = 'ltr';
		elements.bodyElement.removeAttribute('dir');
	}
	Vehiclefn(this.currentLang,'')
	locationfn(this.currentLang,'')
	// var selectedText1 = localStorage.getItem('langtext')?localStorage.getItem('langtext'):'中文';
	// $(".select-selected").text(selectedText1);
	// 点击选项时更新选择
	$(".select-items div").click(function() {
		// 更新显示文本
		const selectedText = $(this).text();
		// $(".select-selected").text(selectedText);
		
		// 更新选中状态样式
		$(".select-items div").removeClass("same-as-selected");
		$(this).addClass("same-as-selected");
		
		// 隐藏选项框
		$(".select-selected").removeClass("select-arrow-active");
		$(".select-items").hide();
		
		// 显示当前选择
		localStorage.setItem('langtext', selectedText);
		that.toggleLanguage($(this).attr('data-id'))
		document.querySelectorAll('.statusbtn > div').forEach(b => b.classList.remove('active'));
		// 为当前点击的按钮添加 active 类
		$(".statusall").addClass('active');
		currentPage =1
		Vehiclefn($(this).attr('data-id'))
		locationfn($(this).attr('data-id'),'')
		
	});
 //    $('#langSwitch').click(() =>{
	// 	if(this.currentLang === 'en'){
	// 		$(".toggle2-button").removeClass('activebtn')
	// 	}else{
	// 		$(".toggle2-button").addClass('activebtn')
	// 	}
		
	// });
  },
  loadLanguage: function(lang) {
	 var data = loadJSONSync(`./js/lang/${lang}.json`);  
	$('[data-i18n]').each(function() {
	   const key = $(this).data('i18n');
	   $(this).text(data[key]); // 更新文本内容
	 });
	 localStorage.setItem('lang', lang);
  //   $.getJSON(`lang/${lang}.json`, (data) => {
		// console.log(data)
  //     $('[data-i18n]').each(function() {
  //       const key = $(this).data('i18n');
  //       $(this).text(data[key]); // 更新文本内容
  //     });
  //     localStorage.setItem('lang', lang);
  //   });
  },
  toggleLanguage: function(selectedText) {
	this.currentLang = selectedText;
    this.loadLanguage(this.currentLang);
	
	if (this.currentLang === 'ar') {
		elements.htmlElement.lang = 'ar';
		elements.htmlElement.dir = 'rtl';
		elements.bodyElement.setAttribute('dir', 'rtl');
	} else {
		elements.htmlElement.lang = this.currentLang;
		elements.htmlElement.dir = 'ltr';
		elements.bodyElement.removeAttribute('dir');
	}
	Global(chinaGeoCoordMap,nameMap,this.currentLang)
  }
};
$(document).ready(() => i18n.init());