import React from 'react';
import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaTop,
  WeaTab,
  WeaOrgTree,
  WeaEchart,
  WeaYear,
  WeaDialog,
  WeaPopoverHrm,
  WeaCheckbox,
  WeaRadioGroup,
  WeaRightMenu,
  WeaTools,
  WeaErrorPage,
  WeaAlertPage,
  WeaDatePicker,
  WeaBrowser,
  WeaNewScroll,
  WeaSearchGroup
} from 'ecCom';
import {
  WeaTableNew
} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import {
  Modal,
  Row,
  Col,
  Button,
  Spin,
  Icon,
  Calendar,
  Tooltip,
  Timeline
} from 'antd';
import '../style/checking.less';
import '../style/outside.less';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
import cloneDeep from 'lodash/cloneDeep';
import toString from 'lodash/toString';
import moment from 'moment';
import * as Util from '../util/index';
import Map from '../coms/Map';
import loadjs from 'loadjs';
import {
  i18n
} from '../public/i18n';
import {
  WeaLocaleProvider
} from 'ecCom';
import {
  carousel
} from '../util/index'
import {addContentPath} from '../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;


@observer
export default class OutSideTabkey1 extends React.Component{

  handlerPosition(item) {
    const {
      hrmOutside
    } = this.props;
    hrmOutside.updatePosition(item);
    hrmOutside.updateVisible(true);
  }

render() {
    const {
      hrmOutside
    } = this.props;
    let {
      timeData
    } = hrmOutside;
    timeData = toJS(timeData);
    return <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@9hwzs2`} className="list-wrapper grayBG">
      {
        timeData && timeData.map((item,index) => {
          return <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@u1y29p@${index}`} className="list-item">
            <div className="list-item-wrapper">
              <div className="list-item-title">{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@pnvyaq@${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 text-elli" dangerouslySetInnerHTML={{__html: i.information}}></div>}
                      {i.pics && <div className="mb5">
                        {
                          i.pics.map(pic=> {
                            return <div className='imgDiv'>{
                              <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='customer gray' style={{display: 'flex'}}>
                          <i className="icon-coms-currency-Customer" style={{marginRight: 10, fontSize: '14px'}}/>
                          <div style={{flex: 1, width: '98%'}}>
                            {
                              i.crm.map((d, i) => {
                                return (
                                  <div className='text-elli' style={{color: '#666'}}>{d}</div>
                                )
                              })
                            }
                          </div>
                        </div>
                      }
                      <div className='customer gray' style={{display: 'flex'}} onClick={() => this.handlerPosition.bind(this, i)}>
                          <i className="icon-coms-position" style={{marginRight: 10, fontSize: '14px'}}/>
                          <div style={{flex: 1, width: '98%'}}>
                            <div className='text-elli'>{i.title}</div>
                          </div>
                        </div>
                    </div>
                  })
                }
              </div>
            </div>
          </Timeline.Item>
        })
      }
    </Timeline>
  }
}