import React, { Component } from "react";
import {observer} from 'mobx-react';
import {Row, Col} from 'antd';
import { WeaLocaleProvider, WeaMap, WeaInput, WeaFormItem, WeaCheckbox, WeaInputNumber, WeaError } from "ecCom";
import has from 'lodash/has';
const getLabel = WeaLocaleProvider.getLabel;
import {i18n} from '../../public/i18n';

let map, geolocation, geocoder,MapAddress;

@observer
export default class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date().getTime()
    };
  }

  onMapClickHandle = params => {
    const {store: {onPositionSelected}} = this.props;
    const {info, location} = params;
    const {name, address} = info;
    const data = {
      locationname: name,
      address: address,
      longitude: location[0],
      latitude: location[1]
    }
    onPositionSelected && onPositionSelected(data);
    // this.setState({selectedPosition: data});
  }

  onSelectHandle = params => {
    const{cityname,adname,business_area}=params
    MapAddress=cityname+adname+business_area+params.address
    const {store: {onPositionSelected}} = this.props;
    let locationname = '', address = '', longitude = '', latitude = '';
    locationname = params.name;
    address = MapAddress
    const latlng = params.location.split(',');
    longitude = latlng[0];
    latitude = latlng[1];

    const data = {locationname,address,longitude,latitude}
    onPositionSelected && onPositionSelected(data);
    // this.setState({selectedPosition: data});
  }

  onMapSwitchHandle = type => {
  }

  setMapRef = map => this.map = map;

  onChangeHandle = (k, v) => {
    const {store} = this.props;
    const {setRangeParam, rangeParams} = store;
    setRangeParam(k, v);
  }

  gaodeRegeoCallback = (result, info) => {
    const {info: rsInfo = '', status} = result || {};
    const {name = '', address = ''} = info || {};
    if(rsInfo.toLowerCase() == 'ok' && status == '1'){
      this.props.store.setRangeParam('address', address);
    }
  }

  googleRegeoCallback = (result, info) => {
    const {name = '', address = ''} = info || {};
    address != '' && this.props.store.setRangeParam('address', address);
  }

  render() {
    const {store} = this.props;
    const {rangeParams} = store;
    const mapProps = {showGeolocation: true}
    const {locationname:name} = rangeParams;

    const {longitude, latitude} = rangeParams;
    if(/^(\-)?\d+(\.\d+)?$/.test(longitude) && /^(\-)?\d+(\.\d+)?$/.test(latitude)){
      Object.assign(mapProps,{position: [rangeParams.longitude, rangeParams.latitude]});
    }
    return (
      <div style={{width: '100%', height: '100%'}}>
        <div style={{width: '100%', height: 'calc(100% - 90px)'}}>
          <WeaMap key={this.state.date} ecId={`${this && this.props && this.props.ecId || ''}_WeaMap@f7whz1`}
            ref={this.setMapRef}
            zoom={14}
            showInfoWindow={true}
            showSearchBar={true}
            // showGeolocation={true}
            clickToChangePosition={true}
            onMapSwitch={this.onMapSwitchHandle}
            onMapClick={this.onMapClickHandle}
            onSelect={this.onSelectHandle}
            onMarkerClick={this.onMapClickHandle}
            gaodeRegeoCallback={this.gaodeRegeoCallback}
            googleRegeoCallback={this.googleRegeoCallback}
            {...mapProps}
            info={{name, address:MapAddress}}
          />
        </div>
        <div style={{height: 90, padding: 10}}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zyb531`} gutter={16}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@47jhtn`} span={12}>
              <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@mdlsvh`} tipPosition='bottom'
                style={{width: '100%'}}
                ref={d => store.setMapInfoError('locationname', d)}
                error={`"${getLabel('388717','考勤地址')}" ${i18n.message.dataEmpty()}`}>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xplgfl`}
                  label={getLabel('388717','考勤地址')}
                  labelCol={{span: 6}}
                  wrapperCol={{span: 18}}
                >
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7vktkk`} gutter={16}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8mzurw`} span={21}>
                      <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ibd2pr`} viewAttr='3' value={rangeParams.locationname} onChange={v => this.onChangeHandle('locationname', v)} />
                    </Col>
                  </Row>
                </WeaFormItem>
              </WeaError>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w0gtgs`} span={12}>
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ikzto2`}
                label={getLabel('507863','有效识别半径')}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
              >
                <div className='hrm_attendance_location_range_setting'>
                  <div className='location_range_input'>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@fpztsz`} 
                      min={100} defaultValue={Number(rangeParams.checkscope)} onChange={v => this.onChangeHandle('checkscope', v || 500)} />
                  </div>
                  <div className='location_range_tip text-elli' title={getLabel('515796','不设置默认为500米(最小值为100米)')}>{getLabel('515796','不设置默认为500米')}</div>
                </div>
              </WeaFormItem>
            </Col>
          </Row>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7o4ywo`} gutter={16}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ti62b3`} span={12}>
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@emcsae`}
                label={getLabel('389220','详细地址')}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
                className='hrm_attendance_location_range_address'
              >
                <div className='text-elli' style={{lineHeight: '30px'}} title={rangeParams.address}>{rangeParams.address}</div>
              </WeaFormItem>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k7wox8`} span={12}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lklcn4`} span={12}>
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@h60rgp`} tipPosition='bottom'
                  style={{width: '100%'}}
                  ref={d => store.setMapInfoError('longitude', d)}
                  error={`"${getLabel('801','经度')}" ${i18n.message.dataEmpty()}`}
                  >
                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@d543pn`}
                    label={getLabel('801','经度')}
                    labelCol={{span: 12}}
                    wrapperCol={{span: 10}}
                  >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@8tro40`} viewAttr='3' value={rangeParams.longitude} onChange={v => this.onChangeHandle('longitude', v)}/>
                  </WeaFormItem>
                </WeaError>
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8rj1w3`} span={11} offset={1}>
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@kpatji`} tipPosition='bottom'
                  style={{width: '100%'}}
                  ref={d => store.setMapInfoError('latitude', d)}
                  error={`"${getLabel('802','纬度')}" ${i18n.message.dataEmpty()}`}
                  >
                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xaq7nz`}
                    label={getLabel('802','纬度')}
                    labelCol={{span: 12}}
                    wrapperCol={{span: 10}}
                  >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@5esiei`} viewAttr='3' value={rangeParams.latitude} onChange={v => this.onChangeHandle('latitude', v)}/>
                  </WeaFormItem>
                </WeaError>
              </Col>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
