<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-teachJob-edit" th:object="${teachJob}">
            <input id="jobId" name="jobId" th:field="*{jobId}"  type="hidden">
			<input name="classId"  type="hidden" id="classId" th:field="*{classId}"/>
			<div class="form-group">	
				<label class="col-sm-3 control-label">班级编号：</label>
				<div class="col-sm-8">
					<input id="className" th:field="*{className}" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">作业时间：</label>
				<div class="col-sm-8">
					<input id="datetime" name="datetime" th:field="*{datetime}" class="form-control" type="text"  readonly="true">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">阶段章节：</label>
				<div class="col-sm-8">
					<input  id="jobStage" name="jobStage" class="form-control" th:field="*{jobStage}" type="text" placeholder="填写格式如：u1-day01">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">作业内容：</label>
				<div class="col-sm-8">
					<input id="jobContent" name="jobContent" th:field="*{jobContent}" class="form-control" type="text">
				</div>
			</div>
			<div id="BadstudenUser">
				<h4 style="display: inline-block">非在读学员：</h4>
			</div>
			<hr/>
			<h4 style="padding: 0px;margin: 0px">在读学员作业</h4>
			<hr style="margin: 0px"/>
			<div id="studenUser">

			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "teach/teachJob";
		$("#form-teachJob-edit").validate({
			rules:{
                className:{
                    required:true,
                },
                datetime:{
                    required:true,
                },
                jobStage:{
                    required:true,
                }
			}
		});

        //时间选择器
        $(function(){
            laydate.render({
                elem: '#datetime',trigger: 'click'
            });
        });
		
		function submitHandler() {
	        if ($.validate.form()) {
	            //$.operate.save(prefix + "/edit", $('#form-teachJob-edit').serialize());
                edit();
	        }
	    }

        function edit() {
		    var jobId = $("#jobId").val();
            var classId = $("input[name='classId']").val();
            var datetime = $("#datetime").val();
            var jobContent = $("#jobContent").val();
            var jobStage = $("#jobStage").val();
            var children =[];
            var stuNunber = document.getElementsByClassName("stuChildren");
            var stuSelectId = document.getElementsByClassName("selectId");
            var stuIdList = document.getElementsByClassName("stuIdList");
            for(var i=0;i<stuNunber.length;i++){
                var NameId = stuNunber[i].value;
                var index=stuSelectId[i].selectedIndex ;
                var SelectId= stuSelectId[i].options[index].value;
                var idList =stuIdList[i].value;
                children.push({studentId:NameId,stuSelectId:SelectId,id:idList});
            }
            var aaaa = JSON.stringify(children)
            var data = {
                jobId: jobId,
                classId: classId,
                datetime: datetime,
                jobContent: jobContent,
                jobStage:jobStage,
                aaaa: aaaa
            }
            $.ajax({
                cache : true,
                type : "POST",
                url : prefix + "/edit",
                data : data,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.operate.successCallback(data);
                }
            })
		}

        var myajax = $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "teach/teachStudentJob/list",
            data: {"jobId": $("#jobId").val()},
            success : function(data) {
                var dataRow =data.rows;
                console.log(dataRow)
                for(var i=0;i<dataRow.length;i++){
                    var stu="<div class=\"col-sm-3 text-center\" style=u\"margin-top: 20px\">\n" +
                        "\t\t\t\t\t<input class=\"stuChildren\" type=\"hidden\"value='"+dataRow[i].studentId+"' />\n" +
                        "\t\t\t\t\t<input class=\"stuIdList\" type=\"hidden\"value='"+dataRow[i].id+"'  />\n" +
                        "\t\t\t\t\t<input class=\"stuChildrenList\" type=\"hidden\"value='"+dataRow[i].jobResult+"'  />\n" +
                        "\t\t\t\t\t<span style='width: 55%;display: inline-block'>"+dataRow[i].studentName+"</span>&nbsp;&nbsp;&nbsp;\n" +
                        "\t\t\t\t\t<select class='selectId' style=\"display: inline-block\">\n" +
                        "\t\t\t\t\t\t<option value='1'>作业优</option>\n" +
                        "\t\t\t\t\t\t<option value='2'>作业良好</option>\n" +
                        "\t\t\t\t\t\t<option value='3'>作业差</option>\n" +
                        "\t\t\t\t\t\t<option value='4'>未交</option>\n" +
                        "\t\t\t\t\t</select>\n" +
                        "\t\t\t\t</div>"
                    $("#studenUser").append(stu);
                }
            }
        })
        $.when(myajax).done(function () {
            //要执行的操作
            var stuChildrenList = document.getElementsByClassName("stuChildrenList");
            for(var i=0;i<$(".selectId").length;i++){
                for(var j=0;j<$(".selectId").eq(i).children().length;j++){
                    if($(".selectId").eq(i).children().eq(j).val()==stuChildrenList[i].value){
                        $(".selectId").eq(i).children().eq(j).attr("selected",true);
                    }
                }
            }
        });

        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "teach/student/classOtherStudents",
            data: {"classNo": $("input[name='classId']").val()},
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                var dataRow = data.rows;
                $("#BadstudenUser>span").remove();
                for(var i=0;i<dataRow.length;i++){
                    var datas="<span style='width: 80px;display: inline-block;text-align: center;height:30px;line-height:30px;margin-left: 15px;border-radius: 20px;font-size: 14px;color: #ffffff;background-color: #0d8ddb'>"+dataRow[i].studentName+"</span>";
                    $("#BadstudenUser").append(datas)
                }
                if(dataRow.length==0){
                    $("#BadstudenUser").append("<span>无</span>");
                }
            }
        })
	</script>
</body>
</html>
