Ext.define('school.view.analysis.consumption.Chart1', {
    extend: 'school.view.core.chart.ChartBase',
    xtype: 'consumption-chart1',

    title: '各年级学生月校园平均消费统计',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'echartsbase',
                bind: {
                    store: '{chart1}',
                },
                createOption: me.createOption.bind(me)
            }]
        });

        me.callParent(arguments);
    },

    createOption: function (store) {
        var me = this,
        fields = [],
        gFields = ['初一', '初二', '初三'],
        g1 = [],
        g2 = [],
        g3 = [],
        gDatas = [],
        o;

        store.each(function (d) {
            var d = d.data;
            fields.push(d.month);
            g1.push(d.g1);
            g2.push(d.g2);
            g3.push(d.g3);
        });

        gDatas.push(g1, g2, g3);

        o = {
            color: [
                '#1EC09F',
                '#27A7FF',
                '#4E84F5',
                '#FDC200',
                '#76DDFB',
                '#FE7D6B',
            ],
            grid: {
                left: 0,
                right: 0,
                top: 60,
                bottom: 5,
                borderColor: '#E5EAEF',
                containLabel: true
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                data: gFields
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                axisLabel: {
                    color: '#485465',
                    interval: 0
                },
                data: fields,
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E5EAEF',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E5EAEF']
                    }
                },
                axisLabel: {
                    color: '#485465'
                }
            },
            series: me.getSeries(gFields, gDatas)
        };

        return o;
    },

    getSeries: function(fields, datas) {
        let series = [];

        for(let i = fields.length - 1; i >= 0 ; i--) {
            let s = {
                name: fields[i],
                type: 'line',
                label: {
                    normal: {
                        show: true
                    }
                },
                data: datas[i]
            };
            series.push(s);
        }

        return series;
    }
});