import React, { Component } from 'react';
import {observer} from 'mobx-react';
import { WeaLocaleProvider, WeaDialog, WeaMap } from 'ecCom';
import MapUtil from '../../util/mapUtil';
import {addContentPath} from '../../util/index.js';
import moment from 'moment';

const getLabel = WeaLocaleProvider.getLabel;

const createDetailTemplete = (c, isGoogleMap = false) => {
    const { crm = [], pics = [] } = c;
    let picDom = '', crmDom = '';
    pics.map(pic => picDom += `<div class='mb5-img'><img src=${addContentPath(pic)} border="0" width="65" height="64"/></div>`);
    crm.map(d => crmDom += `<div class='crm-text-elli'>${d}</div>`);
  
    return `<div class="hrm-map-detail ${isGoogleMap ? 'isGoogle' : ''}">
              <i class="cursor-pointer icon-coms-Clear" onclick='return closeHrmMapInfoWindow();'></i>
              <div class="mb5">
                <span class="mr10">${c.name}</span>
                <span class="gray mb5">${c.signTime}</span>
                <span class="signTitle">${c.signTitle}</span>
              </div>
              <div class='info-wrap'>
                ${c.information ? `<div class="mb5 m-information">${c.information}</div>` : ''}
                ${c.pics ? `<div class="mb5">${picDom}</div>` : ''}
                ${crm && crm.length > 0 ?
                `
                <div class='mb5' style="display: flex">
                  <i class="icon-coms-currency-Customer" style="margin-right: 10px; color: #999;font-size:14.3px"></i>
                  <div style="flex: 1, width: '98%'">
                  ${crmDom}
                  </div>
                </div>
                ` : ''}
                <div class="gray" style="display: flex">
                  <i class="icon-coms-position" style="margin-right: 10px; color: #999; font-size:13.3px"></i>
                  <div class='location'>
                  ${c.title}
                  </div> 
                </div>
              </div>
            </div>`;
  }

@observer
export default class LocationInfo extends Component{
    setMapRef = ref => {
        if(ref && this.mapUtil == null){
            this.mapUtil = new MapUtil(ref);
            window.closeHrmMapInfoWindow = this.closeInfoWindow;
            // this.props.store.draw = this.draw;
        }
    }

    amapEvents = { 
        created: instance => {
            this.mapUtil.mapInstance = instance;
            this.draw();
        }
    }

    initEndCallback = () => {
        // this.props.store.draw = this.draw;
        this.draw();
    }

    closeInfoWindow = () => {
        this.mapUtil && this.mapUtil.closeInfoWindow();
    }

    draw = () => {
        if(!this.mapUtil)
            return;
        const {store: {selectedSignInfo: d}} = this.props;
        const {isAmap, isGoogleMap, clearMapData, addMarker, addPolyline, setFitView} = this.mapUtil;
        //清理地图数据
        clearMapData();
        //自适应数据
        const boundDatas = [];
        const date = moment(d.date, 'YYYY-MM-DD').format('YYYY-MM-DD');
        const {x: longitude, y: latitude} = d || {};
        if(longitude && latitude){
            d.signTime = `${date} ${d.time}`;
            const otherParams = {};
            isAmap && Object.assign(otherParams, {
            offset: new window.AMap.Pixel(-17, -34), 
            title: d.title, 
            // content: `<div class='markerContent' style='background: url(${addContentPath("/appres/hrm/image/mobile/signin/img019.png)")} no-repeat'>${idx}</div>`,
            events: [
                {
                event: 'click',
                onEventHandle: e => {
                    const data = {marker: e.target, content: createDetailTemplete(d), isCustom: true};
                    this.mapUtil.openInfoWindow(data);
                }
                }
            ]
            });
            isGoogleMap && Object.assign(otherParams, {
            events: [
                {
                event: 'click',
                onEventHandle: () => {
                    const data = {content: createDetailTemplete(d, true), isCustom: true};
                    this.mapUtil.openInfoWindow(data, {
                    position: {lat: Number(latitude), lng: Number(longitude)}
                    });
                }
                }
            ]
            })
            // isGoogleMap && Object.assign(otherParams, {label:{text:String(i + 1), color:'#fff'}});
            const marker = addMarker({latitude, longitude}, null, null, otherParams);
            isAmap && boundDatas.push(marker);
            isGoogleMap && boundDatas.push({latitude, longitude});
            // idx++;
        }

        // let idx = 1;
        // //添加marker
        // mapDatas.map((d, i) => {
        //     const date = moment(d.date, 'YYYY-MM-DD').format('YYYY-MM-DD');
        //     d.items.reverse().map((d, i) => {
        //     const {x: longitude, y: latitude} = d || {};
            
        //     })
        // })
        // //添加polyline
        // polylinePath.length > 0 && addPolyline(polylinePath);
        //地图元素自适应
        setFitView(boundDatas);
    }

    render(){
        const {store} = this.props;
        const {locationInfoDialogProps, selectedSignInfo} = store;

        const mapProps = { zoom: 14, onMapSwitch: type => {}, events: this.amapEvents, initGoogleEndCallback: this.initEndCallback};

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4d00im`} {...locationInfoDialogProps}>
                {
                    locationInfoDialogProps.visible && selectedSignInfo &&
                    <div className='map'>
                        <WeaMap ecId={`${this && this.props && this.props.ecId || ''}_WeaMap@p4bryw`} {...mapProps} ref={ref => this.setMapRef(ref)}/>
                    </div>
                }
            </WeaDialog>
        )
    }
}