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

const getLabel = WeaLocaleProvider.getLabel;

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

    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@rvddkk`}
            bordered
            columns={columns}
            dataSource={datas}
            pagination={false}
            scroll={{y: 300}}
        />
    </div>)
}

const LogList = props => {
    const {logList = []} = props;

    if(logList.length == 0)
        return null;

    return (
        <div className='daily-logList'>
            <div>{getLabel('525003','说明')}:</div>
            {
                logList.map((d, i) => (
                <div className='logItem' key={i}>{i + 1}. {d}</div>
                ))
            }
        </div>
    )
}

@observer
export default class SignDetail extends Component {
    render() {
        const {
            store
        } = this.props;
        const {
            signData
        } = store, {
            userInfo,
            signInfo,
            columns,
            datas,
            logList
        } = signData;
        
        return (
            <div>
                <UserInfo ecId={`${this && this.props && this.props.ecId || ''}_UserInfo@me0mvl`} {...userInfo} />
                <SignInfo ecId={`${this && this.props && this.props.ecId || ''}_SignInfo@k0a5tp`} {...signInfo} />
                <DetailTable ecId={`${this && this.props && this.props.ecId || ''}_DetailTable@i2i8z7`} columns={columns} datas={datas} />
                <LogList ecId={`${this && this.props && this.props.ecId || ''}_LogList@hsjcdt`} logList={logList} />
            </div>
        )
    }
}