import React, {PureComponent} from 'react'
import './TestPage.css'

export default class TestPage extends PureComponent {
    constructor(props) {
        super(props);
        this.mapFunction = null;
        MapApiService
        this.state = {};
    }

    componentDidMount() {
        this.handleClick();
    }

    handleClick = () => {
        if (this.mapFunction) {
            let options = [];
            let option = {
                bz: true,
                bzlx: 'simple',
                text: "R:00017",
                type: "simple",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                points: [{lon: 102.73054539488224, lat: 31.005468100060593, height: 4038.60896726641}]
            };
            let option1 = {
                bz: true,
                bzlx: 'detail',
                text: "R:00017/n17/10/2019/n16:45:8/n9260.00-10400.00MHZ",
                type: "detail",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                points: [{lon: 102.70054539488224, lat: 31.000468100060593, height: 4038.60896726641}]
            };

            let option2 = {
                bz: true,
                bzlx: 'fxSimple',
                text: "P:00019",
                type: "fxSimple",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                points: [{lon: 102.76054539488224, lat: 31.000468100060593, height: 4038.60896726641}]
            };

            let option3 = {
                bz: true,
                bzlx: 'fxDetail',
                text: "P:00019/nF16-1/n美国/n16:45:56/nR:00019/nC:00019",
                type: "fxDetail",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                lon: 102.73054539488224,
                lat: 31.001068100060593,
                height: 4038.60896726641,
                points: [{
                    lon: 102.73054539488224,
                    lat: 31.001068100060593,
                    height: 4038.60896726641,
                    time: "2019-10-17 16:45:56"
                }]
            };

            let option4 = {
                kc: true,
                kclx: "dkxx",
                kcwb: "10110",
                kcgls: 1,
                kcjd: 30,
                type: "dkxx",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                points: [{lon: 102.76054539488224, lat: 31.011068100060593, height: 4038.60896726641}]
            };

            let option5 = {
                kc: true,
                kclx: 'dkgx',
                kcwb: "10110",
                kcgls: 1,
                kcjd: 30,
                type: "dkgx",
                returnHeight: true,
                useModify: false,
                showHelperPoint: false,
                clearBefore: false,
                points: [{lon: 102.78054539488224, lat: 31.015068100060593, height: 4038.60896726641}]
            };

            options.push(option);
            options.push(option1);
            options.push(option2);
            options.push(option3);
            options.push(option4);
            options.push(option5);
            this.mapFunction.draw(options);
        }
    };

    render() {
        return (
            <div className="frame">
                <GIS refs={e => {
                    this.mapFunction = e
                }} mapRef={this}/>
            </div>
        )
    }
}