import React, {PureComponent} from "react";
import {Button} from "antd";

export default class ProfileTool extends PureComponent {

    constructor(props) {
        super(props);
        this.layers = null;
        this.positions = [];
        this.handlerLine = undefined;
        this.mapApiService = this.props.mapApiService;
        this.viewer = this.props.mapApiService.viewer;
    }

    componentDidMount() {
        // 订阅事件
        if (!this.handlerLine) {
            this.handlerLine = this.mapApiService.getMeasureHandler();
            //注册测距功能事件
            this.handlerLine.measureEvt.addEventListener(function (result) {
                this.positions = result.positions;
                let dis = Number(result.distance);
                let distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
                this.handlerLine.disLabel.text = '距离:' + distance;
                if (this.positions.length > 2) {
                    this.positions = [this.positions[0], this.positions[1]];
                    this.handlerLine.deactivate();
                }
            }.bind(this));
            this.handlerLine.activeEvt.addEventListener(function (isActive) {
                if (isActive) {
                    this.viewer.enableCursorStyle = false;
                    this.viewer._element.style.cursor = '';
                } else {
                    this.viewer.enableCursorStyle = true;
                    if (this.positions.length == 2) {
                        this.doSampling();
                    }
                }
            }.bind(this));
        }
    }

    componentWillUnmount() {

    }

    closeEvent() {
        this.clear();
        this.props.callBack(null);
        this.props.closeEvent();
    }

    callBack(data) {
        this.props.callBack(data);
    }

    doSampling() {
        if (this.positions && this.positions.length == 2) {
            this.callBack(this.positions);
        }
    }

    draw() {
        this.positions = [];
        this.handlerLine.activate();
    }


    /*
     * 清除
     */
    clear() {
        this.handlerLineClear();
        this.callBack(null);
        this.viewer.enableCursorStyle = true;
    }

    handlerLineClear() {
        this.handlerLine && this.handlerLine.clear();
    }


    render() {
        return (
            <div className="param-container">
                <Button type="primary" id="addViewPoint" className="button black" onClick={() => {
                    this.draw();
                }}>绘制
                </Button>
                <Button type="primary" id="addTargetPoint" className="button black" onClick={() => {
                    this.clear();
                }}>清除
                </Button>
                <Button type="primary" id="clear" className="button black" onClick={() => {
                    this.closeEvent();
                }}>关闭
                </Button>
            </div>
        );
    }
}