
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/rili.css">
<style>
    #container{
        margin: 0 auto;
        float: none;
        width: 95%;
        height: 600px;
    }
</style>
<div style="margin-top: 10px;display: none;">
    <a class="btn btn-primary radius" onclick="operList();" >
        导出
    </a>
</div>
<div style="margin-top: 10px;text-align: right;margin-right: 40px;">
    <a class="btn btn-primary radius" onclick="zdPb();" >
        自动排班
    </a>
    <a class="btn btn-primary radius" onclick="viewUserWeek();" >
        周排班表
    </a>
    <a class="btn btn-primary radius" onclick="changeZb();" >
        换班
    </a>
</div>
<div id="calendar" class="calendar" style="height:580px;overflow-y:auto; "></div>
<form  method="post" id="form1" name="form1" action="export_query.jsp" >
    <input type="hidden" value="" id="nowDays" name="nowDays">
    <input type="hidden" value="" id="nowYear" name="nowYear">
    <input type="hidden" value="" id="nowMonth" name="nowMonth">
</form>
<script>
    var now = new Date();//当前日期
    var year = now.getFullYear();// 年份
    var month = now.getMonth() + 1;// 月份
    var nowMonth=month;
    var nowYear=year;
    var preMonth = now.getMonth();// 上个月
    var nowDay = now.getDate();// 当天
    var nextMonth = month + 1;// 下个月
    var days,whatday,predays; //days表示当月天数，predays表示上个月天数，whatday表示当月一号所在的是周几
    var weeks = ['一','二','三','四','五','六','日'];//设置头部是从周一开始还是周日开始
    var begin;//传入参数，用于设置上一个月还剩几天的天数显示
    function setNewDate(){//设置日期的方法
        if(month == 1){ //当前月为1月时，上一个月显示为12月
            preMonth = 12;
        }
        if(month == 12){ //当前月为12月时，下一个月显示为1月
            nextMonth = 1;
        }
        now.setFullYear(year, month, 0);
        days = now.getDate();//当前月天数
        now.setDate(1);//获取的是1号
        whatday = now.getDay();// 获取1号在周几
        now.setFullYear(year, month - 1, 0);
        predays = now.getDate();// 上个月天数
        begin = predays - whatday + 2; // 设置上一个月还剩几天的天数显示
        getCalendar(weeks, begin, whatday - 1); //传入参数，调用getCalender方法
        document.getElementById("calendar-pre").setAttribute("onclick","test1()");
        document.getElementById("calendar-next").setAttribute("onclick","test2    ()");
    }
    setNewDate(); // 初始化日期
    function getCalendar(weeks, begin, whichday){
        var totalDays="";
        var calBox = document.getElementById("calendar"); //获取日历的dom对象
        var str = "<div class='title'>\
                <div id='calendar-pre'>&lt;上月（\
                " + preMonth + "月）</div><label>\
                "+year+"年</label><label>" +month+"\
                月</label> <div id='calendar-next'>下月\
                （"+nextMonth+"月）&gt;</div>" +
            " </div>" //渲染表格基础信息
        str += "<table class='calendar-table'>"
        str += "<tr>"
        for(var i = 0; i < 7;i++){ //渲染头部
            var backGroundColor='color:#000;';
            if(i==0||i==6){
                backGroundColor='color:red;';
            }
            str += "<th style='"+backGroundColor+"''>" + weeks[i] + "</th>"
        }
        str += "</tr>";
        var line = Math.ceil((days + whichday) / 7); // 行数
        var curIndex = 1; //当前天
        var start = begin; //上一个月遗留的天数显示
        var flag = false; //这个月的天数是否渲染完成
        for(var l = 0; l < line; l++){
            str += "<tr>";
            for(var i = 0; i < 7; i++){ //一周七天
                var backGroundColor='color:#000;';
                if(i < whichday && l == 0){ //当i小于一号所在的周几数就表示上个月还剩余天数未渲染
                    //str += "<td style='color:#989898;'><div id='divId_"+(month-1)+'_'+start+"'>" + start + "</div></td>" ; //渲染上个月的剩余天数，并置为灰色
                    getZbUser(year,(month-1),start,"divId_"+(month-1)+'_'+start);
                    str += "<td id='divId_"+(month-1)+'_'+start+"_td'>" +
                        "<div style='color:#989898;' id='divId_"+(month-1)+'_'+start+"'>" + start + "</div>" +
                        "<div style='left:20px;font-size: 12px;color:deepskyblue;' id='divId_"+(month-1)+'_'+start+"_xiuxi'></div>" +
                        "<div style='color:red;top:22px;font-size: 13px;' id='divId_"+(month-1)+'_'+start+"_holiday'></div>" +
                        "<div style='left:40px;top:10px;font-size: 13px;cursor: pointer;' id='divId_"+(month-1)+'_'+start+"_usrlist'></div>" +
                        "</td>" ;
                    start++;
                }else if(curIndex > days || flag == true){ //当月天数渲染完之后，剩余的位置用于渲染下个月的天数
                    getZbUser(year,(month+1),(curIndex - days),"divId_"+(month+1)+'_'+(curIndex - days));
                    flag == true;
                    // str += "<td style='color:#989898;'><div id='divId_"+(month+1)+'_'+(curIndex - days)+"'>" + (curIndex - days) + "</div></td>" ;
                    str += "<td style='color:#989898;' id='divId_"+(month+1)+'_'+(curIndex - days)+"_td'>" +
                        "<div style='color:#989898;' id='divId_"+(month+1)+'_'+(curIndex - days)+"'>" + (curIndex - days) + "</div>" +
                        "<div style='left:20px;font-size: 12px;color:deepskyblue;' id='divId_"+(month+1)+'_'+(curIndex - days)+"_xiuxi'></div>" +
                        "<div style='color:red;top:22px;font-size: 13px;' id='divId_"+(month+1)+'_'+(curIndex - days)+"_holiday'></div>" +
                        "<div style='left:40px;top:10px;font-size: 13px;cursor: pointer;' id='divId_"+(month+1)+'_'+(curIndex - days)+"_usrlist'></div>" +
                        "</td>" ;
                    curIndex++;
                }else{ //渲染当月的天数
                    getZbUser(year,month,curIndex,"divId_"+month+'_'+curIndex);
                    if(i==0||i==6){
                        backGroundColor='color:red;';
                    }
                    if(nowDay==curIndex&&month==nowMonth&&year==nowYear){
                        str += "<td id='divId_"+month+'_'+curIndex+"_td' style='background-color: orange;color:#fff;'>" +
                            "<div style='color: #fff;' id='divId_"+month+'_'+curIndex+"'>" + curIndex + "</div>" +
                            "<div style='left:20px;font-size: 12px;color:deepskyblue;' id='divId_"+month+'_'+curIndex+"_xiuxi'></div>" +
                            "<div style='color:red;top:22px;font-size: 13px;' id='divId_"+month+'_'+curIndex+"_holiday'></div>" +
                            "<div style='left:40px;font-size: 13px;top:10px;cursor: pointer;' id='divId_"+month+'_'+curIndex+"_usrlist'></div>" +
                            "</td>" ;
                    }else{
                        str += "<td id='divId_"+month+'_'+curIndex+"_td'>" +
                            "<div style='"+backGroundColor+"'' id='divId_"+month+'_'+curIndex+"'>" + curIndex + "</div>" +
                            "<div style='left:20px;font-size: 12px;color:deepskyblue;' id='divId_"+month+'_'+curIndex+"_xiuxi'></div>" +
                            "<div style='color:red;top:22px;font-size: 13px;' id='divId_"+month+'_'+curIndex+"_holiday'></div>" +
                            "<div style='left:40px;top:10px;font-size: 13px;' id='divId_"+month+'_'+curIndex+"_usrlist'></div>" +
                            "</td>" ;
                    }
                    totalDays+=curIndex+",";
                    curIndex++;
                }
            }
            str += "</tr>";
        }
        $("#nowDays").val(totalDays.substring(0,totalDays.length-1));
        $("#nowYear").val(year);
        $("#nowMonth").val(month);
        str += "</table>"
        calBox.innerHTML = str;
    }
    function test1(){
        month = preMonth;
        preMonth = month - 1;
        nextMonth = month + 1;
        if(month == 12){ //边界值判断
            year--;
        }
        setNewDate(); //更新日期
    }
    function test2(){
        month = nextMonth;
        preMonth = month - 1;
        nextMonth = month + 1;
        if(month == 1){ //边界值判断
            year++;
        }
        setNewDate(); //更新日期
    }
    function getZbUser(year,month,day,divId) {
        $.ajax({
            type: "post",
            url: "list_ajax.jsp?year="+year+"&month="+month+"&day="+day,
            success: function (msg) {
                $("#"+divId+"_usrlist").html(msg.substring(0,msg.indexOf("_")));
                $("#"+divId+"_holiday").html(msg.substring(msg.indexOf("_")+1,msg.indexOf("=")));
                $("#"+divId+"_xiuxi").html(msg.substring(msg.indexOf("=")+1));
                $("#"+divId+"_td").attr("onclick","viewUser("+year+","+month+","+day+")");
            }
        });
    }
    function viewUser(year,month,day) {
        var url = './viewUser-t.jsp?year='+year+'&month='+month+'&day='+day;
        viewDeptOrUserInfo(year+'年'+month+'月'+day+'日值班表', url, '1100', '550');
    }
    function changeZb() {
        var url = './changeZb-t.jsp';
        viewDeptOrUserInfo('换班', url, '1000', '500');
    }
    function viewUserWeek() {
        var url = './viewUserWeek-t.jsp';
        viewUserWeekFull('周值班表', url, '1000', '500');
    }
    function viewUserWeekFull(title, url, w, h) {
        var abc = layer.open({
            title: title,
            type: 2,
            content: url,
            area: [w, h],
            maxmin: true
        });
        layer.full(abc);
    }
    function zdPb() {
        var url = './edit-t.jsp';
        viewDeptOrUserInfo('自动排班', url, '1000', '500');
    }
    function viewDeptOrUserInfo(title, url, w, h) {
        var abc = layer.open({
            title: title,
            type: 2,
            content: url,
            area: [w+'px', h+'px'],
            maxmin: true
        });
        //layer.full(abc);
    }
</script>
