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);
  };

  handleChangeSalaryItemShowNamesetting = (itemShowNamesetting) => {
    const { payrollStore: { setSalaryBillItemNameSetting, salaryBillItemNameSetting } } = this.props;
    setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
      if (it.salaryBillType === 1) {
        return { ...it, salaryTemplateId: this.props.id, itemShowNameSetting: itemShowNamesetting };
      }
      return { ...it, salaryTemplateId: this.props.id };
    }));
  };

  render() {
    const { payrollStore } = this.props;
    const { replenishSalaryTemplateSalaryItemSet, templateBaseData, salaryBillItemNameSet } = 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}
            onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
            salarySobId={toJS(templateBaseData).salarySob}
            salaryTemplateId={this.props.id || ""}
            isReplenish={true} salaryBillItemNameSet={salaryBillItemNameSet}
          />
        </WeaSearchGroup>
      </div>
    );
  }
}