// 封装ajax
function ajax(list) {
	if (XMLHttpRequest) {
		var req = new XMLHttpRequest();
	} else {
		var req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	var type = list.type || 'get';
	var data = list.data || '';
	var isAysnch = list.isAysnch || true;
	if (type == 'get') {
		req.open(type, list.url + "?" + data, isAysnch);
		req.send(null);
	} else {
		// console.log(req)
		// req.responseType = 'json'
		req.open(type, list.url, isAysnch);
		req.send(data);
	}
	req.onload = function () {
		var d = req.responseText;
		list.success(d);
	}
}

var curNav = ''
var curVrKey = ''
var swiperVrImg = ''
var navList = []

function getVr (str, bc) {
	var formData2 = new FormData();
	formData2.append("area_type", curNav);
	ajax({
		type:'post',
		url:'https://api.honglouplus.com/api/estate/area/vr',
		data: formData2,
		success:function(vs){
			var res2 = JSON.parse(vs)
			const data2 = res2.data
			var cHtml2 = ''
			
			curVrKey = data2[0].vr_key

			data2.forEach(function (item) {
				if (item.vr_key === curVrKey) {
					cHtml2 += '<div class="vm-op swiper-slide cur" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
				} else {
					cHtml2 += '<div class="vm-op swiper-slide" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
				}
				
			})
			document.getElementById('vr-content').innerHTML = cHtml2


			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
			document.getElementById('fullVr').setAttribute('src', vrUrl)

			if (str && str === 'bc') {
				bc()
			} 
			
		}
	})
}


function dealNavCur () {
	var tt = document.getElementsByClassName("vn-op");
	for (i = 0; i < tt.length; i++) {
		var ul = document.querySelectorAll('.vn-op')[i]
		var curClass = ul.getAttribute('class').replace('cur', '')
		if (ul.getAttribute('t') === curNav) curClass += ' cur'
		ul.setAttribute('class', curClass)
	}
}
function dealUrlCur () {
	var tt2 = document.getElementsByClassName("vm-op");
	for (i = 0; i < tt2.length; i++) {
		var ul2 = document.querySelectorAll('.vm-op')[i]
		var curClass2 = ul2.getAttribute('class').replace('cur', '')
		if (ul2.getAttribute('t') === curVrKey) curClass2 += ' cur'
		ul2.setAttribute('class', curClass2)
	}
}

function dealVrUrl () {

	swiperVrImg = new Swiper(".vr-main", {
		loop: true,
		speed: 1000,
		slidesPerView: 7,
		spaceBetween: 30,
		centeredSlides : true,
		watchSlidesProgress : true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});


	var tt = document.getElementsByClassName("vm-op");
	for (i = 0; i < tt.length; i++) {
		var ul = document.querySelectorAll('.vm-op')[i]
		handler = function(event){
			var e = event || window.event;
			var target = e.target || e.srcElement;
			curVrKey = target.getAttribute('t') || ''
			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
			document.getElementById('fullVr').setAttribute('src', vrUrl)
			dealUrlCur()
		};
		if (window.addEventListener){
			ul.addEventListener("click",handler,false)
		}
		else if (window.attachEvent){
			ul.attachEvent("onclick",handler)
		}
	}
	
}



var formData = new FormData();
formData.append("dict_type", 'area_type');
ajax({
	type:'post',
	url:'https://api.honglouplus.com/api/dict/info',
	data: formData,
	success:function(msg){
		var res = JSON.parse(msg)
        const data = res.data
		navList = data.area_type || []
		curNav = navList[0].dict_value
		var cHtml = ''
		navList.forEach(function (item) {
			if (item.dict_label === '宜春' || item.dict_label === '安义县') return
			if (item.dict_value === curNav) {
				cHtml += '<div class="swiper-slide vn-op cur" t=' + item.dict_value + '>' + item.dict_label + '</div>'
			} else {
				cHtml += '<div class="swiper-slide vn-op" t=' + item.dict_value + '>' + item.dict_label + '</div>'
			}
		})
		document.getElementById('vr-nav').innerHTML = cHtml


		// console.log(document.getElementsByClassName('vn-op'))


		var tt = document.getElementsByClassName("vn-op");
		for (i = 0; i < tt.length; i++) {
			var ul = document.querySelectorAll('.vn-op')[i]
			handler = function(event){
				var e = event || window.event;
				var target = e.target || e.srcElement;
				curNav = target.getAttribute('t')
				getVr('bc', function () {
					// swiperVrImg.updateSlides()


					dealVrUrl()
				})
				dealNavCur()



			};
			if (window.addEventListener){
				ul.addEventListener("click",handler,false)
			}
			else if (window.attachEvent){
				ul.attachEvent("onclick",handler)
			}
		}



		getVr('bc', function () {


			dealVrUrl()


		})




		// 







		

        var swiper = new Swiper(".mySwiper", {
			loop: true,
			speed: 1000,
			slidesPerView: 8,
			spaceBetween: 10,
			// on:{
			// 	click: function(){
			// 	  alert('你点了Swiper');
			// 	},
			// },
		  });


		 





		
	}
})