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, SHOW_CLOUD} 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: '',
            schemaName: '',
            tencentFC: '',
            aliyunFC: '',
            amazonFC: '',
            schemaID: props.schemaID
        };
        this.fetch();
    }

    componentWillReceiveProps(next) {
        this.setState({
            schemaID: next.schemaID
        }, this.fetch)
    }

    fetch = () => {
        request('http://123.206.193.98:3000/graphql', SHOW_FC, {schema_id: this.state.schemaID}).then(
            // 根据 schemaID 查询 fc 是否成功
            data => {
                request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.state.schemaID}).then(
                    // 根据 schemaID 查询 schemaName
                    _data => {
                        if (data.fc_by_props.length === 0) {
                            // 如果没有 fc，根据 userID 查 cloudId
                            request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.props.userID}).then(
                                __data => {
                                    __data.cloud_by_props.forEach(cloud => {
                                        switch (cloud.cloudName) {
                                            case 'tencent':
                                                this.setState({
                                                    tencentFC: false,
                                                    tencentCloudID: cloud.id,
                                                    schemaName: _data.schema_by_id.schemaName,
                                                    show: true
                                                });
                                                break;
                                            case 'aliyun':
                                                this.setState({
                                                    aliyunFC: false,
                                                    aliyunCloudID: cloud.id,
                                                    schemaName: _data.schema_by_id.schemaName,
                                                    show: true
                                                });
                                                break;
                                            case 'amazon':
                                                this.setState({
                                                    amazonFC: false,
                                                    amazonCloudID: cloud.id,
                                                    schemaName: _data.schema_by_id.schemaName,
                                                    show: true
                                                });
                                                break;
                                            default:
                                                break;
                                        }
                                    })
                                }
                            );
                        } else {
                            // 如果有 fc, 则获取 cloudID
                            data.fc_by_props.forEach(cloud => {
                                switch (cloud.cloud_id.cloudName) {
                                    case 'tencent':
                                        this.setState({
                                            tencentFC: true,
                                            tencentCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    case 'aliyun':
                                        this.setState({
                                            aliyunFC: true,
                                            aliyunCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    case 'amazon':
                                        this.setState({
                                            amazonFC: true,
                                            amazonCloudID: cloud.cloud_id.id,
                                            show: true
                                        });
                                        break;
                                    default:
                                        break;
                                }
                            })
                        }
                    }
                );
            }
        );
    };


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

        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;