platform-bi-web/src/components/chartDesigner/sections/toolbar.jsx

import React from 'react'
import { Tag, Icon, Button } from 'antd'
import FilterBox from './filterBox'
import { connect } from 'dva'
import { dateFormat } from '../../../utils/baseUtils'
import './toolbar.less'

class Toolbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filters: props.chartDesigner.filters || [],
            visibleFilterBox: false
        }
    }

    filterUsingChange = (e) => {
        const key = e.target.dataset.key;
        const { chartDesigner, dispatch, autoRefresh } = this.props;
        const filters = chartDesigner.filters;
        dispatch({ type: 'chartDesigner/changeField', name: 'filters', value: filters.map( f => {
            if(+f.key === +key) {
                f = { ...f, using: f.type ? !f.using : false}
            }
            return f;
        }), autoRefresh });
    }

    showFilterBox = (e) => {
        this.setState({
            visibleFilterBox: true
        });
    }

    hideFilterBox = (e) => {
        this.setState({
            visibleFilterBox: false,
        });
    }

    createFilters = (filters) => {
        const { autoRefresh, dispatch } = this.props;
        dispatch({ type: 'chartDesigner/changeField', name: 'filters', value: filters, autoRefresh });
        this.hideFilterBox()
    }

    /**
     * 生成过滤规则文本
     */
    createFilterLabel = (filter) => {
        let { label, operator, operatorLabel, type, value1, value2 } = filter;
        let filterLabel;

        if(type === 'string' || type === 'index') {
            if(operator === 'null' || operator === 'notNull') {
                filterLabel = `${label} ${operatorLabel}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else if(type === 'scale') {
            if(operator === 'null' || operator === 'notNull') {
                filterLabel = `${label} ${operatorLabel}`;
            }else if(operator === 'between') {
                filterLabel = `${label} ${operatorLabel} ${value1} ~ ${value2}`; 
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`; 
            }
        }else if(type === 'time') {
            value1 = dateFormat(new Date(value1), 'yyyy/MM/dd');
            value2 = dateFormat(new Date(value2), 'yyyy/MM/dd');
            if(operator === 'null' || operator === 'notNull') {
                filterLabel = `${label} ${operatorLabel}`;
            }else if(operator === 'between') {
                filterLabel = `${label} ${operatorLabel} ${value1} ~ ${value2}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else if(type === 'categorical') {
            if(operator === 'null' || operator === 'notNull') {
                filterLabel = `${label} ${operatorLabel}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else {
            filterLabel = '错误条件';
        }
        return filterLabel;
    }

    render() {
        const { chartDesigner } = this.props;
        const { code, filters, columns } = chartDesigner;
        const { visibleFilterBox } = this.state;

        let tags = filters.map((f, i)=>{
            return {
                key: f.key,
                label: this.createFilterLabel(f),
                using: f.type ? f.using : false
            }
        });

        return (
            <div className='toolbar'>
                <div className='filters'>
                    <h6 style={{ marginRight: 8, display: 'inline' }}>筛选:</h6>
                    {tags.map(tag => (
                        <Tag
                            className={`filter-tag ${tag.using?'filter-tag-using':''}`}
                            key={tag.key}
                            closable={false}
                            onClick={this.filterUsingChange}
                            data-key={tag.key}
                        >
                            {tag.label}
                        </Tag>
                    ))}
                    <Tag
                        onClick={this.showFilterBox}
                        className={`filter-tag filter-tag-add`}
                    >
                        <Icon type="filter" />
                    </Tag>
                </div>
                <div className='tools'>
                    <Button className='tools-button' size='small' onClick={() => {
                        this.setState({
                            visibleColumnBox: true
                        })
                    }}>查看列</Button>
                </div>
                <FilterBox key={Math.random()} chartCode={code} columns={columns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />  
            </div>
        );
    }
}
function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}

export default connect(mapStateToProps)(Toolbar);