import React, { Component } from 'react'
import { Timeline } from 'antd';
import isEmpty from 'lodash/isEmpty';
import {observer}  from 'mobx-react'
import {toJS} from 'mobx'
import {Icon} from 'antd'
import Map from '../../coms/Map';
import {
    WeaLocaleProvider,
    WeaDialog
  } from 'ecCom';

import {
    carousel
  } from '../../util/index'
import {addContentPath} from '../../util/index.js'

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TimeView extends Component {
    componentDidMount () {
        const {newOutSide} = this.props;
        const {getData,init,temp} = newOutSide;
        getData();
    }
    handlerPosition(item) {
        const {
            newOutSide
        } = this.props;
        newOutSide.updatePosition(item);
        newOutSide.updateVisible(true);
      }
    render() {
        const {newOutSide} = this.props;
        const {timeData,visible,positionObj} = newOutSide;

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

        }
        return (
            <div style={{overflowY:'auto',height:"calc(100% - 120px)"}}>
             {/* 点击地图的弹出框 */}
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@z0kuxt`}
                visible={visible}
                onCancel={()=> {newOutSide.updateVisible(false);}}
                closable
                style={{width: 700, height: 500}}
                title = {getLabel('386506',"位置详情")}
                icon="icon-coms-hrm"
                iconBgcolor='#008572'
                >
                {visible &&<Map ecId={`${this && this.props && this.props.ecId || ''}_Map@mmwqk4`} config={toJS(positionObj)} ref="map1"/>}
            </WeaDialog>

            <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@3k6mmc`} className="list-wrapper grayBG">
                {
                    timeData && toJS(timeData).map((item,index) => {
                        return (
                            <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@3abca4@${index}`} className="list-item">
                                <div className="list-item-wrapper">
                                    <div className={`list-item-title ${themeFontSize > 12 ? 'list-item-title-large' : ''}`}>{item.date}</div>
                                    <div className="list-item-content">
                                        {
                                            // 为空时
                                            isEmpty(item.items)&&
                                            <div className="no-signinfo gray align-center">
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nw2xqi@${index}`} type="frown gray" style={{marginRight : 10}} />
                                                {getLabel('386505',"当天无外勤签到记录")}
                                            </div>
                                        }
                                        {
                                            !isEmpty(item.items) && item.items.map(i => {
                                                return (
                                                    <div className="list-item-single">
                                                         <div className="mb5">
                                                            {i.name}
                                                            <span className="gray" style={{marginLeft: 15}}>{i.time}</span>
                                                            <span style={{float: 'right', marginRight: 10, color: '#67AFF7'}}>{i.signTitle}</span>
                                                        </div>
                                                        {/* 备注 */}
                                                        {i.information && <div className="mb5" dangerouslySetInnerHTML={{__html: i.information}}></div>}
                                                        {/* 图片 */}
                                                        {i.pics && 
                                                            <div className="mb5">
                                                                {
                                                                    i.pics.map(pic=> {
                                                                        return <div className='mb5-img'>{
                                                                        <img src={addContentPath(pic)} border="0" width="100" height="110" onClick={event => carousel(pic,index,'ant-timeline-item')}/>
                                                                        }
                                                                        </div>
                                                                    })
                                                                }
                                                            </div>
                                                        }
                                                        {
                                                            i.crm && i.crm.length > 0 &&
                                                            <div className="mb5-custom" >
                                                            <i className="icon-coms-currency-Customer" />
                                                                <div style={{flex: 1, width: '98%'}}>
                                                                    {
                                                                    i.crm.map((d, i) => {
                                                                        return (
                                                                        <div className='crm_data text-elli'>{d}</div>
                                                                        )
                                                                    })
                                                                    }
                                                                </div>
                                                            </div>
                                                        }
                                                        <span className="cursor-pointer gray"
                                                            onClick={this.handlerPosition.bind(this, i)}>
                                                            <i className="icon-coms-position" style={{marginRight: 6}}/> 
                                                            {i.title}
                                                        </span>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </Timeline.Item>
                        )
                    })
                }
            </Timeline>
            </div>
        )
    }
}