Partials.Consume = function (params) {
    var tabs = [ { text: "월" }, { text: "년" }  ];
    var selectedTab = ko.observable(0);
    var dataViewPopup = ko.observable(false);
    var dateBoxValue = ko.observable(new Date());
    var initialized = false;
    var dataSource;
    var chartDataSource = ko.observable();

    function createDaily() {
        return new DevExpress.data.DataSource({
            store: Partials.odata.ConsumeDaily,
            select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
            paginate: false,
            map: function (item) {
                item.Total = item.Cooler + item.Boiler;

                return item;
            },
            filter: [
                ["SiteId", "=", 1],
                ["BuildingId", "=", 1],
                ["Year", "=", dateBoxValue().getFullYear()],
                ["Month", "=", dateBoxValue().getMonth() + 1],
            ]
        });
    }

    function createMonthly() {
        return new DevExpress.data.DataSource({
            store: Partials.odata.ConsumeMonthly,
            select: ['Year', 'Month', 'Cooler', 'Boiler'],
            paginate: false,
            map: function (item) {
                item.Total = item.Cooler + item.Boiler;

                return item;
            },
            filter: [
                ["SiteId", "=", 1],
                ["BuildingId", "=", 1],
                ["Year", "=", dateBoxValue().getFullYear()]
            ]
        });
    }

    function load(result) {
        chartDataSource (result);

        viewModel.summary.load(result);

        $("#graphContainer").dxChart("instance").option({
            dataSource: chartDataSource,
            commonSeriesSettings: {
                argumentField: ["Day", "Month"][selectedTab()],
                type: "bar",
                hoverMode: "allArgumentPoints",
                selectionMode: "allArgumentPoints",
            },
            argumentAxis: {
                label: {
                    customizeText: function() {
                        return this.value + ['일', '월'][selectedTab()];
                    }
                },
                type: 'discreate',
                axisDivisionFactor: [31, 100][selectedTab()]
            },
            valueAxis: {
                label: {
                    format: 'fixedPoint thousands',
                    customizeText: function () {
                        return this.valueText + ' toe';
                    }
                }
            },
            series: [
                { name: "냉방", color: "#70cbed", valueField: "Cooler", },
                { name: "난방", color: "#ff7c7c", valueField: "Boiler" },
                { name: "전체", type: "line", color: "#9da5ad", valueField: "Total" },
            ],
            legend: {
                verticalAlignment: "top",
                horizontalAlignment: "right",
                position: "inside",
                border: { visible: true }
            },
            onPointClick: function (e) {
                e.target.select();
            },
            tooltip: {
                enabled: true,
                location: "edge",
                format: 'fixedPoint',
                customizeText: function () {
                    return this.seriesName + " : " + this.valueText;
                }
            }
        });
    }

    dateBoxValue.subscribe(function (e) {
        switch (selectedTab()) {
            case 0:
                dataSource = createDaily();
                break;
            case 1:
                dataSource = createMonthly();
                break;
        }

        handleViewShown();
    });

    selectedTab.subscribe(function (e) {
        switch (selectedTab()) {
            case 0:
                dataSource = createDaily();
                $("#dateBox").dxDateBox({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' });
                viewModel.summary.previous.name('전월 소비량');
                break;
            case 1:
                dataSource = createMonthly();
                $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' });
                viewModel.summary.previous.name('전년 소비량');
                break;
        }

        handleViewShown();
    });

    var handleViewShown = function () {
        if (initialized == false) {
            switch (selectedTab()) {
                case 0:
                    dataSource = createDaily();
                    break;
                case 1:
                    dataSource = createMonthly();
                    break;
            }
            initialized = true;
        }

        dataSource.load().done( function (result)
        {
            load(result);
        });
    };

    var dataViewPopup = {
        width: 800,
        height: 'auto',
        showTitle: true,
        title: ko.computed({
            read: function () {
                switch (selectedTab()) {
                    case 0: return moment(dateBoxValue()).format("YYYY년 MM월");
                    case 1: return moment(dateBoxValue()).format("YYYY년");
                }
            }
        }),
        visible: ko.observable(false),
        dragEnabled: false,
        closeOnOutsideClick: false,
        show: function () {
            dataViewPopup.visible(true);
        },
        shownAction: function () {
            var dataGrid = $("#dataGrid").dxDataGrid("instance");

            switch (selectedTab()) {
                case 0:
                    dataGrid.option({
                        "export": {
                            enabled: true,
                            fileName: "ConsumeDaily"
                        },
                        columns: [
                            { dataField: 'Day', caption: '일', width: '10%', },
                            { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
                            { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
                            { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
                    });
                    break;
                case 1:
                    dataGrid.option({
                        "export": {
                            enabled: true,
                            fileName: "ConsumeMonthly"
                        },
                        columns: [
                            { dataField: 'Month', caption: '월', width: '10%', },
                            { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
                            { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
                            { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
                    });

                    break;
            }
        }
    };

    var viewModel = {
        dateBoxValue: dateBoxValue,
        dataSource: chartDataSource,
        tabs: tabs,
        selectedTab: selectedTab,
        dataViewPopup: dataViewPopup,
        viewShown: handleViewShown,
        summary: {
            load: function (result) {
                viewModel.summary.pred.max({ title: '', value: 0 });
                viewModel.summary.pred.min({ title: '', value: 0 });
                viewModel.summary.previous.max({ title: '', value: 0 });
                viewModel.summary.previous.min({ title: '', value: 0 });

                switch (selectedTab()) {
                    case 0:
                        this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Day + '일', value: c.Total } }));
                        this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Day + '일', value: c.Total } }));

                        var date = new Date(dateBoxValue());

                        date.setMonth(date.getMonth() - 1);

                        previousDataSource = new DevExpress.data.DataSource({
                            store: Partials.odata.ConsumeDaily,
                            select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
                            paginate: false,
                            map: function (item) {
                                item.Consume = item.Cooler + item.Boiler;

                                return item;
                            },
                            filter: [
                                ["SiteId", "=", 1],
                                ["BuildingId", "=", 1],
                                ["Year", "=", date.getFullYear()],
                                ["Month", "=", date.getMonth() + 1],
                            ]
                        });

                        previousDataSource.load().done(function (data) {
                            viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
                            viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
                        });

                        break;
                    case 1:
                        this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Month + '월', value: c.Total } }));
                        this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Month + '월', value: c.Total } }));

                        var date = new Date(dateBoxValue());

                        date.setFullYear(date.getFullYear() - 1);

                        previousDataSource = new DevExpress.data.DataSource({
                            store: Partials.odata.ConsumeMonthly,
                            select: ['Year', 'Month', 'Cooler', 'Boiler'],
                            paginate: false,
                            map: function (item) {
                                item.Consume = item.Cooler + item.Boiler;

                                return item;
                            },
                            filter: [
                                ["SiteId", "=", 1],
                                ["BuildingId", "=", 1],
                                ["Year", "=", date.getFullYear()]
                            ]
                        });

                        previousDataSource.load().done(function (data) {
                            viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
                            viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
                        });
                        break;
                }
            },
            previous: {
                name: ko.observable('전월 소비량'),
                min: ko.observable({ title: '', value: 0 }),
                max: ko.observable({ title: '', value: 0 }),
            },
            pred: {
                min: ko.observable({ title: '', value: 0 }),
                max: ko.observable({ title: '', value: 0 }),
            }
        },
        onPrevious: function (e) {
            var date = new Date(dateBoxValue());

            (selectedTab() == 0) ?  date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1)

            dateBoxValue(date);
        },
        onNext: function (e) {
            var date = new Date(dateBoxValue());

            (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1)

            dateBoxValue(date);
        }
    };

    return viewModel;
};