<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>评卷分组修改</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/head.jsp" %>
   <link rel="stylesheet" href="${ctxStatic}/common/animate.min.css" />
	<style>
		#delete-modal{
            position:fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            z-index:500;
            display:none;
            background:rgba(0,0,0,.3);
        }
        #deleteDiv {
            position:absolute;
            left:50%;
            top:50%;
            transform:translateX(-50%) translateY(-50%);
        }
        .my-form {
            padding: 0 20px;
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            background: #fff;
            border-radius: 4px;
            width: 384px;
            border: 1px solid #ddd;
        }
        .my-form .my-form-head {
            padding: 15px 0 10px;
            position: relative;
        }
        .my-form .my-form-head .close-icon {
            position: absolute;
            right: -10px;
            top: 14px;
            width: 24px;
            cursor: pointer;
        }
        .my-form .my-form-head .title-box {
            padding-right: 30px;
            display: flex;
            align-items: center;
        }
        .my-form .my-form-head .title-box .title {
            font-size: 16px;
            font-weight: bold;
            margin-left: 6px;
            color:#595959;
        }
        .my-form .my-form-head .title-box .warning-icon {
            width: 24px;
        }
        .my-form .sub-title {
            color: #595959;
            line-height: 22px;
            font-size: 14px;
            padding-left: 30px;
        }
        .my-form .sub-title span {
            color: #F53F3F;
        }
        .my-form .my-form-body {
            padding: 20px 0;
        }
        .my-form .my-form-body .gray-bg {
            background: #F0F0F0;
            border-radius: 4px;
            padding: 30px 20px 20px;
        }
        .my-form-item {
            display: flex;
            align-items: flex-start;
        }
        .my-form-item label {
            font-size: 14px;
            color: #595959;
            width: 120px;
            line-height: 30px;
        }
        .my-form-item .control-box {
            flex: 1;
        }
        .my-form-item .control-box .error-tip {
            height: 24px;
            line-height: 20px;
            font-size: 12px;
            color: #F53F3F;
        }
        .my-form-foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0 15px 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var pictureConfig = '${pictureConfig}';
            window.localStorage.setItem("pictureConfig", pictureConfig);
            $("#number").focus();
            $("#inputForm").validate({
                submitHandler: function (form) {
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            var openDouble = "${group.doubleRate}";
            if (openDouble != null && openDouble > 0) {
                $("#openDouble").prop("checked", true);
                $(".doubleDiv").show();
            } else {
                $("#doubleRate").attr("value", "");
                $("#thirdPolicy").attr("value", "");
                $("#arbitrateThreshold").attr("value", "");
                $(".doubleDiv").hide();
            }

            $("#openDouble").change(function () {
                if ($("#openDouble").is(':checked')) {
                    $(".doubleDiv").show();
                } else {
                    $("#doubleRate").attr("value", "");
                    $("#thirdPolicy").attr("value", "");
                    $("#arbitrateThreshold").attr("value", "");
                    $(".doubleDiv").hide();
                }
            });
            
            $("#btnNext").click(function () {
            	var check_list = []
            	$("input[name='questionIds']:checked").each(function(){
	            	if($(this).val()!=""){
	            		check_list.push($(this).val())
            		}
            	})
                if(check_list.length==0) {
                    alert('请选择题目');
                    return false;
                }
            	$("#nextDiv").show();
            	$("#nextLi").attr("class","active");
            	$("#preDiv").hide();
            	$("#preLi").attr("class","");
            	
            });
			$("#btnPre").click(function () {
            	$("#nextDiv").hide();
            	$("#nextLi").attr("class","");
				$("#preDiv").show();
				$("#preLi").attr("class","active");
            });
        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"  id="preLi"><a>勾选试题分组</a></li>
    <li id="nextLi"><a>分组参数设置</a></li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="group" action="${ctx}/admin/exam/group/update" method="post"
           class="form-horizontal">
    <tags:message content="${message}"/>
    <form:hidden path="subjectCode"/>
    <input type="hidden" id="rest" name="reset" value="true"/>
    <input type="hidden" id="number" name="number" value="${group.number }"/>
<div id="preDiv">
	<div>
        <table id="contentTable" class="table table-striped table-bordered table-condensed">
			<caption><h4>${subject.code }-${subject.name } 主观题<fmt:formatNumber pattern="###.###" value="${subject.subjectiveScore }"/>分</h4></caption>
        	<thead>
        	<tr>
       			 <th>大题号</th>
        		 <th>小题号</th>
        		 <th>名称</th>
        		 <th>分数</th>
        		 <th>是否选做题</th>
        		 <th>选做题分组</th>
				 <th>选做题区</th>
        		 <th></th>
			</tr>
        	</thead>
			<c:forEach items="${questionList}" var="item">
		    <tr>
		    <td>${item.mainNumber }</td>
		    <td>${item.subNumber }</td>
			<td>${item.mainTitle }</td>
			<td><fmt:formatNumber pattern="###.###" value="${item.totalScore}"/></td>
			<td><c:if test="${item.selective }">选做题</c:if></td>
			<td>${item.selectiveIndex}</td>
			<td>${item.selectiveIndex}-${item.selectivePart}</td>
			<td><input type="checkbox" name="questionIds" value="${item.id }" <c:if test="${item.groupNumber!=null && item.groupNumber!=group.number}"> disabled="disabled"</c:if> <c:if test="${item.groupNumber==group.number}"> checked</c:if>></td>
			</tr>
			</c:forEach>
		</table>
    </div>
    <div class="pull-right">
        <a href="${ctx}/admin/exam/group?subjectCode=${group.subjectCode}" class="btn">取&nbsp;消</a>&nbsp;&nbsp;
        <a id="btnNext" href="##" class="btn btn-primary">下一步 </a>
    </div>
</div>
<div id="nextDiv" class ="hide">
    <div class="control-group">
        <label class="control-label">分组序号</label>
        <div class="controls">
            <form:input path="number" htmlEscape="false" class="required" readonly="true"/>
        </div>
    </div>
   <%--  <c:if test="${group.status.value==1}">
        <div class="control-group">
            <label class="control-label">试评数量</label>
            <div class="controls">
                <form:input path="trialCount" htmlEscape="false" min="1" class="required digits" type="number"/>
            </div>
        </div>
    </c:if> --%>
    <c:if test="${exam.type!='MULTI_MEDIA' && exam.markMode!='TRACK'}">
    <div class="control-group">
        <label class="control-label">评卷模式</label>
        <div class="controls">
            <select name="markMode">
                <option value="">不限</option>
                <c:forEach items="${markModeList}" var="item">
                    <option value="${item}"
                            <c:if test="${group.markMode!=null && group.markMode==item}">selected</c:if>>${item.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    </c:if>
    <c:if test="${exam.type!='MULTI_MEDIA'}">
        <div class="control-group">
            <label class="control-label">图片显示</label>
            <div class="controls">
                <a href="${ctx}/admin/exam/group/getPictureConfig?subjectCode=${group.subjectCode}&number=${group.number}"
                   target="_blank" class="required" id="configuration" rel="opener">设置</a>
            </div>
        </div>
    </c:if>
    <form:input path="picList" class="required" id="picList" type="hidden"/>
    <div class="control-group">
        <label class="control-label">双评</label>
        <div class="controls">
            <input type="checkbox" id="openDouble">开启
        </div>
    </div>
    <div class="doubleDiv">
        <div class="control-group">
            <label class="control-label">双评比例</label>
            <div class="controls">
                <form:input path="doubleRate" htmlEscape="false" maxlength="100" class="required" type="number"
                            id="doubleRate"/>*比例范围为0-1
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">仲裁阀值</label>
            <div class="controls">
                <form:input path="arbitrateThreshold" htmlEscape="false" maxlength="100" class="required" type="number"
                            id="arbitrateThreshold"/>*阈值为分数且大于等于0
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">合分策略</label>
            <div class="controls">
                <select name="scorePolicy">
                    <c:forEach items="${scorePolicyList}" var="item">
                        <option value="${item.value}"
                                <c:if test="${item.value==group.scorePolicy.value}">selected</c:if> >${item.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">三评规则</label>
            <div class="controls">
                <select name="thirdPolicy">
                    <c:forEach items="${thirdPolicyList}" var="item">
                        <option value="${item.value}"
                                <c:if test="${item.value==group.thirdPolicy.value}">selected</c:if> >${item.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    </div>
    <c:if test="${exam.type!='MULTI_MEDIA'}">
    	<c:if test="${exam.sheetView}">
        <div class="control-group">
	        <label class="control-label">原卷显示</label>
	        <div class="controls">
	        <input name="sheetView" type="checkbox" <c:if test="${group.sheetView}">checked</c:if>/>
	        </div>
        </div>
		</c:if>
    </c:if>
        <div class="control-group">
            <label class="control-label">启用全零分</label>
            <div class="controls">
                <input name="enableAllZero" type="checkbox" value="1" <c:if test="${group.enableAllZero}">checked</c:if>/>
            </div>
        </div>
    <div class="control-group">
        <label class="control-label">重要提示</label>
        <div class="controls">
            <span class="label label-important"><h5>保存后分组关联所有评卷任务都将删除，并生成新的分组任务</h5></span>
        </div>
    </div>
    <div class="form-actions">
        <a id="btnSubmit" href="##" class="btn btn-primary">保 存</a>&nbsp;
        <c:if test="${fnx:hasPrivilegeCode(role_privilege_codes, 'exam_mark-group-delete')}">
        <a href="#" class="delete-button btn btn-danger">删除</a>&nbsp;
        </c:if>
        <a id="btnPre" class="btn">上一步</a>
    </div>
</div>
</form:form>
<div id="delete-modal">
	<div id="deleteDiv" class="my-form form-horizontal">
        <div class="my-form-head">
            <div class="title-box">
                <img src="${ctxStatic}/images/dialog_warning_icon.png" class="warning-icon" />
                <span class="title"></span>
            </div>
            <img src="${ctxStatic}/images/dialog_close_icon.png" class="close-icon" onclick="deleteDivHide()"/>
        </div>
        <div class="sub-title sub-title1">
            该操作分组将会<span>清掉已完成</span>的评卷任务及评卷员信息，确认吗？
        </div>
        <div class="sub-title sub-title2">
            确认删除或重置，请联系大区经理获取授权码
        </div>
        <div class="my-form-body">
            <div class="gray-bg">
                <div class="my-form-item subjectCode">
                    <label>输入科目代码</label>
                    <div class="control-box">
                        <input type="text" id="subjectCode">
                        <div class="error-tip"></div>
                    </div>
                </div>
                <div class="my-form-item groupNumber">
                    <label>输入分组序号</label>
                    <div class="control-box">
                        <input type="text" id="groupNumber">
                        <div class="error-tip"></div>
                    </div>
                </div>
                <div class="my-form-item authCode">
                    <label>输入授权码</label>
                    <div class="control-box">
                        <input type="text" id="authCode">
                        <div class="error-tip"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="my-form-foot">
            <button class="btn btn-primary" onclick="dialogObj.validate()">确认</button>
            <button class="btn btn-default" onclick="deleteDivHide()">取消</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#btnSubmit').click(function () {
    	if($("#arbitrateThreshold").val()<0){
    		alert("仲裁阈值不能小于0");
    		return;
    	}
    	var check_list = []
    	$("input[name='questionIds']:checked").each(function(){
        	if($(this).val()!=""){
        		check_list.push($(this).val())
    		}
    	})
        if(check_list.length==0) {
            alert('请选择题目');
            return false;
        }
    	var deleteCheck = '${deleteCheck}';
    	if(deleteCheck=='false'){
    		deleteDivHide();
    		$("#inputForm").attr("action","${ctx}/admin/exam/group/update");
    		$("#inputForm").submit();
    		return;
    	}
    	var subjectCode = '${group.subjectCode}';
    	var groupNumber = '${group.number}';
    	var progress = '${group.percent}';
    	dialogObj = createDialog();
        dialogObj.initDialog({ progress: progress, subjectCode: subjectCode, groupNumber: groupNumber }, function (initParams,deleteCode) { 
	        //这个回调方法里写进度小余10%的业务分支
	        deleteDivHide();
        	if(deleteCode!=null && deleteCode!=''){
        		$("#inputForm").attr("action","${ctx}/admin/exam/group/update?deleteCode="+deleteCode);
        		$("#inputForm").submit();
        	}else{
        		$("#inputForm").attr("action","${ctx}/admin/exam/group/update");
        		$("#inputForm").submit();
        	}
    	}) 
    });

    $('.delete-button').click(function () {
    	var deleteCheck = '${deleteCheck}';
    	if(deleteCheck=='false'){
    		deleteDivHide();
    		$("#inputForm").attr("action","${ctx}/admin/exam/group/delete");
    		$("#inputForm").submit();
    		return;
    	}
    	var subjectCode = '${group.subjectCode}';
    	var groupNumber = '${group.number}';
    	var progress = '${group.percent}';
    	dialogObj = createDialog();
        dialogObj.initDialog({ progress: progress, subjectCode: subjectCode, groupNumber: groupNumber }, function (initParams,deleteCode) { 
	        //这个回调方法里写进度小余10%的业务分支
			deleteDivHide();	        
        	if(deleteCode!=null && deleteCode!=''){
        		$("#inputForm").attr("action","${ctx}/admin/exam/group/delete?deleteCode="+deleteCode);
        		$("#inputForm").submit();
        	}else{
        		$("#inputForm").attr("action","${ctx}/admin/exam/group/delete");
        		$("#inputForm").submit();
        	}
    	}) 
    });
</script>
<script>
function deleteDivHide(){
	 $('#delete-modal').hide();
}
var dialogObj=null;
function createDialog() {
	return {
        initParams: {},
        setDialogTitle: function (index) {
            if (index < 4) {
                $('#deleteDiv .title').html('第' + index + '次警告');
                $('.sub-title1,.subjectCode,.groupNumber').show();
                $('.sub-title2,.authCode').hide();

            } else {
                $('#deleteDiv .title').html('分组授权码');
                $('.sub-title1,.subjectCode,.groupNumber').hide();
                $('.sub-title2,.authCode').show();
            }
        },
        validate: function () {
            if (this.warningIndex <= 3) {
                var subjectCodeVal = $('.subjectCode input').val();
                var groupNumberVal = $('.groupNumber input').val();
                $('.subjectCode input+.error-tip').html(!subjectCodeVal?'请输入科目代码':subjectCodeVal != this.initParams.subjectCode?'输入的科目代码不正确':'')
                $('.groupNumber input+.error-tip').html(!groupNumberVal?'请输入分组序号':groupNumberVal != this.initParams.groupNumber?'输入的分组序号不正确':'')

                if (!subjectCodeVal || !groupNumberVal || subjectCodeVal != this.initParams.subjectCode || groupNumberVal != this.initParams.groupNumber) {
                    return;
                } else {
                    this.next();
                }
            } else if (this.warningIndex == 4) {
                var authCodeVal = $('.authCode input').val();
                if(!authCodeVal){
                    $('.authCode input+.error-tip').html('请输入授权码');
                    return;
                }else{
                    $('.authCode input+.error-tip').html('');
                    this.next();
                }
            }

        },
        next() {
            if (this.warningIndex == 4) {
                this.callback(this.initParams,$('.authCode input').val());
            } else if (this.times <= 3 && this.times == this.warningIndex) {
                this.callback(this.initParams);
            } else {
                $('.subjectCode input+.error-tip').html('');
                $('.subjectCode input,.groupNumber input').val('')
                $('.groupNumber input+.error-tip').html('');
                this.warningIndex++;
                $('#deleteDiv').removeClass('animate__animated animate__fadeIn')
                setTimeout(function(){
                    $('#deleteDiv').addClass('animate__animated animate__fadeIn')
                },0)
                this.setDialogTitle(this.warningIndex);
            }
        },
        warningIndex: 1,//当前正在进行的第几次输入
        times: 0,//需要重复输入的次数
        callback:null,
        initDialog: function (initParams, callBack) {
            this.initParams = initParams;
            var progress = initParams.progress;
            if(callBack){
                this.callback = callBack;
                if (progress <= 10) {
                    callBack(initParams);
                    return;
                }
            }
            this.times = progress <= 80 ? 2 : progress >= 80 && progress < 100 ? 3 : 4;
            this.warningIndex = 1;
            $('#delete-modal').show();
            this.setDialogTitle(this.warningIndex);
        },
        submit: function (index) {
            console.log('你最开始传入的基础参数initParams为：',this.initParams);
            if(this.warningIndex==4){
                console.log('你输入的授权码为：'+$('.authCode input').val())
            }
        }
    }
   
}
</script>
</body>
</html>
