<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客服须知</title>
<link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<style>
	.layui-form-radio{
		width:300px;
		margin-bottom:20px;
	}
	.nextPage{
		position: absolute;
		right:700px;
		bottom:30px;
	}
</style>
<body>
<div>
   <!--  <h1 id="headline">产品知识测验</h1> -->
    <br/>
<!--    用了layui的tpl模板引擎-->
    <div id="view"></div>
    <div class="nextPage">
        <!-- <button type="button" class="layui-btn" id="reset"><i class="layui-icon">&#xe666;</i>重置</button> -->
        <button class="layui-btn layui-btn-normal layui-btn-lg preBotton"><i class="layui-icon layui-btn-normal">&#xe616;</i>上一页 </button>
        <button class="layui-btn layui-btn-normal layui-btn-lg nextBotton"><i class="layui-icon layui-btn-normal">&#xe61f;</i>下一页 </button>
    </div>
</div>
</body>
<script id="questionInfo" type="text/html">
    <div class="layui-row">
        <form class="layui-form">
			  <ul>
                <li class="layui-form-item" style=" text-align: left;margin-left: 20px">
					<!--对后台传过来的json数据进行遍历-->
					{{# if(d.data.list.pageNum == 1){ }}
						<blockquote style=" text-align: left " class="layui-elem-quote">
                        	<span style="font-size: 18px;font-weight: bold">客服须知十大底线<span style="font-size: 14+px;color:red;font-weight: bold">（必考，需牢记！！！）</span></span> 
                		</blockquote>	
					{{# } }}
                    {{# layui.each(d.data.list.list, function(index, item){ }}
 						<div style="margin-bottom:30px">
							<label style="font-size: 18px;font-weight: normal"> <span>{{ index+1 }}.&nbsp;&nbsp;{{ item.content }} </span></label>
                    	</div>
                    {{# }); }}
                </li>
            </ul>
        </form>
    </div>
</script>
 
<script>
	// 分页标识
	var index = 1;
	// 总页数
	var page  = 0;
    layui.use(['form', 'laytpl', 'layer'], function () {
        var  $ = layui.jquery, 
            form = layui.form, 
            layer = layui.layer, 
            laytpl = layui.laytpl;
        	form.render();
 
        $(".nextBotton").click(function(){
        	if(index == page){
        		/* layer.confirm('已是最后一页，开始测试？？',{icon:3,title:"提示"}, function(index){
        			//iframe层
            		layer.open({
            		    type: 2,
            		    title: '产品知识测验',
            		    // 点击遮罩关闭
            		    shadeClose: false,
            		    area: ['100%', '100%'],
            		    skin:'layui-layer-molv',
            		    content: './testPaper.jsp' //iframe的url
            		}); 
        		}); */
        		$.ajax({
                	url:"${pageContext.request.contextPath}/examOverToChangeSysStatus",
                	contentType : 'application/json;charset=utf-8',
                    type : 'POST',
                    success:function (data) {
                    	if (data.code == 200) {
                        	//提示框
                        	layer.msg('已观看所有的内容，请重新登录系统使用！', {
								icon : 6,
								offset : "auto",
								time : 2000
							});
							setTimeout("javascript:top.location.href='${pageContext.request.contextPath}/SysUser/logout'", 3000);
            			}else{
            				layer.msg('失败！',{icon:5,offset:"auto",time:2000});//提示框
                    	}
                    }
                })
        		return false;
        	}
    		//获取后台数据
            $.ajax({
                url: "${pageContext.request.contextPath}/getInformations",
                type: "GET",
                data:{
                	page:++index
                },
                success: function (data) {
                    var getTpl = document.getElementById('questionInfo').innerHTML,
                        view = document.getElementById('view');
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                    form.render();
                }
            })
        });
        $(".preBotton").click(function(){
        	if(index == 1){
        		return false
        	}
    		//获取后台数据
            $.ajax({
                url: "${pageContext.request.contextPath}/getInformations",
                type: "GET",
                data:{
                	page:--index
                },
                success: function (data) {
                    var getTpl = document.getElementById('questionInfo').innerHTML,
                        view = document.getElementById('view');
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                    form.render();
                }
            })
        });
        
        //获取后台数据
        $.ajax({
            url: "${pageContext.request.contextPath}/getInformations",
            datatype: "json",
            type: "GET",
            async: false,//关闭异步，否则popover组件无法渲染出值
            context: document.body,
            success: function (data) {
            	page = data.data.list.pages
                var getTpl = document.getElementById('questionInfo').innerHTML,
                    view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
                form.render();
            }
        })
    });
</script>
</html>