let $box = $("#figureBox"),
	people = 0;
let me = {
	$id: null,
	row: Math.floor(Math.random() * 3),
	col: Math.floor(Math.random() * 15),
	num: 0,

}
var arr = [
	[],
	[],
	[]
];
var ans = [10, 200, 100];
// 开始答题
let $go = $("#go"),
	$countDown = $("#countDown"),
	$ques = $("#ques"),
	$trap = $("#trapID"),
	$num = $("#num"),
	$renBox = $("#renBox");
let quesData, quesLen, quesFlag = 0,
	quesHtml, quesTimer, quesInter, quesCount = 2;
$.get("./question.json", function(res) {
	quesData = res.ques;
	quesLen = quesData.length;
});

// 答题
var $fail = $("#fail"),
	$success = $("#success"),
	$endBox = $("#endBox");

var nowAns = -1;
var baseUrl="http://47.108.130.28:9000";
var ansPostUrl=baseUrl+"/api/quepass/ansPost";
var wsCountUrl=baseUrl+"/ws/quepass/onlinecounter";
function init() {
	for (var i = 0; i < 3; i++) {
		figureInit(ans[i], i);
	}
	me.$id=$("#ren"+me.num);
	let timer = setTimeout(function() {
		clearTimeout(timer);
		for (let i = 0; i < 3; i++) {
			var l = arr[i].length;
			for (let j = 0; j < l; j++) {
				var delay = arr[i][j].col * 100 + "ms";
				getIn(arr[i][j], delay);
			}
		}
	}, 100);

	setTimeout(startQues, 3000);
}

function getIn(obj, delay) {
	if (obj.$id) {
		var $ren = obj.$id;
	} else {
		var $ren = $("#ren" + obj.num);
		obj.$id = $ren;
	}

	$ren[0].className = obj.figure + " d" + obj.row + "-" + obj.col;
	$ren.attr("style", "");
	if (delay) {
		$ren.css("transition-delay", delay);
	}
}

function figureInit(num, flag) {
	let html = "",
		figure = "";
	if (num > 36) num = 36;
	for (let i = 0; i < num; i++) {
		var left = Math.floor(Math.random() * 140) - 20 + "vw";
		figure = "figure f" + Math.floor(Math.random() * 20 + 1);
		html += `<div class="${figure}" id="ren${people+i}" style="left:${left}"></div>`;
		arr[flag].push({
			row: flag,
			col: i,
			figure,
			num: people + i
		});
		if (flag == me.row && i == me.col) {
			me.figure = figure + ` me`;
			me.num = people + i;
			arr[flag][i].figure+=" me";
		}
	}
	people += num;
	$box.append(html);
}

/* function answer(a1, a2, a3) {
	if(a1>36) a1=36;
	if(a2>36) a2=36;
	a3=a3>36?36:a3;
	arr[1] = Array(a1);
	arr[2] = Array(a2);
	arr[3]= Array(a3);
	getAnswer(a1, arr[1], 0);
	getAnswer(a2, arr[2], 1);
	getAnswer(a3, arr[3], 2);
	peopleArr = peopleArr.concat(arr[1], arr[2], arr[3]);
}

function getAnswer(num, arr, flag) {
	var rand = 0,
		$f, delay;
	for (var i = 0; i < num; i++) {
		if (flag == me.row && i == me.col) {
			console.log(flag, i);
			continue;
		}
		rand = Math.floor(Math.random() * peopleArr.length);
		arr[i] = peopleArr.splice(rand, 1)[0];
		$f = arr[i].$ren;
		$f[0].className = arr[i].className + " row"+flag+" d" + flag + "-" + i;
		delay = Math.floor(Math.random() * 3000) + "ms";
		$f.css("transition-delay", delay)
	}
	if (flag == me.row) {
		arr.splice(me.col, 1);
	}
} */

$("#ansBox").on("click", ".ans", function() {
	if (quesCount >= 0 && quesCount <= 15) {
		var $this = $(this);
		var dataId = $this.attr("data-id");
		if (dataId != nowAns) {
			$this.addClass("active").siblings().removeClass("active");
			choiseAnswer(Number(dataId),nowAns);
			nowAns = dataId;
		}
	}
});

