import React from 'react'
import { Modal, Table } from 'antd'
import { inject, observer } from 'mobx-react';
import { WeaTable } from "ecCom"

@inject('ledgerStore')
@observer
export default class PreviewSalaryModal extends React.Component {
    getColumns() {
        const { ledgerStore: { empFields, itemGroups }} = this.props;
        let columns = []
        let length = 0

        empFields.map(item => {
            columns.push({
                title: item.fieldName,
                key: item.fieldId,
                width: 150
            })
            length ++
        })

        itemGroups.map(item => {
            if(item.id != "default") {
                let columnItem = {
                    title: item.name,
                    children: item.items.map(i => {
                        return {
                            title: i.name,
                            key: i.id,
                            width: 150
                        }
                        length ++
                    })
                }
                columns.push(columnItem )
            }
        })

        itemGroups.map(item => {
            if(item.id == "default") {
                item.items.map(i => {
                    columns.push({
                        title: i.name,
                        key: i.id,
                        width: 150
                    })
                    length ++ 
                })
            }
        })

        return {columns, length};
    }
    render() {
        return (
            <Modal
                visible={this.props.visible}
                title="预览"
                width={800}
                onCancel={() => {this.props.onCancel()}}
                footer={null}
            >
                <WeaTable columns={this.getColumns().columns} dataSource={[]} scroll={{x: this.getColumns().length * 150}}/>
            </Modal>
        )
    }
}