{extend name="common/common2" /}
{block name="main"}
<script src="/static/fullcalendar-3.10.2/lib/jquery.min.js"></script>
<script src='/static/fullcalendar-3.10.2/lib/moment.min.js'></script>
<script src="/static/fullcalendar-3.10.2/fullcalendar.min.js"></script>
<script src="/static/fullcalendar-3.10.2/locale/zh-cn.js"></script>
<link rel="stylesheet" href="/static/fullcalendar-3.10.2/fullcalendar.min.css" />
<link href='/static/fullcalendar-3.10.2/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<style>
    .bgstatus{
        display: inline-block;
        width: 60px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        border-radius: 3px;
        text-align: center;
    }
    .bgs0{
        background-color: #777777;
    }
    .bgs1{
        background-color: #478fca;
    }
    .bgs2{
        background-color: #69aa46;
    }
    .bgs3{
        background-color: #dd5a43;
    }
</style>

<div class="ibox">
    <div class="alert alert-info">
        不同颜色的背景代表不同的任务状态: <span class="bgstatus bgs0">未执行</span> <span class="bgstatus bgs1">执行中</span> <span class="bgstatus bgs2">已完成</span> <span class="bgstatus bgs3">未完成</span>
    </div>
    <div class="ibox-content">
        <div class="row">

            <div class="col-xs-8">
                <a href="{:url('index',['mode'=>$mode])}" class="btn btn-sm btn-warning">表格显示</a>
<!--                <a href="{:url('add',[],'')}/id/0/mode/{$mode}?isCalendar=1&type=1" class="btn btn-sm btn-primary">新增计划</a>-->
<!--                <a href="{:url('plan',['mode'=>$mode])}?type=2" class="btn btn-sm btn-success">复制月计划</a>-->
<!--                <a href="{:url('batch',['mode'=>$mode])}?type=2" class="btn btn-sm btn-danger">按月删除计划</a>-->
            </div>
        </div>
    </div>
    <div class="ibox-content">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <div class="btn-group pull-left">
                        {if $mode == 1}巡更任务列表{/if}
                        {if $mode == 2}巡视任务列表{/if}
                        {if $mode == 3}巡查任务列表{/if}
                        {if $mode == 4}巡检任务列表{/if}
                    </div>
                </div>
                <div class="panel-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>


        var url = "{:url('PatrolTask/taskjson')}?mode={$mode}";
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var calendar = $('#calendar').fullCalendar({
            firstDay: 1,
            locale:'zh-cn',
            currentTimezone: 'Asia/Shanghai',
            eventLimit: false, //多个记录,显示更多查看
            buttonText: {
                prev: '<',
                next: '>',
                prevYear: '去年',
                nextYear: '明年',
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: url,
            loading: function(bool) {
                if (bool) {
                    var layerIndex = layer.load(1);
                } else {
                    layer.closeAll('loading');
                }
            },
            eventRender: function(event, element) {
                element.html(event.title);
            },
            editable: false,
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var start = formatDateTime(new Date(start));
                var end = formatDateTime(new Date(end));
                var addurl = "{:url('PatrolTask/add',[],'')}/id/0/mode/{$mode}?type=1&start=" + start + "&end=" + end;
                lay_open("添加计划任务", addurl);
                calendar.fullCalendar('unselect');
            }
            ,
            eventClick: function(calEvent, jsEvent, view) {
                layer.confirm('请选择您想做的操作', {
                    icon: 3,
                    btn: ['添加', '编辑', '删除'],
                    skin: 'layer-ext-moon',
                    btn1: function(index) {
                        layer.close(index);
                        var start = formatDateTime(new Date(calEvent.start));
                        var end = formatDateTime(new Date(calEvent.end));
                        var addurl = "{:url('PatrolTask/add',[],'')}/id/0/mode/{$mode}?type=1&start=" + start + "&end=" + end;
                        lay_open("添加计划任务", addurl);
                        calendar.fullCalendar('unselect');
                    },
                    btn2: function(index) {
                        layer.close(index);
                        var editurl = "{:url('PatrolTask/add',[],'')}/id/"+calEvent.taskid+"/mode/{$mode}?type=1";
                        lay_open("编辑/查看", editurl);
                    },
                    btn3: function(index) {
                        layer.close(index);
                        layer.confirm('您确定要删除?', {
                            icon: 3,
                            btn: ['删除', '取消'],
                            skin: 'layer-ext-moon',
                            yes: function (index2) {
                                layer.close(index2);
                                $.ajax({
                                    url: '{:url("PatrolTask/del",[],"")}/id/' + calEvent.taskid,
                                    type: "GET",
                                    success: function (result) {
                                        if (result.code == 1) {
                                            calendar.fullCalendar('removeEvents', function (ev) {
                                                return (ev._id == calEvent._id);
                                            });
                                        } else {
                                            layer.alert(result.msg, {
                                                icon: 2,
                                                skin: 'layer-ext-moon',
                                                yes: function (index3) {
                                                    layer.close(index3);
                                                }
                                            });
                                        }
                                    },
                                    error: function (result) {
                                        layer.alert('请求出错,请重试', {
                                            icon: 2,
                                            skin: 'layer-ext-moon',
                                            yes: function (index3) {
                                                layer.close(index3);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }

        });

        var formatDateTime = function(date) {
            date = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        };
    function lay_open (title,url) {
        layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: 0.3,
            maxmin: true,
            area: ['90%', '90%'],
            content: url,
            end: function () {

            }
        });
    }
</script>
{/block}