online/src/components/common/deploy/Deploy.jsx

import React, {Component} from 'react';
import {Card, Input} from 'antd';

import TencentConfig from './tencent/TencentConfig';
import AliConfig from './ali/AliConfig';
import AmazonConfig from './amazon/AmazonConfig';
import HuaweiConfig from './huawei/HuaweiConfig';

import './index.css';
import {SHOW_FC, SEARCH_SCHEMA} from "../../gql";
import {request} from 'graphql-request'

const tabListNoTitle = [{
    key: 'tencent',
    tab: 'Tencent',
}, {
    key: 'aliyun',
    tab: 'Aliyun',
}, {
    key: 'amazon',
    tab: 'AWS',
}];


class Deploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            cloud: 'tencent',
            tencentCloudID: '',
            aliyunCloudID: '',
            amazonCloudID: '',
            // todo: 该schema应该由props传入，无论是哪一层，反正不是这一层。(路由传入吧)
            // 有fc的schema -- 测试数据
            // schemaID: 'schema_1542243424669_92094965',
            // 无fc的schema -- 测试数据
            schemaID: 'schema_1542967129456_05958413',
            schemaName: ''
        };
        request('http://123.206.193.98:3000/graphql', SHOW_FC, {schema_id: this.state.schemaID}).then(
            data => {
                request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.state.schemaID}).then(
                    _data => {
                        data.fc_by_props.length === 0 ?
                            this.setState({
                                show: true,
                                schemaName: _data.schema_by_id.schemaName
                            })
                            :
                            data.fc_by_props.forEach(cloud => {
                                switch (cloud.cloud_id.cloudName) {
                                    case 'tencent':
                                        this.setState({
                                            tencentCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    case 'aliyun':
                                        this.setState({
                                            aliyunCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    case 'amazon':
                                        this.setState({
                                            amazonCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    default:
                                        break;
                                }
                            })
                    }
                );
            }
        );
    }

    switchConfig = (label) => {
        return (e) => {
            this.setState({
                [label]: e.target.value
            })
        };
    };

    render() {
        const contentListNoTitle = {
            tencent: <TencentConfig cloudID={this.state.tencentCloudID} schemaName={this.state.schemaName}/>,
            aliyun: <AliConfig cloudID={this.state.aliyunCloudID} schemaName={this.state.schemaName}/>,
            amazon: <AmazonConfig cloudID={this.state.amazonCloudID} schemaName={this.state.schemaName}/>,
        };

        let userID = this.props.userID;


        return (
            <div>
                <div>
                    <Card
                        style={{width: '100%'}}
                        tabList={tabListNoTitle}
                        activeTabKey={this.state.cloud}
                        onTabChange={(cloud) => {
                            this.setState({
                                cloud
                            })
                        }}
                    >
                        {
                            this.state.show ?
                            contentListNoTitle[this.state.cloud]
                            :
                            "waiting..."
                        }
                    </Card>
                </div>
            </div>
        )
    }
}

export default Deploy;