Ext.define('saas.view.home.charts.MonthPurchase', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-purchase',

    id: 'month_purchase',

    bind: {
        title: '本月采购额（万元）：{month_purchase_amount}'
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'cartesian',
                colors: [
                    '#34BAF6'
                ],
                bind: {
                    insetPadding: '{insetPadding}',
                    store: '{month_purchase}',
                },
                axes: [{
                    type: 'category',
                    fields: ['x'],
                    position: 'bottom',
                    label: {
                        fontSize: '12px',
                        fillStyle: '#485465',
                    },
                    style: {
                        fill: '#E5EAEF',
                        strokeStyle: 'transparent'
                    },
                    renderer: me.onCategoryLabelRender
                },{
                    type: 'numeric',
                    fields: ['y'],
                    position: 'left',
                    adjustByMajorUnit: true,
                    grid: {
                        even: {
                            stroke: '#E5EAEF'
                        },
                        odd: {
                            stroke: '#E5EAEF',
                        }
                    },
                    label: {
                        fontSize: '12px',
                        fillStyle: '#485465',
                        textAlign: 'end'
                    },
                    style: {
                        fill: '#fff',
                        strokeStyle: 'transparent'
                    },
                    minimum: 0
                }],
                series: [{
                    type: 'bar',
                    xField: 'x',
                    yField: ['y'],
                    bind: {
                        style: {
                            lineWidth: 0,
                            strokeStyle: 'transparent',
                            maxBarWidth: '{maxBarWidth}',
                        },
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onBarTipRender
                    }
                }]
            }]
        });

        me.callParent(arguments);
    },

    onCategoryLabelRender: function(axis, label, layoutContent, lastLabel) {
        return label.substr(0,2) + '...';
    },

    onBarTipRender: function (tooltip, record, item) {
        tooltip.setHtml(record.get('x') + ': ' + Ext.util.Format.number(record.get('y'), '0,000.00') + '万元');
    },

});