import React, {
    Component
} from 'react';
import {
    observer
} from 'mobx-react';
import {
    WeaDialog
} from 'ecCom';
import {
    Button
} from 'antd';
import {
    WeaTableNew
} from 'comsMobx';
import {
    i18n
} from '../../../public/i18n';
import uuid from 'uuid/v1';
import SignDetail from './SignDetail';
// import {Tabs} from 'weaHrmComsPublic';
import {
    Tabs
} from '../../../../../pc4backstage/hrmComsPublic/index';
const {
    WeaTable
} = WeaTableNew;

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

    genRowKey = (record, index) => record.id || `${record.workcode}_${record.kqdate}`;

    render() {
        // const {
        //     Tabs
        // } = window.weaHrmComsPublic;
        const {
            store
        } = this.props;
        const {
            dialogParams,
            detailTable,
            tabConfig,
        } = store;

        const {
            iskqCalendarDialog,
            setScrollY,
            scrollY,
        } = store;


        const config = store.toJS(tabConfig);
        const tabProps = {
            tabConfig: config,
            tabChangeHandle: config.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: config.activeTabKey,
                activeTabIndex: store.getTabIndex(config.tabs, config.activeTabKey)
            },
            store: store
        }
        const generateDialogParams = () => {
            const props = { ...dialogParams
            };
            let buttons = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k3zd3d`} type='primary' op='save' onClick={this.export}>{i18n.label.export()}</Button>];
            if (!iskqCalendarDialog) {
                Object.assign(props, {
                    buttons,
                })
            }
            Object.assign(props, {
                moreBtn: {
                    datas: store.convertToMenus(!iskqCalendarDialog ? buttons : [])
                },
            })
            return props;
        }

        let children = [];
        if (config.tabs.length > 1) {
            children.push(
                (
                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@grmzwv`} {...tabProps}>
                    {
                        config.tabs.map((tab, index) => {
                            return (
                                <div className='tabPane tabPane-dialog'>
                                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@zvezpe@${index}`}
                                        comsWeaTableStore={detailTable} 
                                        hasOrder={true}
                                        needScroll={true}
                                        scroll={{y:scrollY-50}}
                                    />
                                </div>
                            )
                        })
                    }
                    </Tabs>
                )
            )
        } else {
            children.push(
                (
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@45xm2u`}
                        comsWeaTableStore={detailTable}
                        hasOrder={true}
                        needScroll={true}
                        scroll={{y:scrollY}}
                    />
                )
            )
        }

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@7fy58h`} {...generateDialogParams()} onChangeHeight={height=>setScrollY(height)}>
            {iskqCalendarDialog ? <SignDetail ecId={`${this && this.props && this.props.ecId || ''}_SignDetail@pvaumt`} /> : children}
            </WeaDialog>
        )
    }
}