<?

?>

<!DOCTYPE html>
<html>
<head>
    <? require_once "header.html"; ?>

    <link href='timeline/core.main.min.css' rel='stylesheet'/>
    <link href='timeline/timeline.main.min.css' rel='stylesheet'/>
    <link href='timeline/resource-timeline.main.min.css' rel='stylesheet'/>
    <script src='timeline/core.main.min.js'></script>
    <script src='timeline/locales-all.min.js'></script>
    <script src='timeline/interaction.main.min.js'></script>
    <script src='timeline/timeline.main.min.js'></script>
    <script src='timeline/resource-common.main.min.js'></script>
    <script src='timeline/resource-timeline.main.min.js'></script>
    <script type="text/javascript" src="scripts/echarts.min.js?_<?=filemtime('scripts/echarts.min.js')?>"></script>
    <style>
        a.fc-timeline-event {
            color: #fff
        }


			div.e7-title{
    position: absolute;
    z-index: 19891011;
    left: 0;
    top: 0px;
    background: white;
    border: 1px solid #e4e4e4;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 0px;
    word-break: break-all;
    line-height: 22px;
}
.e7-title:before {
    content: '';
    border: 10px solid transparent;
    border-bottom-color: #ffffff;
    display: inline-block;
    position: absolute;
    top: -17px;
    left: 5px;
}
    </style>
</head>
<body>
<? require_once "leftbar.html"; ?>
<? require_once "projectheader.html"; ?>

<div id="wrap">
    <div id="calendar" style="margin:15px;">

    </div>
</div>

<script type="text/javascript">


(function(){
    var defaults = {
        title: '',
        time: 1500
    };
    
    $.fn.e7Tips = function (op) {
		var $options = {};
        if(typeof op == 'object'){
            $options = $.fn.extend({}, defaults, (op || {}));
        }else if(op && typeof op == 'string'){
            $options.title = op;
        }
        if(!$options.title){
            $options.title = this.attr('title') || '';
        }
        this.removeAttr('title');
        if($options.title){
            var $this = this;
            this.hover(
                function () {
                    var offset = $this.offset();
                    var title = $options.title;
                    if($this.parents('body').find('.e7-title').length > 0){
                        $this.parents('body').find('.e7-title').remove();
                    }
                    $this.parents('body')
                        .append('<div class="e7-title" style="top:' + (offset.top + $this.height()+10) + 'px;left:'+(offset.left+10)+'px">' + title + '</div>');
                }, function () {
					console.log('xxxxx');
                    var timeout = $options.time;
                    if(typeof timeout != 'number' || timeout < 0){
                        timeout = defaults.time;
                    }
                    setTimeout(function () {
                        if($this.parents('body').find('.e7-title').length > 0){
                            $this.parents('body').find('.e7-title').remove();
                        }
                    },timeout);
                }
            );
        }
    };
})(jQuery);


    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'resourceTimeline'],
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            timeZone: '+8',
            locale: 'zh-cn',
            defaultView: 'resourceTimelineMonth',
            aspectRatio: 2.4,
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'myCustomButton,resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
            },

            customButtons: {
				/*
                myCustomButton: {
                    text: '延期统计',
                    click: function() {
                        // $('.fc-button-group .fc-button').removeClass('fc-button-active');

                        var html = `<div class="fc-button-group">
<button type="button" id='yq-Week' class="fc-button fc-button-primary">周</button>
<button type="button" id='yq-Month' class="fc-button fc-button-primary">月</button></div>`;
                        html += `<div id='echarts-yq' style="width: 900px;height:1000px;"></div>`;
                        $('.fc-view').html(html);

                        $('#yq-Week').click();


                    }
                }
				*/
            },

            editable: false,
            resourceLabelText: '成员',
            resourceGroupField: 'group',
            resourceAreaWidth: "100px",
            resources: './?app=api&apiact=get_timeline_users',

            events: './?app=api&apiact=get_timeline_events',
			eventMouseover : function(event, jsEvent, view){
				console.log(event, jsEvent, view);
			},
            eventRender: function(info) {
				//console.log($(info.el).html());
				//$(info.el).html( $(info.el).html().replace('☑','<b style="color:#04ff00">☑</b>'))
				//if($(info.el).html().indexOf('☑')!=-1){
				//	$(info.el).html( '<span style="color:#04ff00">'+ $(info.el).html() + '</span>')
				//}
				$(info.el).attr('title',$(info.el).text());
				$(info.el).e7Tips($(info.el).text());
                // console.log("==-==-=");
                // console.log(info);
                // info.el.innerHTML += info.event.extendedProps.isyanqi;
				
				/*
                if (info.event.extendedProps.isyanqi){
                    var yqrt = info.event.extendedProps.yanqiRt;
                    var txt = rtime2txt(yqrt);
                    if (txt){
                        if(txt.indexOf('天')!=-1)
                            var yqtxt = `<span class="minicard-label card-label-legured" title="延期">延期${txt}</span>`;
                        else
                            var yqtxt = `<span class="minicard-label card-label-legured2" title="延期">延期${txt}</span>`;

                    }
                    // var yqtxt = `<span class="minicard-label card-label-legured" title="延期">延期${info.event.extendedProps.yanqiday}天</span>`;

                    $(info.el).prepend(yqtxt);
                }
				*/

                // var tooltip = new Tooltip(info.el, {
                // 	title: info.event.extendedProps.description,
                // 	placement: 'top',
                // 	trigger: 'hover',
                // 	container: 'body'
                // });
            }

        });

        calendar.render();

        setTimeout(function () {
            //$('.fc-expander').click();
			//$('.fc-timeline-event').e7Tips();
        }, 100);



        $('body').on("click","#yq-Month",function(){
            var myChart = echarts.init(document.getElementById('echarts-yq'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '延期月排行榜'
                },
                tooltip: {},
                legend: {
                    data:[]
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    // name: '销量',
                    type: 'bar',
                    itemStyle : {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    data: []
                }],

            };

            myChart.showLoading();
            $.get('?app=api&apiact=get_yqrank&act=month',function (data) {
                myChart.hideLoading();

                var d = JSON.parse(data);
                option.yAxis.data = d.xdata;
                option.series[0].data = d.ydata;
                option.legend.data = d.xdata;
                // 使用刚指定的配置项和数据显示图表。

                myChart.setOption(option);

            })

        });

        $('body').on("click","#yq-Week",function(){
            var myChart = echarts.init(document.getElementById('echarts-yq'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '延期周排行榜',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2011年', '2012年']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: []
                },
                series: [
                    {
                        // name: '2012年',
                        type: 'bar',
                        itemStyle : {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        },
                        data: []
                    }
                ]
            };
            myChart.showLoading();
            $.get('?app=api&apiact=get_yqrank',function (data) {
                myChart.hideLoading();

                var d = JSON.parse(data);
                option.yAxis.data = d.xdata;
                option.series[0].data = d.ydata;
                // 使用刚指定的配置项和数据显示图表。

                myChart.setOption(option);

            })



        });



    });


    // 时间转字符串 天 小时 分钟
    function rtime2txt(rt) {
        var txt = '';
        // 天
        if (rt > 24*3600){
            txt = parseInt(rt/(24*3600)) + '天';
        // 小时
        }else if (rt > 3600){
            txt = parseInt(rt/3600) + '小时'
        // 分钟
        }else if(rt > 60){
            txt = parseInt(rt/60) + '分钟'
        }else {
            txt = rt + '秒'
        }

        return txt
    }


</script>

<style>
    .fc-sun{
        color: red;
    }
    .fc-sat{
        color: red;
    }

</style>

</body>
</html>


