<% if (!pjax) { %>
<% this.title='编辑比赛' %>
<% let panguMode='disabled' %>
<%- include('head') %>
<% } %>

<textarea id="titleVal" style="display:none;">编辑比赛</textarea>
<style>
	input[type=text] {
		width: 100%;
		vertical-align: top;
		font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
		margin: 0;
		outline: 0;
		-webkit-appearance: none;
		tap-highlight-color: rgba(255,255,255,0);
		line-height: 1.21428571em;
		padding: .67857143em 1em;
		font-size: 1em;
		background: #fff;
		color: rgba(0,0,0,.87);
		border: 1px solid rgba(34,36,38,.15);
		border-radius: .28571429rem;
		-webkit-box-shadow: 0 0 0 0 transparent inset;
		box-shadow: 0 0 0 0 transparent inset;
		-webkit-transition: color .1s ease,border-color .1s ease;
		transition: color .1s ease,border-color .1s ease;
}
.p-black {
	font-weight: bold;
	color: rgb(0, 0, 0) !important;
}
.p-gray {
	font-weight: bold;
	color: rgb(128, 128, 128) !important
}
.p-blue {
	font-weight: bold;
	color: rgb(52, 152, 219) !important;
}
.p-teal {
	font-weight: bold;
	color: rgb(3, 168, 158) !important;
}
.p-cyan {
	font-weight: bold;
	color: #81D4FA !important;
}
.p-pink {
	font-weight: bold;
	color: #F06292 !important;
}
.p-orange {
	font-weight: bold;
	color: rgb(243, 156, 17) !important;
}
.p-red {
	font-weight: bold;
	color: rgb(254, 76, 97) !important;
}
.p-purple {
	font-weight: bold;
	color: rgb(157, 61, 207) !important;
}
</style>

<div class="ui segment">
<div class="ui form">
	<div class="ui inline fields">
		<div class="four wide field">
			<label>年段</label>
			<div class="ui selection dropdown">
				<input type="hidden" id="grade" value="<%= contest.grade %>">
				<i class="dropdown icon"></i>
				<div class="default text">. . .</div>
				<div class="menu">
					<div class="item" data-value="0"><span class="p-purple">教工</span></div>
					<div class="item" data-value="1"><span class="p-red">高一</span></div>
					<div class="item" data-value="2"><span class="p-orange">高二</span></div>
					<div class="item" data-value="3"><span class="p-blue">高三</span></div>
				</div>
			</div>
		</div>
		<div class="four wide field">
			<label>组别</label>
			<div class="ui selection dropdown">
				<input type="hidden" id="type" value="<%= contest.type %>">
				<i class="dropdown icon"></i>
				<div class="default text">. . .</div>
				<div class="menu">
					<div class="item" data-value="stu_male"><span class="p-purple">学生男子组</span></div>
					<div class="item" data-value="stu_female"><span class="p-pink">学生女子组</span></div>
					<div class="item" data-value="stu_union"><span class="p-teal">学生集体组</span></div>
					<div class="item" data-value="teach_1"><span class="p-blue">教工甲组</span></div>
					<div class="item" data-value="teach_2"><span class="p-cyan">教工乙组</span></div>
					<div class="item" data-value="teach_3"><span class="p-red">教工丙组</span></div>
					<div class="item" data-value="teach_union"><span class="p-orange">教工集体组</span></div>
				</div>
			</div>
		</div>
		<div class="seven wide field">
			<label>名称</label>
			<input type="text" id="title" value="<%= contest.title %>">
		</div>
		<div class="five wide field">
			<label>时间</label>
			<input type="text" id="time"
				value="<%= web_util.formatDate(contest.time) %>">
		</div>
	</div>
	<div class="ui segment">
		<div class="ui two column very relaxed grid">
			<div class="column">
				<label>比赛排名（格式：从高到低:班级 姓名 详情 备注一行一个）</label>
				<textarea style="min-height: 500px; font-size: 17px;" cols="8" type="text" id="ranking"></textarea>
			</div>
			<div class="column">
				<table class="ui very basic center aligned unstackable table">
					<thead>
						<tr>
							<th>#</th>
							<th>班级</th>
							<th>选手</th>
							<th>得分</th>
							<th>备注</th>
						</tr>
					</thead>
					<tbody id="rankingContent"></tbody>
				</table>
			</div>
		</div>
		<div class="ui vertical divider"><span class="req">预览</span></div>
		
	</div>
