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 = []

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

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

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

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