import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Card, Layout} from 'antd';

import TencentDeploy from './TencentDeploy';
import AliyunDeploy from './AliyunDeploy';
import AmazonDeploy from './AmazonDeploy';
import {getCookie} from "../../../cookie";

const {Content} = Layout;


const tabListNoTitle =
    [{
        key: 'tencent',
        tab: <FormattedMessage id='Tencent'/>,
    }, {
        key: 'aliyun',
        tab: <FormattedMessage id='Aliyun'/>,
    }, {
        key: 'amazon',
        tab: <FormattedMessage id='AWS'/>,
    }];


class MyDeploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cloud: 'tencent',
            userID: '',
            url: ''
        };
    }

    componentWillMount() {
        let userID = getCookie('user_id') || this.state.userID;
        if (userID !== undefined && userID !== '') {
            this.setState({
                userID
            });
        }

        if(this.props.location && this.props.location.state) {
            this.setState({
                url: this.props.location.state.url
            })
        }
    }

    render() {
        let {url, userID} = this.state;
        const contentListNoTitle = {
            tencent: <TencentDeploy userID={userID} url={url}/>,
            aliyun: <AliyunDeploy userID={userID} url={url}/>,
            amazon: <AmazonDeploy userID={userID} url={url}/>,
        };

        return (
            <div>
                <Layout style={{ padding: '24px',minHeight:'300px' }}>
                    <Content style={{ background: '#fff' }}>
                        {
                            // 登录用户与非登录用户区别对待
                            this.state.userID === ''?
                                <TencentDeploy userID={userID} url={url}/>
                                :
                                <Card
                                    style={{width: '100%'}}
                                    tabList={tabListNoTitle}
                                    activeTabKey={this.state.cloud}
                                    onTabChange={(cloud) => {
                                        this.setState({
                                            cloud
                                        })
                                    }}
                                >
                                    {contentListNoTitle[this.state.cloud]}
                                </Card>
                        }

                    </Content>
                </Layout>
            </div>

        )
    }
}

export default MyDeploy;