import React, {
    Component
} from 'react';
import {
    observer
} from 'mobx-react';
import {
    WeaDialog,
    WeaTable,
    WeaTab,
} from 'ecCom';
import {
    Button,
} from 'antd';
import {
    WeaTableNew
} from 'comsMobx';
import {
    i18n
} from '../../../public/i18n';
import {addContentPath} from '../../../util/index.js'

@observer
export default class Detail extends Component {
    export = () => {
        const {
            store
        } = this.props;
        const {
            detailTable
        } = store;
        detailTable.exportAll();
    }

    render() {
        const {
            store
        } = this.props;
        const {
            dialogParams,
            detailTable,
            detail,
            hasOnlyTable,
            handleDetailTabChange,
        } = store, {
            userInfo,
            signInfo,
            columns,
            datas,
            tableStore,
            tabDatas,
            selectedKey,
        } = detail;

        const generateDialogParams = () => {
            const props = { ...dialogParams
            };
            let buttons = []; //[<Button type='primary' op='save' onClick={this.export}>{i18n.label.export()}</Button>];
            Object.assign(props, {
                buttons,
                moreBtn: {
                    datas: store.convertToMenus(buttons)
                },
            })
            return props;
        }

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

        }

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ki9ac9`} {...generateDialogParams()}>
                {
                    hasOnlyTable ?(
                        <div>
                            {
                                tabDatas.length > 0 && (
                                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@61ghdp`} datas={tabDatas} keyParam='key' selectedKey={selectedKey} onChange={handleDetailTabChange} />
                                )
                            }
                            <WeaTableNew.WeaTable ecId={`${this && this.props && this.props.ecId || ''}_undefined@cq5s2z`} 
                                comsWeaTableStore={tableStore}
                                hasOrder
                                needScroll
                                scroll={{y: 360}}
                                />
                        </div>
                        )  : (
                        <div>
                            <UserInfo ecId={`${this && this.props && this.props.ecId || ''}_UserInfo@q8gq3x`} userInfo={userInfo}/>
                            <SignInfo ecId={`${this && this.props && this.props.ecId || ''}_SignInfo@962uet`} signInfo={signInfo} />
                            <DetailTable ecId={`${this && this.props && this.props.ecId || ''}_DetailTable@0outj5`} columns={columns} datas={datas}/>
                        </div>
                    )
                }
            </WeaDialog>
        )
    }
}