import React from 'react'
import { connect } from 'dva'
import { Modal, Form, Select, Button, Icon } 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,
            selectedDataConnectCode: props.currentDataConnect ? props.currentDataConnect.code : null,
            loading: false,
        }
    }

    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} title={l.name}>{l.name}</SelectOption>);
    }

    render() {
        const { visibleBox, hideBox, dispatch, currentDashboardCode } = this.props;
        const { currentDataConnectCode, selectedDataConnectCode, loading } = this.state;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 12 },
        }

        return <Modal
            className='copy-box'
            title={'复制报表'}
            visible={visibleBox}
            onCancel={hideBox}
            footer={
                <div>
                    <Button onClick={hideBox}>取 消</Button>
                    <Button disabled={loading} type='primary' onClick={() => {
                        this.setState({
                            loading: true
                        });
                        dispatch({ type: 'dashboard/copy', dashboardCode: currentDashboardCode, dataConnectCode: selectedDataConnectCode }).then(() => {
                            this.setState({
                                loading: false
                            }, hideBox);
                        });
                    }}>
                        {loading ? (<Icon type='loading' />) : ''}
                        {loading ? '复制中' : '确 定'}
                    </Button>
                </div>
            }
            maskClosable={false}
            destroyOnClose={true}
        >
            <Form>
                <FormItem
                    label='切换数据链接'
                    {...formItemLayout}
                >
                    <Select
                        allowClear
                        disabled={!currentDataConnectCode}
                        placeholder={currentDataConnectCode ? '不切换...' : '无需选择数据链接'}
                        onChange={(value) => {
                            if(!value) {
                                this.setState({
                                    selectedDataConnectCode: currentDataConnectCode
                                })
                            }else {
                                this.setState({
                                    selectedDataConnectCode: value
                                })
                            }
                        }}
                    >
                        { this.generateOption() }
                    </Select>
                </FormItem>
                <span>{`将生成报表、报表包含的图表${selectedDataConnectCode !== currentDataConnectCode ? '，以及切换数据链接后的数据源' : ''}副本。`}</span>
            </Form>
        </Modal>
    }
}

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