import React from "react";
import { WeaButtonIcon, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";
import SalaryItemSettings from "./salaryItemSettings";


@inject("payrollStore")
@observer
export default class TemplateSettingForm extends React.Component {
  handleChangeSalaryItem = (resultSet) => {
    const { payrollStore: { setReplenishSalaryTemplateSalaryItemSet } } = this.props;
    setReplenishSalaryTemplateSalaryItemSet(resultSet);
  };

  render() {
    const { payrollStore } = this.props;
    const { replenishSalaryTemplateSalaryItemSet, templateBaseData } = payrollStore;
    return (
      <div className="showSettingForm">
        <WeaSearchGroup
          title={
            <div className="salarySetTitle">
              <span>薪资项目设置</span>
              <WeaButtonIcon buttonType="add" type="primary"
                             onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(templateBaseData).salarySob, "添加分类")}/>
            </div>
          }
          items={[]} needTigger showGroup>
          <SalaryItemSettings
            ref={dom => this.salaryItemSettingsRef = dom}
            dataSource={replenishSalaryTemplateSalaryItemSet}
            onChangeSalaryItem={this.handleChangeSalaryItem}
            salarySobId={toJS(templateBaseData).salarySob}
            isReplenish={true}
          />
        </WeaSearchGroup>
      </div>
    );
  }
}