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

@observer
export default class Detail extends Component {

    constructor(props) {
		super(props);
	}

    export = () => {
        const {
            store
        } = this.props;
        const {
            detailTable
        } = store;
        detailTable.exportAll();
    }

    getNewColumns = (columns) => {
        let newColumns = [...columns]

        newColumns = newColumns.map(i => {
            if (i.dataIndex === 'KQstatus') {
                i.render = (text, record) => {
                    let {KQstatus,signfrom,signTime,signDate,signfromtext} = record
                    const {detailParams} = this.props.store
                    const {resourceId,kqDate} = detailParams
                    
                    if(signTime === '未打卡'){
                        return <div></div>
                    }

                    const selectBoxStyle = {
                        display:'flex',
                        padding:'10px 0px',
                        alignItems: 'center',
    					justifyContent: 'center'
                    }

                    return <div style={selectBoxStyle}>
                        <Button type="primary" onClick={()=>{
                            const params = {
                                userId:resourceId,
                                kqDate:signDate,
                                kqTime:signTime,
                                signFrom:signfromtext,
                                isIncom: '0'
                            }

                            apis.upSignCard(params).then((res) => {
                                if (res.status == '1') {
                                    message.success(res.msg)
                                } else {
                                    message.error(res.msg)
                                }
                            })
                        }}>失效</Button>
                    </div>
                }
            }

            return i
        })


        return newColumns;
    }

    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;
            const newColumns = this.getNewColumns(columns)

            return (<div className='daily-detail'>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@6q9a90`}
                    bordered
                    columns={newColumns}
                    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>
        )
    }
}