import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
import {Button} from "antd";


export default class ExampleGetPointsPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
        };
    }

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

    async getPoints() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "0",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(`lon: ${c.lon}, lat: ${c.lat}, height: ${c.height}`);
            this.mapFunction.mapApiService.removeDraw(p.code);
        })
    }

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </div>
                <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}