import React, { Component } from 'react';
import {observer} from 'mobx-react';
import { Timeline, Icon } from 'antd';
import { WeaLocaleProvider, WeaAlertPage } from 'ecCom';
import isEmpty from 'lodash/isEmpty';
import {addContentPath, carousel} from '../../util/index';
import LocationInfo from './LocationInfo';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TimeLineView extends Component{
    onClickHandle = signInfo => {
        this.props.store.showLocationInfo(signInfo);
    }

    render(){
        const {store} = this.props;
        const {timeData, hasRight, doCarousel} = store;

        if(!hasRight){
            return (
                <div className="mapView" >
                    <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2gwsc1`} >
                        <div style={{ color: '#000' }}>
                            {getLabel('517102', "你无权查看该人员的外勤数据")}
                        </div>
                    </WeaAlertPage>
                </div>
            )
        }

        let themeFontSize = 12;
        try{
            themeFontSize = parseInt(JSON.parse(localStorage['theme-themeInfo']).themeFontSize);
        }catch(e){
            themeFontSize = 12;
        }

        return (
            <div className='timeLineView'>
                <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@fdlafg`}>
                    {
                        timeData && timeData.map((item, i) => {
                            return (
                                <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@85fbaa@${i}`}>
                                    <div className='itemContent'>
                                        <div className={`date ${themeFontSize > 12 ? 'dateLarge' : ''}`} style={{backgroundImage: `url(${addContentPath('/hrm/hrm_e9/image/timeline.png')})`}}>{item.date}</div>
                                        <div className='signInfo'>
                                            {
                                                isEmpty(item.items) ? (
                                                    <div className='noSigninfo'>
                                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@buw401@nodata}`} type='frown' />
                                                        {getLabel('386505',"当天无外勤签到记录")}
                                                    </div>
                                                ) : item.items.map((signInfo, i) => {
                                                    return (
                                                        <div className='item'>
                                                            <div className="mb5">
                                                                {signInfo.name}
                                                                <span style={{marginLeft: 15}}>{signInfo.time}</span>
                                                                <span style={{float: 'right', marginRight: 10, color: '#67AFF7'}}>{signInfo.signTitle}</span>
                                                            </div>
                                                            {/* 备注 */}
                                                            {signInfo.information && <div className="mb5" dangerouslySetInnerHTML={{__html: signInfo.information}}></div>}
                                                            {/* 图片 */}
                                                            {signInfo.pics && 
                                                                <div className="mb5">
                                                                    {
                                                                        signInfo.pics.map((pic, index)=> {
                                                                            return (
                                                                                <div className='mb5-img'>
                                                                                    <img src={addContentPath(pic)} border="0" width="100" height="110" onClick={event => doCarousel(mobx.toJS(signInfo.pics),index)}/>
                                                                                </div>
                                                                            )
                                                                        })
                                                                    }
                                                                </div>
                                                            }
                                                            {
                                                                signInfo.crm && signInfo.crm.length > 0 &&
                                                                <div className="mb5-custom" >
                                                                <i className="icon-coms-currency-Customer" />
                                                                    <div style={{flex: 1, width: '98%'}}>
                                                                        {
                                                                            signInfo.crm.map((d, i) => {
                                                                                return (
                                                                                    <div className='crm_data text-elli'>{d}</div>
                                                                                )
                                                                            })
                                                                        }
                                                                    </div>
                                                                </div>
                                                            }
                                                            <span className="positionInfo gray" onClick={() => this.onClickHandle({...signInfo, date: item.date})}>
                                                                <i className="icon-coms-position" style={{marginRight: 6}}/> 
                                                                {signInfo.title}
                                                            </span>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                </Timeline.Item>
                            )
                        })
                    }
                </Timeline>
                <LocationInfo ecId={`${this && this.props && this.props.ecId || ''}_LocationInfo@v03xg2`} store={store} />
            </div>
        )
    }
}