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

;
import './ExampleLayerPage.css'
import {Button} from "antd";

export default class ExampleToolsPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>'
        };
    }

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

    addDemLayer() {
        this.mapFunction.updateDemLayer(this.state.terrainUrl, true);
    }

    addDefaultLayer() {
        this.mapFunction.showDefaultLayer();
    }


    render() {
        return (
            <div className={"example"}>
                <h3>工具栏控制</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={e => {
                        this.mapFunction = e
                    }} mapRef={this}
                         addressSearchUrl="http://192.168.0.251:8090/iserver/services/addressmatch-Address/restjsr/v1/address/geocoding"
                         terrainUrl="http://192.168.0.251:8090/iserver/services/map-world/rest/maps/World"
                         terrainUrlIsSct={true}
                         showDefaultLayer={false}
                         global={[100, 30.5, 101, 31.5]}
                        // baseImageUrl="https://www.supermapol.com/realspace/services/map-scyx/rest/maps/China_DARK"
                    />
                </div>
                <div className={"button_wrapper"}>

                    <Button type="primary" onClick={this.addDefaultLayer.bind(this)}>添加默认图层</Button>
                    <br/>
                    <span>地形服务地址：</span>
                    <input type="text" placeholder={'请输入地形服务地址'}
                           value={this.state['terrainUrl']}
                           onChange={(v) => this.setState({terrainUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addDemLayer.bind(this)}>添加地形</Button>
                    <br/>
                    <span>视角工具：</span>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.flyGlobal()}>全图</Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.enableTilt()}>启用旋转和倾斜
                    </Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.disableTilt()}>禁用旋转和倾斜
                    </Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.setToHeading()}>回归到当前视角
                    </Button>
                    <br/>
                    <span>常用工具：</span>
                    <Button type="primary" onClick={() => this.mapFunction.fullScreen()}>全屏</Button>
                    <Button type="primary" onClick={() => this.mapFunction.exitFullScreen()}>退出全屏</Button>
                    <Button type="primary" onClick={() => this.mapFunction.measureDistance()}>测量距离</Button>
                    <Button type="primary" onClick={() => this.mapFunction.measureArea()}>测量面积</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doAddressSearch()}>打开地名查询面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doLocation()}>打开定位面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doHighLight()}>打开高亮闪烁面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doPrint()}>打开打印面板</Button>
                    {/*<Button type="primary" onClick={() => this.mapFunction.doCarLamp()}>打开动态模型面板</Button>*/}
                    {/*<Button type="primary" onClick={() => this.mapFunction.doFlyRoute()}>打开飞行面板</Button>*/}
                    <br/>
                    <span>分析功能：</span>
                    <Button type="primary" onClick={() => this.mapFunction.doProfile()}>打开剖面分析面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doAngleSlope()}>打开坡度分析面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doSightLine()}>打开通视分析面板</Button>

                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}