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

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

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

import './index.css';
import {SHOW_FC_SCHEMA, SHOW_FC_CONFIG, SEARCH_SCHEMA, SHOW_CLOUD, SHOW_WXCONTENT} from "../../../gql";
import {request} from 'graphql-request'
import {graphqlUrl} from "../../../config";

const tabListNoTitle = [{
    key: 'tencent',
    tab: 'Tencent',
}];

// [{
//     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: '',
            defalutName: '',
            tencentFC: '',
            aliyunFC: '',
            amazonFC: '',
            schemaID: props.schemaID,
            configID: props.configID,
            kind: ''
        };
        this.fetch();
    }

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



    fetch = () => {
        if (this.state.schemaID !== '' && this.state.schemaID !== undefined) {
            request(graphqlUrl, SHOW_FC_SCHEMA, {schema_id: this.state.schemaID}).then(
                // 根据 schemaID 查询 fc 是否成功
                data => {
                    request(graphqlUrl, SEARCH_SCHEMA, {id: this.state.schemaID}).then(
                        // 根据 schemaID 查询 schemaName
                        _data => {
                            if (data.fc_by_props.length === 0) {
                                // 如果没有 fc，根据 userID 查 cloudId
                                request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
                                    __data => {
                                        // 如果 user 未设置 cloudID
                                        if(__data.cloud_by_props.length === 0) {
                                            this.setState({
                                                tencentFC: false,
                                                aliyunFC: false,
                                                amazonFC: false,
                                                defalutName: _data.schema_by_id.schemaName,
                                                show: true,
                                                kind: 'graphql'
                                            });
                                        } else {
                                            __data.cloud_by_props.forEach(cloud => {
                                                switch (cloud.cloudName) {
                                                    case 'tencent':
                                                        this.setState({
                                                            tencentFC: false,
                                                            tencentCloudID: cloud.id,
                                                            defalutName: _data.schema_by_id.schemaName,
                                                            show: true,
                                                            kind: 'graphql'
                                                        });
                                                        break;
                                                    case 'aliyun':
                                                        this.setState({
                                                            aliyunFC: false,
                                                            aliyunCloudID: cloud.id,
                                                            defalutName: _data.schema_by_id.schemaName,
                                                            show: true,
                                                            kind: 'graphql'
                                                        });
                                                        break;
                                                    case 'amazon':
                                                        this.setState({
                                                            amazonFC: false,
                                                            amazonCloudID: cloud.id,
                                                            defalutName: _data.schema_by_id.schemaName,
                                                            show: true,
                                                            kind: 'graphql'
                                                        });
                                                        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,
                                                kind: 'graphql'
                                            });
                                            break;
                                        case 'aliyun':
                                            this.setState({
                                                aliyunFC: true,
                                                aliyunCloudID: cloud.cloud_id.id,
                                                show: true,
                                                kind: 'graphql'
                                            });
                                            break;
                                        case 'amazon':
                                            this.setState({
                                                amazonFC: true,
                                                amazonCloudID: cloud.cloud_id.id,
                                                show: true,
                                                kind: 'graphql'
                                            });
                                            break;
                                        default:
                                            break;
                                    }
                                })
                            }
                        }
                    );
                }
            );
        } else {
            request(graphqlUrl, SHOW_FC_CONFIG, {wxConfig_id: this.state.configID}).then(
                // 根据 configID 查询 fc 是否成功
                data => {
                    request(graphqlUrl, SHOW_WXCONTENT, {id: this.state.configID}).then(
                        // 根据 configID 查询 appName
                        _data => {
                            if (data.fc_by_props.length === 0) {
                                // 如果没有 fc，根据 userID 查 cloudId
                                request(graphqlUrl, SHOW_CLOUD, {user_id: this.props.userID}).then(
                                    __data => {
                                        // 如果 user 未设置 cloudID
                                        if(__data.cloud_by_props.length === 0) {
                                            this.setState({
                                                tencentFC: false,
                                                aliyunFC: false,
                                                amazonFC: false,
                                                defalutName: _data.wxConfig_by_id.appName,
                                                show: true,
                                                kind: 'wx'
                                            });
                                        } else {
                                            __data.cloud_by_props.forEach(cloud => {
                                                switch (cloud.cloudName) {
                                                    case 'tencent':
                                                        this.setState({
                                                            tencentFC: false,
                                                            tencentCloudID: cloud.id,
                                                            defalutName: _data.wxConfig_by_id.appName,
                                                            show: true,
                                                            kind: 'wx'
                                                        });
                                                        break;
                                                    case 'aliyun':
                                                        this.setState({
                                                            aliyunFC: false,
                                                            aliyunCloudID: cloud.id,
                                                            defalutName: _data.wxConfig_by_id.appName,
                                                            show: true,
                                                            kind: 'wx'
                                                        });
                                                        break;
                                                    case 'amazon':
                                                        this.setState({
                                                            amazonFC: false,
                                                            amazonCloudID: cloud.id,
                                                            defalutName: _data.wxConfig_by_id.appName,
                                                            show: true,
                                                            kind: 'wx'
                                                        });
                                                        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,
                                                kind: 'wx'
                                            });
                                            break;
                                        case 'aliyun':
                                            this.setState({
                                                aliyunFC: true,
                                                aliyunCloudID: cloud.cloud_id.id,
                                                show: true,
                                                kind: 'wx'
                                            });
                                            break;
                                        case 'amazon':
                                            this.setState({
                                                amazonFC: true,
                                                amazonCloudID: cloud.cloud_id.id,
                                                show: true,
                                                kind: 'wx'
                                            });
                                            break;
                                        default:
                                            break;
                                    }
                                })
                            }
                        }
                    );
                }
            );
        }
    };

    render() {
        const contentListNoTitle = {
            tencent: <TencentConfig cloudID={this.state.tencentCloudID} fc={this.state.tencentFC} defalutName={this.state.defalutName} userID={this.props.userID} kind={this.state.kind} trialcase={this.props.trialcase}/>,
            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]
                                :
                                <Spin/>
                        }
                    </Card>
                </div>
            </div>
        )
    }
}

export default Deploy;