import React from 'react'
import { connect } from 'dva'
import { Layout, Steps, Button, Tabs } from 'antd'
import DataConnectConfig from './dataConnectConfig'
import BaseConfig from './baseConfig'
import ColumnConfig from './columnConfig'
import AccessConfig from './accessConfig'
import OtherConfig from './otherConfig'
import './dataSourceDetail.less'
const { Content } = Layout
const Step = Steps.Step
const TabPane = Tabs.TabPane

class DataSourceDetail extends React.Component {

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

    componentDidMount() {
        const { dispatch } = this.props;
        const { type, code } = this.props.match.params;
        
        if(code !== 'create') {
            dispatch({ type: 'dataSource/remoteDetail', code: code })
            dispatch({ type: 'dataSourcePolicy/fetchList', dataSourceCode: code });
        }else {
            dispatch({ type: 'dataSource/setNewModelFields', fields: [
                { name: 'type', value: type },
                { name: 'code', value: code }
            ] });
        }
    }

    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: '/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: '/datasource/' + type + '/create/' + step })
    }

    render() {
        const { dispatch, dataSource, dataConnect } = this.props;
        const { type, mode, code, tab, current } = this.state;
        const steps = [{
            tabName: 'base',
            title: type === 'database' ? '数据连接配置' : '文件选择',
            content: <DataConnectConfig mode={mode} />
        }, {
            tabName: 'column',
            title: '数据列配置',
            content: <ColumnConfig mode={mode} />
        }, {
        //     tabName: 'access',
        //     title: '数据开放策略',
        //     content: <AccessConfig mode={mode} />
        // }, {
            tabName: 'other',
            title: '完成',
            content: <OtherConfig mode={mode} />
        }];
        const tabs = [{
            tabName: 'base',
            title: '属性配置',
            content: <BaseConfig mode={mode} />
        }, {
            tabName: 'column',
            title: '数据列配置',
            content: <ColumnConfig mode={mode} />
        }, {
            tabName: 'access',
            title: '数据开放策略',
            content: <AccessConfig mode={mode} />
        }];
        return (
            <Layout className='layout-datasource-detail'>
                <Content className='content'>
                    {mode === 'create' ? (<div>
                        <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">
                            {
                                current > 0 && (
                                <Button onClick={() => this.prev()}>
                                    上一步
                                </Button>)
                            }
                            {
                                current < steps.length - 1
                                && <Button disabled={
                                    ( current === 0 && ( ( type === 'database' && !dataSource.newOne.address ) || ( type === 'file' && +1 === 2) ) ) ||
                                    (current === 1 && (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0))
                                } type="primary" onClick={() => this.next()}>下一步</Button>
                            }
                            {
                                current === steps.length - 1
                                && <Button disabled={
                                    !dataSource.newOne.name || 
                                    !dataConnect.selected ||
                                    (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0)
                                } type="primary" onClick={() => {
                                    dispatch({ type: 'dataSource/remoteAdd' })
                                }}>完成</Button>
                            }
                        </div>
                    </div>) : (
                        <Tabs activeKey={tab} type="card"
                            onChange={(key) => {
                                dispatch({ type: 'main/redirect', path: '/datasource/' + type + '/' + code + '/' + key })
                                this.setState({
                                    tab: key,
                                    current: ['base', 'column', 'access', 'other'].indexOf(key)
                                })
                            }}
                            tabBarExtraContent={
                                current === 1 ? (<Button disabled={ ( ( type === 'database' && !dataSource.newOne.name) || ( type === 'file' && +1 === 2) ) ||
                                    (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0)
                                } type="primary" onClick={() => {
                                    dispatch({ type: 'dataSource/remoteModify' });
                                }}>保存修改</Button>) : null
                            }
                        >
                            {tabs.map((item, index) => {
                                return <TabPane className='tab-datasource' key={item.tabName} tab={item.title}>
                                    {item.content}
                                </TabPane>
                            })}
                        </Tabs>
                    )}
                </Content>
            </Layout>
        )
    }
}

function mapStateToProps({ present: { dataSource, dataConnect } }) {
    return { dataSource, dataConnect }
}

export default connect(mapStateToProps)(DataSourceDetail);