import React from "react";
import { inject, observer } from "mobx-react";
import { Button} from "antd";
import { toJS } from "mobx";
import {
    WeaRightMenu,
    WeaDialog,
    WeaLocaleProvider,
} from "ecCom";

import './style/index.css';
import TestForm from "./TestForm";

const getLabel = WeaLocaleProvider.getLabel;

@inject("dataShowStore")
@observer
export default class PreviewDialog extends React.Component {

    getLastStep = () =>{
        const {dataShowStore} = this.props;
        dataShowStore.initTestFrom();
        dataShowStore.testForm.reset();
        dataShowStore.setState({showsSqlTextFormDialog: true});
    };

    getRightMenu = () => {
        return [];
    };


    closeDialog = ()=> {
        const {
            dataShowStore,
        } = this.props;

        dataShowStore.initTestFrom();
        dataShowStore.testForm.reset();
        dataShowStore.initSqlTestForm();
    }

    render() {
        const {dataShowStore, showDialog} = this.props;
        const {status} = dataShowStore;
        const {dataShowFormHiddenFields,showIframe,showTextFormButton} = toJS(status);
        let show = showIframe?`block`:`none`;
        let url = showIframe && dataShowFormHiddenFields ? `${window.ecologyContentPath || ""}/spa/inte/static/index.html#/main/inte/tab/${dataShowFormHiddenFields.id}?from=1` : ``;

        let buttons = showTextFormButton
          ? [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ps0mw1@integrationDatashowPreviewDialogButtonLastStep`} type="primary" onClick={() => {this.getLastStep()}}>{getLabel('1876','上一步') }</Button>]
          : [];
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@l2sorz`}
                title={getLabel( '511478' ,'数据展现集成预览')}
                moduleName="integration"
                visible={showDialog}
                hasScroll={true}
                style={{width: 780, height: 520}}
                onCancel={this.closeDialog}
                buttons={buttons}
                moreBtn={{
                    datas : this.getRightMenu(),
                    collectParams: []
                }}
            >

                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ju6kzw`} datas={this.getRightMenu()}  collectParams={[]}>
                    <TestForm ecId={`${this && this.props && this.props.ecId || ''}_TestForm@w6pvfh`} />
                    <div style={{width: 780, height: 420, display:show}}>
                        <iframe id="mainContent" style={{width: '100%', height: '100%'}} src={url}></iframe>
                    </div>
                </WeaRightMenu>
            </WeaDialog>
        )
    }

}