import React from 'react'
import { connect } from 'dva'
import { Layout, Steps, Button } from 'antd'
import DataConnectConfig from './dataConnectConfig'
import ColumnConfig from './columnConfig'
import OtherConfig from './otherConfig'
import './contentCreate.less'
const { Content } = Layout
const Step = Steps.Step

class DataSourceCreateContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            mode: props.params.code && props.params.code==='create'?'create':'modify',
            type: props.params.type,
            code: props.params.code,
            tab: props.params.tab,
            // current: ['base', 'column', 'access', 'other'].indexOf(props.match.params.tab)
            current: ['base', 'column', 'other'].indexOf(props.params.tab),
        }
    }

    next() {
        const { type, current } = this.state;
        this.setState({ current: current + 1 });
        // let step = ['base', 'column', 'access', 'other'][current + 1];
        let step = ['base', 'column', 'other'][current + 1];
        this.props.dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/create/' + step })
    }

    prev() {
        const { type, current } = this.state;
        this.setState({ current: current - 1 });
        // let step = ['base', 'column', 'access', 'other'][current - 1];
        let step = ['base', 'column', 'other'][current - 1];
        this.props.dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/create/' + step })
    }

    render() {
        const { dispatch, dataSourceDetail, dataConnect } = this.props;
        const { type, mode, current } = this.state;

        const steps = [{
            tabName: 'base',
            title: type === 'database' ? '选择数据链接' : '选择文件',
            content: <DataConnectConfig mode={mode} />,
        }, {
            tabName: 'column',
            title: '数据列配置',
            content: <ColumnConfig mode={mode} />,
        }, {
            tabName: 'other',
            title: '完成',
            content: <OtherConfig mode={mode} />,
        }];

        return (
            <Layout className='content-datasourcecreate'>
                <Content className='content'>
                    <div className='datasource-steps-container'>
                        <Steps className='steps-body' current={current}>
                            {steps.map((item,index) => <Step key={'step-' + index} title={item.title} />)}
                        </Steps>
                        <div className="steps-content">
                            {steps[current].content}
                        </div>
                        <div className="steps-action">
                            <div className='steps-buttons'>
                                {
                                    current > 0 && (
                                    <Button onClick={() => this.prev()}>
                                        上一步
                                    </Button>)
                                }
                                {
                                    current < steps.length - 1
                                    && <Button disabled={
                                        // 第一步：没有选择数据连接或没有上传文件或上传文件有误
                                        ( current === 0 && ( ( type === 'database' && !dataSourceDetail.connectCode ) || ( type === 'file' && +1 === 2) ) ) ||
                                        // 第二步：数据列为空或者数据对象有变更
                                        (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0 || dataSourceDetail.targetDirty))
                                    } type="primary" onClick={() => this.next()}>下一步</Button>
                                }
                                {
                                    current === steps.length - 1
                                    && <Button disabled={
                                        !dataSourceDetail.name || 
                                        !dataConnect.selected ||
                                        (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0)
                                    } type="primary" onClick={() => {
                                        dispatch({ type: 'dataSource/remoteAdd' })
                                    }}>完成</Button>
                                }
                            </div>
                        </div>
                    </div>
                </Content>
            </Layout>
        )
    }
}

export default connect(({ dataSourceDetail, dataConnect }) => ({ dataSourceDetail, dataConnect }))(DataSourceCreateContent);