import React, {
    Component
} from 'react';
import {
    observer,
    inject,
} from 'mobx-react';
import {
    WeaTable
} from 'ecCom';
import {
    i18n
} from '../../../public/i18n';
import {addContentPath} from '../../../util/index.js'

@inject('hrmAttendanceMonthReport')
@observer
export default class SignDetail extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {
            hrmAttendanceMonthReport: store
        } = this.props;
        const {
            detail
        } = store, {
            userInfo,
            signInfo,
            columns,
            datas
        } = detail;

        const SignDetail = props => {
            return (
                <div>
                    <UserInfo ecId={`${this && this.props && this.props.ecId || ''}_UserInfo@kaf8rl`} userInfo={userInfo}/>
                    <SignInfo ecId={`${this && this.props && this.props.ecId || ''}_SignInfo@dcpdki`} signInfo={signInfo} />
                    <DetailTable ecId={`${this && this.props && this.props.ecId || ''}_DetailTable@bj816o`} columns={columns} datas={datas}/>
                </div>
            )
        }

        const UserInfo = props => {
            const {
                userInfo
            } = props, {
                messagerurl,
                shortname,
                shiftInfo,
                lastname,
                schedual
            } = userInfo;

            return (
                <div className='daily-userInfo'>
                    <div className='daily-userInfo-avatar'>
                        <img src={addContentPath(messagerurl)} alt={shortname}/>
                    </div>
                    <div className='daily-userInfo-brief'>
                        <p>{lastname}</p>
                        <p>
                            <span>{shiftInfo}</span>
                            <span>{schedual}</span>
                        </p>
                    </div>
                </div>
            )
        }

        const SignInfo = props => {
            const {
                signInfo
            } = props;

            return <p className='daily-signInfo'>{signInfo}</p>
        }

        const DetailTable = props => {
            const {
                columns,
                datas
            } = props;

            return (<div className='daily-detail'>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ga5tf8`}
                    bordered
                    columns={columns}
                    dataSource={datas}
                    pagination={false}
                    scroll={{y: 300}}
                />
            </div>)

        }

        return <SignDetail ecId={`${this && this.props && this.props.ecId || ''}_SignDetail@5kycy1`} />
    }
}