import React, { Component } from 'react';
import { Marker, /*Popup, */Tooltip, withLeaflet } from "react-leaflet";
import { Icon } from 'leaflet';

class MoveableMarker extends Component{
    render(){
        return <>
            <Marker position={[this.props.data.lat, this.props.data.lng] } icon={new Icon({
                // iconUrl: window.EDITOR_URL + "img/move.png",
                iconUrl: window.EDITOR_URL + this.props.data.src,
                iconSize: [20,20],
                iconAnchor: [10,10]
            })} name={`${this.props.data.reader_name}-${this.props.data.reader_id}`} key={this.props.key}>
                {this.props.data.info &&
                    <Tooltip
                        // position=()
                    >
                        {/* <span>{`卡号：${this.props.data.card} 与基站距离：${this.props.data.distance}米`}</span><br/>
                        <span>{`经度：${this.props.data.lng} 纬度：${this.props.data.lat}`}</span><br/>
                        <span>{`定位基站：${this.props.data.reader_name}-${this.props.data.reader_id}`}</span><br/>
                        <span>{`定位时间：${this.props.data.locTime}`}</span> */}
                        {this.props.data.info}
                    </Tooltip>
                }
                {/* <Popup>
                    <span>{}</span>
                    <button onClick={() => {console.log(`marker-${this.props.data.id}`)}}>点击</button>
                </Popup> */}
            </Marker>;
        </>
    }
}

export default withLeaflet(MoveableMarker);