Ext.define('saas.view.home.charts.MonthIO', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-io',
    id: 'month_io',

    bind: {
        title: '本月收入支出额（万元）<div style="text-align: right;"><span style="font-weight:bold;">收入：{month_in}</span><span style="font-weight:bold;margin-left: 10px;">支出：{month_out}</span></div>'
    },

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'cartesian',
                colors: [
                    '#2C82BE',
                    '#82CCFF'
                ],
                bind: {
                    // captions: {
                    //     title: {
                    //         text: '收入：{month_in}\t支出：{month_out}',
                    //         style: {
                    //             'color': '#485465',
                    //             'letter-spacing': '-0.07px'
                    //         },
                    //         align: 'left'
                    //     },
                    // },
                    insetPadding: '{insetPadding}',
                    store: '{month_io}'
                },
                legend: {
                    type: 'dom',
                    docked: 'top',
                    padding: 0,
                    bodyPadding: 0,
                    border: 0,
                    cls: 'x-monthio-legend'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    adjustByMajorUnit: true,
                    fields: ['main'],
                    minimum: 0,
                    label: {
                        fontSize: '12px',
                        fillStyle: '#485465'
                    },
                    grid: {
                        even: {
                            stroke: '#F7F8FA'
                        },
                        odd: {
                            stroke: '#F7F8FA',
                        }
                    },
                    style: {
                        fill: '#fff',
                        strokeStyle: 'transparent'
                    },
                }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['x'],
                    label: {
                        fontSize: '12px',
                        fillStyle: '#485465'
                    },
                    style: {
                        fill: '#F7F8FA',
                        strokeStyle: 'transparent'
                    },
                }],
                series: [{
                    type: 'bar',
                    title: ['主营业务', '其他业务'],
                    xField: 'x',
                    yField: ['main', 'other'],
                    stacked: true,
                    bind: {
                        style: {
                            lineWidth: 0,
                            strokeStyle: 'transparent',
                            maxBarWidth: '{maxBarWidth}',
                        },
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onBarTipRender
                    }
                }]
            }]
        });

        me.callParent(arguments);
    },

    onBarTipRender: function (tooltip, record, item) {
        var fieldIndex = Ext.Array.indexOf(item.series.getYField(), item.field),
        type = item.series.getTitle()[fieldIndex];

        tooltip.setHtml(type + record.get('x') + record.get(item.field));
    },
});