function choiseAnswer(flag,prevAns) {
	/* $.post(ansPostUrl,JSON.stringify({
		qno:(quesFlag+1),
		ans:flag,
		iscorrect:quesData[quesFlag].right==ansArr[flag]
	})); */
	var rand = Math.floor(Math.random() * 15);
	 rand=arr[flag].length>36?rand:arr[flag].length-1;
	var prevR = me.row,
		prevC = me.col;
		console.log(prevR,prevC);
		console.log(flag,rand);
	var len = Math.floor((arr[flag].length - rand) / 3)+1;
	for (var i = len - 1; i >= 0; i--) {
		var col = rand + 3 * i;
		if (i == 0) {
			getTemp(arr[flag][col], me);
			me={};
			$.extend(true,me,arr[flag][col]);
			console.log(me);
		} 
		if (i == len - 1) {
			if(arr[prevAns].length>36){
				getTemp(arr[prevR][prevC], arr[flag][col]);
			}
		} 
		if(i>0 && i<len - 1){
			getTemp(arr[flag][col], arr[flag][col - 3]);
		}
			
	
	}

}

function getTemp(obj1, obj2) {
	obj1.$id = obj2.$id;
	obj1.figure = obj2.figure;
	obj1.num = obj2.num;
	getIn(obj1);
}

function resetGame() {
	nowAns = me.row;
	quesCount = 2;
	$countDown.html(quesCount);
	$trap.html("").hide();
	ansArr = ["A", "B", "C"];
}

function startQues() {
	if (me.$id.hasClass("err")) {
		fail();
		return false;
	}
	resetGame();
	if (quesLen != 0 && quesFlag < quesLen) {
		$num.html(quesFlag + 1);
		var ques = quesData[quesFlag];
		quesHtml = ques.text;
		if (ques.img) {
			quesHtml += `<br/><img src="img/${ques.img}"/>`;
		}
		$ques.html(quesHtml);
		$go.fadeIn(function() {
			$renBox.fadeIn();
		});

		quesInter = setInterval(function() {
			if (quesCount == 1) {
				clearInterval(quesInter);
				$go.fadeOut();
				quesFlag++;
				$renBox.fadeOut();
				var tt = setTimeout(function() {
					nextGame(ques);
					clearTimeout(tt);
				}, 2000);
			}
			quesCount--;
			$countDown.html(quesCount);
		}, 10000000);
	} else {
		clearTimeout(quesTimer);
		success();
	}
}

function fail() {
	$endBox.remove($success).fadeIn(function() {
		$fail.show();
	})
}

function success() {
	$endBox.remove($fail).fadeIn(function() {
		$success.show();
	})
}

function nextGame(ques) {
	var trapHtml = "";
	for (var i in ansArr) {
		if (ansArr[i] == ques.right) {
			peopleArr = arr[i];
		} else {
			var rand = Math.floor(Math.random() * 4) + 1;
			trapHtml += `<div class="trap trap${rand} r${i}"></div>`;
			$(".row" + i).attr("style", "").addClass("err");
		}
	}
	$trap.html(trapHtml).show();
	quesTimer = setTimeout(startQues, 2000);
}
function getAnswer(){
	// var peopleArr=
}
// ws
/* var ws = new WebSocket("ws://47.108.130.28:9000/ws/quepass/onlinewaiting");
ws.onopen = function() {
	console.log("open");
}
ws.onmessage = function(e) {
	console.log(JSON.parse(e.data));
}
ws.onclose = function(e) {
	console.log(e);
}
var ws1 = new WebSocket("ws://47.108.130.28:9000/ws/quepass/onlinecounter");
ws1.onopen = function() {
	console.log("open1");
}
ws1.onmessage = function(e) {
	console.log(JSON.parse(e.data));
}
ws1.onclose = function(e) {
	console.log(e);
} */


init();