/**
 * 全屏展示
 * @description 点击全屏后以全屏方式展示内容
 */
define(function(require, exports, module) {

	require('./fullscreenchart.css');
    require('vendor/unslider/js/unslider-min.js');
    require('vendor/unslider/css/unslider-dots.css');
    require('vendor/unslider/css/unslider.css');
    var echarts = require('vendor/echarts/echarts.min');
    var EchartsAdapter = require('../../../adapter/echartsAdapter');
    var ToolbarAdapter = require('../../../adapter/toolbarAdapter');
    //var FullScreenGrid = require('views/pages/fullscreenwindow/fullscreenchart.js');
    this.args;

	function FullScreenChart(args, callback) {
        var self = this;
        this.args = args;
        this.callback = callback;
        this.id = 'fullscreen_' + createGuid();
        this.chartTypes = [];
        this.create();
        window.onresize = function() {
            self.resize();
        };
	}

    FullScreenChart.prototype.create = function() {
        var self = this;
        $('body').append('<div id="' + self.id + '"></div>');
        self.$container = $('#' + self.id);
    }

	FullScreenChart.prototype.init = function() {
		
	};

	FullScreenChart.prototype.open = function() {
        var self = this;
        this.chartTypes = [];
        this.focusObj = document.activeElement;
        this.init();
        self.$container.css({
            'position': 'absolute',
            'top': window.scrollY + 'px',
            'left': '0px',
            'background':'white',
            'height': function() {
                return window.innerHeight;
            },
            'width': function() {
                return window.innerWidth;
            },
            'display': '-webkit-flex',
            '-webkit-flex-direction': 'column',
            'z-index': $.fn.window.defaults.zIndex + 1
        });
        $('body').width(self.$container.width())
            .height(self.$container.height())
            .css('overflow', 'hidden');
        self.fillBody();
        this.customerize();
	};

    FullScreenChart.prototype.fillBody = function() {
        var self = this;
        this.toolbarContainer = $('<div class="frr-fullscreen-chart-toolbar"></div>');
        this.mainBodyContainer = $('<div class="frr-fullscreen-chart-main"></div>');
        this.footerContainer = $('<div class="frr-fullscreen-chart-footer"></div>');
        self.$container
            .append(this.toolbarContainer)
            .append(this.mainBodyContainer)
            .append(this.footerContainer);
    }

    FullScreenChart.prototype.close = function () {
        var self = this;
        if (this.focusObj) {
            $(this.focusObj).focus();
        }

        $('body').css({
            'overflow': 'auto',
            'width': 'auto'
        });
        if(self.callback && typeof self.callback === 'function') {
            self.callback();
        }

        $('.page-container')
            .append(self.args.gridContainer)
            .append(self.args.paginationContainer)
            .append(self.args.toolContainerFullScreen);

        self.$container.remove();
    }

	FullScreenChart.prototype.customerize = function() {
        var self = this;
        this.initToolbar();
        this.initMain();
	};

	FullScreenChart.prototype.initToolbar = function() {
        var self = this;
        var chartNameDiv = $('<div class="frr-fullscreen-chartname"></div>');
        self.toolbarContainer.append(chartNameDiv);
        this.tooladpFullScreen = new ToolbarAdapter({
            pageId: this.id,
            container: self.toolbarContainer,
            buttons: [{
                fieldname: 'switchtogrid',
                dispname: '切换到表格',
                class: '',
                hint: '切换到表格',
                opcode: 'switchtogrid'
            }, {
                fieldname: 'download',
                dispname: '下载',
                class: '',
                hint: '下载',
                opcode: 'download'
            }, {
                fieldname: 'closeFullScreen',
                dispname: '关闭',
                class: '',
                hint: '关闭',
                opcode: 'closeFullScreen'
            }],
            actions: {
                click: function(opcode) {
                    self.opRouter(opcode);
                }
            }
        });
        this.tooladpFullScreen.init();
        chartNameDiv.css({
            width: self.toolbarContainer.width() - self.toolbarContainer.find('.fdpr-toolbar').width() - 10
        });
	};

    FullScreenChart.prototype.initMain = function() {
        var self = this;
        var rows = self.getDetailRows();
        if(rows.length == 0) return;

        var echartAdapter = new EchartsAdapter({
            dataManager: self.args.chartfullscreenArgs.dataManager,
            rptFormatId: self.args.chartfullscreenArgs.rptFormatId,
            chartFormat: self.args.chartfullscreenArgs.chartFormat,
            rows: rows,
            cb: function(options) {
                self.echartOpts = options;
                self.initFooter();
            }
        });
    }

    FullScreenChart.prototype.initFooter = function() {
        var self = this;
        var remarkDiv = $('<div class="frr-fullscreen-chart-remark"></div>');
        var chartIconDiv = $('<div class="frr-fullscreen-chart-icons"></div>');
        self.footerContainer.append(remarkDiv);
        self.footerContainer.append(chartIconDiv);

        if (self.echartOpts) {
            for (var i = 0; i < self.echartOpts.length; i++) {
                var echartOpt = self.echartOpts[i];
                if ($.inArray(echartOpt.type, self.chartTypes) >= 0 ) {
                    continue;
                }

                var iconId = '';
                switch (echartOpt.type) {
                    case 'barchart':
                        iconId = 'graph-histogram';
                        break;
                    case 'linechart':
                        iconId = 'graph-line';
                        break;
                    case 'areachart':
                        iconId = 'graph-stack';
                        break;
                    case 'piechart':
                        iconId = 'graph-pie';
                        break;
                    case 'barlinechart':
                        iconId = 'graph-complex';
                        break;
                }
                var iconSvg = $('<svg class="icon-chart frr-fullscreen-icon-chart icon-chart-selected" id="' + echartOpt.type + '"><use xlink:href="#' + iconId + '"/></svg>');
                iconSvg.click(function() {
                    var id = this.id;
                    if (id) {
                        $('.frr-fullscreen-icon-chart').addClass('icon-chart-selected');
                        $(this).removeClass('icon-chart-selected');
                        self.addCharts(id);
                    }
                });
                chartIconDiv.append(iconSvg);
                self.chartTypes.push(echartOpt.type);
            }
            self.mainBodyContainer.css({
                height: window.innerHeight - self.toolbarContainer.height() - self.footerContainer.height()
            });
            self.addCharts(self.chartTypes[0]);
            $('.frr-fullscreen-icon-chart:eq(0)').removeClass('icon-chart-selected');
        }
        remarkDiv.css({
            width: function() {
                var charts = $('.frr-fullscreen-icon-chart');
                if(charts && charts.length > 0) {
                    var echatswidth = charts.width() * charts.length + 5 * (charts.length + 1);
                    return window.innerWidth - echatswidth - 10;
                } else {
                    return 'auto';
                }
            }
        });
    }

    FullScreenChart.prototype.addCharts = function(chartType) {
        var self = this;
        if(!chartType || !self.echartOpts) {
            return;
        }

        self.mainBodyContainer.empty();
        self.mainBodyContainer.append($('<ul class="frr-fullscreen-chart-ul"></ul>'));
        for (var i = 0; i < self.echartOpts.length; i++) {
            var echartOpt = self.echartOpts[i];
            if(chartType === echartOpt.type) {
                self.addChart(echartOpt);
            }
        }
        var prev = $('<svg class="icon-chart frr-fullscreen-arrows prev"><use xlink:href="#month-last-oring"/></svg>');
        var next = $('<svg class="icon-chart frr-fullscreen-arrows next"><use xlink:href="#month-next-oring"/></svg>');
        self.mainBodyContainer.append(prev).append(next);
        var unslider = this.mainBodyContainer.unslider({
            arrows: false
        });
        
        self.setChartNameRemark(unslider);
        $('.frr-fullscreen-arrows').click(function() {
            var fn = this.classList[2];

            var current = unslider.data('unslider').current;
            if(fn === 'next' && current === unslider.data('unslider').$slides.length - 1) {
                return;
            }

            if(fn === 'prev' && current === 0) {
                return;
            }

            unslider.data('unslider')[fn]();

            self.setChartNameRemark(unslider);
        });
    }

    FullScreenChart.prototype.setChartNameRemark = function(unslider) {
        var self = this;
        var slides = unslider.data('unslider').$slides;
        if (!slides || slides.length == 0) return;

        var current = slides[unslider.data('unslider').current];
        if (!current || !current.id) return;

        for (var i = 0; i < self.echartOpts.length; i++) {
            var echartsOpt = self.echartOpts[i];
            if (parseInt(echartsOpt.serialno) === parseInt(current.id)) {
                var chartnameDiv = $('.frr-fullscreen-chartname');
                var chartremarkDiv = $('.frr-fullscreen-chart-remark');
                if (chartnameDiv) {
                    chartnameDiv.text(echartsOpt.name);
                }
                if (chartremarkDiv) {
                    chartremarkDiv.text(echartsOpt.remark);
                }
            }
        }

        if (unslider.data('unslider').current < slides.length - 1) {
            $('.frr-fullscreen-arrows.next').removeClass('frr-fullscreen-arrows-disable');
            $('.frr-fullscreen-arrows.next').addClass('frr-fullscreen-arrows-enable');
        } else {
            $('.frr-fullscreen-arrows.next').removeClass('frr-fullscreen-arrows-enable');
            $('.frr-fullscreen-arrows.next').addClass('frr-fullscreen-arrows-disable');
        }

        if (unslider.data('unslider').current > 0) {
            $('.frr-fullscreen-arrows.prev').removeClass('frr-fullscreen-arrows-disable');
            $('.frr-fullscreen-arrows.prev').addClass('frr-fullscreen-arrows-enable');
        } else {
            $('.frr-fullscreen-arrows.prev').removeClass('frr-fullscreen-arrows-enable');
            $('.frr-fullscreen-arrows.prev').addClass('frr-fullscreen-arrows-disable');
        }
    }

    FullScreenChart.prototype.addChart = function(chart) {
        var self = this;
        var guid = createGuid(),
            container = self.mainBodyContainer.find('.frr-fullscreen-chart-ul'),
            className = null,
            chartObj = null;

        switch (chart.type) {
            case 'barchart':
                className = 'bar-chart' + guid;
                break;
            case 'linechart':
                className = 'line-chart' + guid;
                break;
            case 'areachart':
                className = 'area-chart' + guid;
                break;
            case 'piechart':
                className = 'pie-chart' + guid;
                break;
            case 'barlinechart':
                className = 'bar-line-chart' + guid;
                break;
        }

        container.append('<li id="' + chart.serialno + '-li"><div class="'+ className +'" style="width: 100%;height: 600px;"></div></li>');
        self.mainBodyContainer.find('.frr-fullscreen-chart-ul > li > div').css({
            height: self.mainBodyContainer.height()
        });
        chartObj = echarts.init($('.' + className)[0]);
        chartObj.setOption(chart.option);
    };

    FullScreenChart.prototype.opRouter = function(opcode) {
        var self = this;
        switch (opcode) {
            case 'switchtogrid':
                self.close();

                var fullScreenGrid = new self.args.fullScreenGrid(self.args, function() {

                });
                fullScreenGrid.open();
                break;
            case 'download':
                //$('.frr-fullscreen-chart-main').data('unslider').$slides[$('.frr-fullscreen-chart-main').data('unslider').current]
    
                html2canvas($('.unslider-active'), {
                    allowTaint: true,
                    taintTest: false,
                    onrendered: function(canvas) {
                        var canvasname = $('.frr-fullscreen-chartname').text();
                        $('.canvas-image-container').attr('href', Canvas2Image.convertToImage(canvas).src)
                            .attr('download', canvasname + '.jpg');
                        $('.canvas-image-container')[0].click()
                    }
                });
                break;
            case 'closeFullScreen':
                self.close();
                break;
        }
    }

    FullScreenChart.prototype.resize = function() {
        var self = this;
        self.$container.css({
            'position': 'absolute',
            'top': window.scrollY + 'px',
            'left': '0px',
            'background': 'white',
            'height': function() {
                return window.innerHeight;
            },
            'width': function() {
                return window.innerWidth;
            },
            'display': '-webkit-flex',
            '-webkit-flex-direction': 'column',
            'z-index': $.fn.window.defaults.zIndex + 1
        });
        $('.frr-fullscreen-chartname').css({
            width: self.toolbarContainer.width() - self.toolbarContainer.find('.fdpr-toolbar').width() - 10
        });

        self.mainBodyContainer.css({
            height: window.innerHeight - self.toolbarContainer.height() - self.footerContainer.height()
        });

        $('.frr-fullscreen-chart-remark').css({
            width: function() {
                var charts = $('.frr-fullscreen-icon-chart');
                if (charts && charts.length > 0) {
                    var echatswidth = charts.width() * charts.length + 5 * (charts.length + 1);
                    return window.innerWidth - echatswidth - 10;
                } else {
                    return 'auto';
                }
            }
        });

        self.mainBodyContainer.find('.frr-fullscreen-chart-ul > li > div').css({
            height: self.mainBodyContainer.height()
        });
    }

    FullScreenChart.prototype.getDetailRows = function() {
        var self = this;
        var grid = self.args.gridContainer.find('.report-grid');
        var rows = [];
        if(grid) {
            rows = grid.datagrid('getRows');
        }
        if (self.args.chartfullscreenArgs.dataManager.groupFields.length == 0) return rows;
        var detailRows = _.where(rows, {'isRptGroupRow': '0'});
        return detailRows;
    };

	return FullScreenChart;
});