import React, {Component} from 'react'
import './ExamplePage.css'
import "./CommonExample.css";
import {GIS} from "iclient3d-plot-diy";

;
import ProfileTool from "./profile/ProfileTool";
import ProfilePage from "./profile/ProfilePage";

export default class ExampleCustomToolbarPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            profileVisible: false,
            profileResult: null,
            htmlString: '<h3>正在加载中...</h3>'
        };
    }

    toolbars = [
        'global',
        'fullscreen',
        'measureDistance',
        'measureArea',
        'seethrough',
        {
            key: 'profile',
            icon: 'profile',
            title: '剖面分析',
            titleI18n: 'profile',
            handleClick: () => {
                this.doProfile();
            }
        },
    ];

    componentDidMount() {
        fetch('./example/ExampleCustomToolbarPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });

        //启用旋转和倾斜
        this.mapFunction.mapApiService.enableTilt();
    }

    doProfile() {
        this.profileVisible = !this.profileVisible;
        this.setState({
            profileVisible: this.profileVisible
        })
    }

    callProfile(profileResult) {
        this.setState({
            profileResult: profileResult
        })
    }

    render() {
        return (
            <div className={"example"}>
                <h3>分组数据展示</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         mapRef={this}
                         showDefaultLayer={true}
                         toolbars={this.toolbars}
                    />
                </div>
                {this.state.profileVisible &&
                    <ProfileTool
                        mapApiService={this.mapFunction.mapApiService}
                        closeEvent={this.doProfile.bind(this)}
                        i18n={this.i18n}
                        callBack={this.callProfile.bind(this)}
                    />}
                {this.state.profileResult &&
                    <ProfilePage
                        mapApiService={this.mapFunction.mapApiService}
                        profileResult={this.state.profileResult}
                        i18n={this.i18n}
                        closeEvent={this.callProfile.bind(this)}
                    />}
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}