import React, { Component } from 'react';
import { connect } from 'dva'
import { Breadcrumb } from 'antd';
import './drillDownBar.less';

class DrillDownBar extends Component {
    render() { 
        const { drillDown, className } = this.props
        return ( 
            <Breadcrumb className={className}
                separator=">"
            > 
            {drillDown.map((g,index) => (
                <Breadcrumb.Item 
                    key={g.value+index} 
                    onClick={( drillDown.length!==index+1 )?this.itemClick:null }
                    className={( drillDown.length!==index+1 )?'linkItem':'lastItem'}
                >
                    <span data-index={index}>{( index===0 && drillDown.length!==index+1 )?g.label:g.value}</span>
                </Breadcrumb.Item>
            ))}
            </Breadcrumb> 
        );
    }
    itemClick = (e) => {
        //绑定的drillDown的index
        let index = e.target.getAttribute('data-index');
        const { dispatch, inDashBoard, item } = this.props;
        let { drillDown } = this.props;
        //从第一层开始到点击处的层级的数组
        drillDown = drillDown.slice(0,Number(index)+1)
        let page = null;
        let pageSize = null;

        if(inDashBoard){
            //调用对应的图表类型的接口
            let { chartType } = item
            let type = `${chartType.charAt(0).toUpperCase()}${chartType.slice(1,chartType.length)}`
            dispatch({ 
                type: 'dashboardDesigner/setItemFetching', code: item.code, fetching: true 
            })
            dispatch({ 
                type: `chartDesigner/fetch${type}Data`, page, pageSize, drillDown, inDashBoard, item 
            }).then(option => {
                dispatch({ 
                    type: 'dashboardDesigner/setItemFetching', code: item.code, fetching: false 
                })
                dispatch({ type: 'dashboardDesigner/setItemFields', code: item.code, fields: [
                    { name: 'chartOption', value: option }
                ]})
            })
            
        }else{
            dispatch({ type: 'chartDesigner/fetchChartData', page, pageSize, drillDown });
        }
    }
}
 
export default connect()(DrillDownBar);