import React, {Component} from 'react';

import {Layout, Menu} from 'antd';

import {getIdUrl} from '../../config'

import WxConfig from "./wxConfig/WxConfig";
import WxDeploy from "../common/deploy/Deploy";
import WxResult from './wxResult/WxResult';
import axios from 'axios';
import {FormattedMessage} from 'react-intl';
axios.defaults.withCredentials = true;

const {Content} = Layout;

class WxUserCreate extends Component {
    constructor() {
        super();
        this.state = {
            menuLevel3: "wechat-config",
            userID: '',
            getIdUrl
        }
    }

    componentWillMount() {
        let _this = this;
        axios.get(this.state.getIdUrl)
            .then((res) => {
                if (res.data !== '') {
                    _this.setState({
                        userID: res.data
                    })
                }
            })
            .catch(function (err) {
                console.log(err);
            });
    }

    switchMenu = (menuName, e) => {
        this.setState({
            [menuName]: e.key,
        });
    };

    render() {
        let configID = this.props.history.location.state ? this.props.history.location.state.configID : "ecommerce_wxConfigID";
        let appName = this.props.history.location.state ? this.props.history.location.state.appName : "ecommerce";
        return (
            <div>
                <Menu
                    mode="horizontal"
                    defaultSelectedKeys={['wechat-config']}
                    style={{
                        padding: '0 24px',
                        position: 'fixed',
                        width: '100%',
                        zIndex: '1',
                        lineHeight: '50px',
                        fontWeight: 600
                    }}
                    onClick={(e) => this.switchMenu('menuLevel3', e)}
                    selectedKeys={[this.state.menuLevel3]}
                >
                    <Menu.Item key="wechat-config"><FormattedMessage id="config"/></Menu.Item>
                    <Menu.Item key="wechat-deploy"><FormattedMessage id="deploy"/></Menu.Item>
                    <Menu.Item key="wechat-result"><FormattedMessage id="result"/></Menu.Item>
                </Menu>

                <Layout style={{padding: '24px', zIndex: '0'}}>
                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
                        {(() => {
                            switch (this.state.menuLevel3) {
                                case 'wechat-config':
                                    return <WxConfig history={this.props.history} location={this.props.location}/>;
                                case 'wechat-deploy':
                                    return <WxDeploy trialcase={false} userID={this.state.userID} configID={configID}/>;
                                case 'wechat-result':
                                    return <WxResult/>;
                                default:
                                    return <WxConfig/>
                            }
                        })()}
                    </Content>
                </Layout>
            </div>
        )
    }
}

export default WxUserCreate;