import React from "react";
import { WeaDialog } from "ecCom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
import "../payroll/templatePreview/index.less";

@inject("mySalaryStore")
@observer
export default class PayrollModal extends React.Component {
  componentWillMount() {
    const { mySalaryStore: { getMySalaryBill } } = this.props;
    getMySalaryBill(this.props.id);
  }

  render() {
    const { mySalaryStore: { mySalaryBill } } = this.props;
    const employeeInformation = mySalaryBill.employeeInformation && toJS(mySalaryBill.employeeInformation);
    const salaryGroups = mySalaryBill.salaryGroups && toJS(mySalaryBill.salaryGroups);
    return (
      <WeaDialog
        title="工资单"
        visible={this.props.visible} onCancel={() => {
        this.props.onCancel();
      }}
        style={{ width: 980 }}
        initLoadCss
        resize>
        <div style={{ minHeight: "20vh", maxHeight: "80vh", overflow: "hidden auto" }}>
          <div className="templatePreview">
            {
              this.props.visible &&
              <ComputerTemplate
                isPreview
                salaryTemplateShowSet={JSON.stringify(mySalaryBill.salaryTemplate)}
                salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
              />
            }
          </div>
        </div>
      </WeaDialog>
    );
  }
}