</div>
</div>
<div style="text-align: center; ">
	<button id="submit_contest" class="ui pink submit button">发布比赛</button>

</div>
</div>

<script>
$(function () {
	$('.ui.dropdown:not(.simple)').dropdown();
	$('.ui.accordion').accordion();
})
function renderRanking(data) {
	$('#rankingContent').empty();
	let arr = data.split('\n').filter(x => x).map(x => x.split(' ').filter(x => x));
	let rk = 0;
	for (let i = 0; i < arr.length; ++i) {
		if (rk == 0 || arr[i][2] != arr[i - 1][2]) ++rk;
		let str = '';
		str += '<tr><td>';
		if (rk == 1)
			str += `<div class="ui yellow ribbon label">${rk}</div></td>`;
		else if (rk == 2)
			str += `<div class="ui ribbon label">${rk}</div></td>`;
		else if (rk == 3)
			str += `<div class="ui brown ribbon label" style="background-color: #C47222 !important;">${rk}</div></td>`;
		else
			str += `${rk}</td>`;
		for (let j = 0; j < arr[i].length; ++j) {
			if (j == 0) arr[i][j] = transClass(arr[i][j]);
			str += `<td>${arr[i][j]}</td>`;
		}
		str += '</tr>';
		$('#rankingContent').append(str);
	}
}
$('#ranking').bind('input propertychange change', function () {
	renderRanking($(this).val())
});
function show_error(error) {
	swal({
		title: "修改失败。",
		icon: "error",
		text: error
	});
}
function success(session_id) {
	swal({
		title: "修改成功！",
		icon: "success"
	}).then(function () {
		window.location.href = location.protocol + '//' + location.host + <%- serializejs(`/sport/season/${contest.season}`) %>;
	});
}
$('#submit_contest').click(function () {
	$('#submit_contest').addClass('loading');
	$.ajax({
		url: `/sport/season/<%= contest.season %>/contest/${getContestId()}/edit`,
		type: 'POST',
		data: {
			"id": <%= contest.id %>,
			"grade": $(`#grade`).val(),
			"type": $(`#type`).val(),
			"title": $(`#title`).val(),
			"time": $(`#time`).val(),
			"ranking": $(`#ranking`).val(),
			"rankId": <%= contest.rankId %>,
			"season": <%= contest.season %>
		},
		async: true,
		success: function(data) {
			error_code = data.error_code;
			switch (error_code) {
				case 3001:
					show_error("没有权限。");
					break;
				case 3002:
					show_error("赛季不存在。");
					break;
				case 3003:
					show_error("标题无效。");
					break;
				case 1:
					success(data.session_id);
					return;
				default:
					show_error(data.detail);
					break;
			}
			$("#submit_contest").text("发布比赛");
			$("#submit_contest").removeClass("loading");

		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			show_error("XHR 错误: " + XMLHttpRequest.responseText);
			$("#submit_contest").text("发布比赛");
			$("#submit_contest").removeClass("loading");
		}
	});
});

<% if (contest.rankId != -1) { %>
fetch("<%= web_util.makeUrl(['season', contest.season, 'ranking', contest.rankId]) %>")
	.then(response => response.json())
	.then(data => {
		console.log(data)
		$('#ranking').text(data.data);
		renderRanking(data.data);
	});
<% } %>
</script>

<% if (!pjax) { %>
<%- include("foot") %>
<% } %>