import React, { PureComponent, useState, useRef } from 'react’
import { Mapbox, InnerMap } from ‘./style’
// import Example from './position’
import { Map, Marker, Geolocation } from ‘react-amap’;
import axios from 'axios’
import HeaderTinyPng from './header’
import LeftMenu from '…/leftMenu’
import RightMenu from '…/rightMenu’
import './position.css’
import { Button } from ‘element-react’;

class Homepage extends PureComponent {
constructor( props ){
super()
this.state= {
getDatas: [],
gdkey: ‘0d9a2cbac23306d5a86c1ade7d84d3af’,
lenarr: [],
center: { longitude: 121.061411, latitude: 31.376044 },
everPoint: [],
transDates:[],
elements:[],
}
// console.log(this.state.getDatas)
}

componentWillMount = () => {
    axios.get('http://218.4.86.196:9193/bike/bigScreen/getList?stationNo=&lockStatus=')
    .then( (data)=>{
        // console.log(data.data.data)
        let ele = data.data.data;
        let forEachData = [];
        // console.log(ele)
        const allmarker = [];
        const normarker = [];
        const faultmarler = [];
        const disconnectmarker = [];
        const initmarker = [];
        const emptypile = [];
        const fullpile = [];
        const emptywarning = [];
        const fullwarning = [];
        // const transportData = [];
        {
            ele.map((data,index)=>{
            //   console.log(data)
                const lon = data.stationLocationLong
                const lat = data.stationLocationLat
                const titleLoc = data.stationLocation
                    // forEachData.push( {lon,lat,titleLoc} )
                let lockStatus = data.lockStatus; 
                let lockStatusNum = Number(lockStatus)
               console.log(lockStatusNum)
               if( lockStatusNum >= 0 ){
                        allmarker.push( {lon,lat,titleLoc} )     
                    if( lockStatusNum === 0 ){
                        normarker.push( {lon,lat,titleLoc} )
                    } else if( lockStatusNum === 1 ) {
                        faultmarler.push( {lon,lat,titleLoc} )
                    } else if( lockStatusNum === 2 ){
                        disconnectmarker.push( {lon,lat,titleLoc} )
                    }else if( lockStatusNum === 3 ){
                        initmarker.push( {lon,lat,titleLoc} )
                    }else if( lockStatusNum === 4 ){
                        emptypile.push( {lon,lat,titleLoc} )
                    }else if( lockStatusNum === 5 ){
                        fullpile.push( {lon,lat,titleLoc} )
                    }else if( lockStatusNum === 6 ){
                        emptywarning.push( {lon,lat,titleLoc} )
                    }else if( lockStatusNum === 7 ){
                        fullwarning.push( {lon,lat,titleLoc} )
                    }
                 }   
              
                })
                
            }
            // console.log(normarker)
            const transportData = [allmarker,normarker,faultmarler,disconnectmarker,initmarker,emptypile,fullpile,emptywarning,fullwarning]
            this.setState({
                transDates : transportData
            })
            console.log(transportData)
            // console.log(allmarker)
            forEachData = allmarker
            this.setState({
                everPoint : forEachData,
               
            })
        // console.log( forEachData )
        // this.setState({
        //     getDatas : ele,
        // })
    } )
    .catch(()=>{
            alert('请求失败')
        }
    )

}
componentDidMount = () => {
    // console.log( Map )
    // console.log(window.AMapUI)
    const AMapUI = window.AMapUI;
    
}



render(){
    const Key = this.state.gdkey;
    const AMap = window.AMap
    return (
        <Mapbox>
            {/* <div style={{width:'100px',height:'200px',background:'red'}} onClick={ this.handlePositionCenter }></div> */}
            <HeaderTinyPng />
            <LeftMenu 
                transportDatatoson = { this.state.transDates } 
                handleRenderMarker = { this.handleRenderMarker }
            />
            <RightMenu />
            <InnerMap id='innerMap'>
                    <Map 
                        akay={ Key }
                        zoom={ 13 }
                        mapStyle = "amap://styles/dark"
                        center={ this.state.center }
                        // center = {[121.061411,31.376044]}
                    >
                        {
                            this.state.everPoint.map( (data,index)=>{
                                // console.log(data)
                                // console.log(AMap)
                                    return(
                                        <Marker key={index} title={data.titleLoc} position={[data.lon,data.lat] } />
                                    ) 
                                } )
                        }

{/* /}
{/ 自我定位 /}
{/ <Geolocation
// 是否使用高精度定位，默认:true
enableHighAccuracy={true}
// 超过10秒后停止定位，默认：5s
timeout={10000}
// 定位按钮的停靠位置
buttonPosition=“RB”
// 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
// buttonOffset={new AMap.Pixel(60, 200)}
// 定位成功后是否自动调整地图视野到定位点
zoomToAccuracy={ true }
/> */}

            </InnerMap>
        </Mapbox>
    )
}
        //更改定位状态属性
            handlePositionCenter = () => {
                this.setState({
                    center : {longitude : 121,latitude : 31.376044}
                })
            }

            handleRenderMarker = (datas) => {
                console.log(datas)
                console.log(this.state)
                this.setState({
                    everPoint : datas
                },()=>{
                    console.log(this.state.everPoint)
                })
            }

}

export default Homepage