import React from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaTable } from "ecCom";

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

    userSelectedList.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 (
      <WeaDialog
        visible={this.props.visible}
        title="预览"
        style={{ width: "80vw" }}
        onCancel={() => {
          this.props.onCancel();
        }}
      >
        <div style={{ padding: 16 }}>
          <WeaTable columns={this.getColumns().columns} dataSource={[]} scroll={{ x: this.getColumns().length * 150 }}/>
        </div>
      </WeaDialog>
    );
  }
}