import React from 'react'
import { connect } from 'dva'
import { Modal, Form, Select } from 'antd'
const { Item: FormItem } = Form
const { Option: SelectOption } = Select

class CopyBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentDataConnectCode: props.currentDataConnect ? props.currentDataConnect.code : null
        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'dataConnect/fetchList' });
    }

    generateOption() {
        const { dataConnect } = this.props;
        const { currentDataConnectCode } = this.state;
        const { list } = dataConnect;

        return list.filter((l) => l.code !== currentDataConnectCode).map((l) => <SelectOption key={l.code} value={l.code}>{l.name}</SelectOption>);
    }

    render() {
        const { visibleBox, hideBox, dispatch, currentDashboardCode } = this.props;
        const { currentDataConnectCode } = this.state;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 8 },
        }

        return <Modal
            className='copy-box'
            title={'复制报表'}
            visible={visibleBox}
            onCancel={hideBox}
            onOk={() => {
                dispatch({ type: 'dashboard/copy', dashboardCode: currentDashboardCode, dataConnectCode: currentDataConnectCode }).then(() => {
                    hideBox();
                });
            }}
            maskClosable={true}
            destroyOnClose={true}
        >
            <div>复制对象包括报表和报表包含的图表</div>
            <Form>
                <FormItem
                    label='切换数据源'
                    {...formItemLayout}
                >
                    <Select
                        disabled={!currentDataConnectCode}
                        placeholder={currentDataConnectCode ? '请选择...' : '无需选择数据源'}
                        onChange={(value) => {
                            this.setState({
                                currentDataConnectCode: value
                            })
                        }}
                    >
                        { this.generateOption() }
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    }
}

export default connect(({ present: { dataConnect } }) => ({ dataConnect }))(CopyBox)