/*
 * Author: 黎永顺
 * name: 手动输入补缴金额
 * Description:
 * Date: 2023/1/3
 */
import React, { Component } from "react";
import { WeaInputNumber, WeaSearchGroup, WeaTable } from "ecCom";

class InputPaymentAmount extends Component {

  renderInputItem = (dataSource = [], type) => {
    const columns = [
      {
        dataIndex: "insuranceName", title: "福利项"
      },
      {
        dataIndex: "per", title: "个人缴纳金额",
        render: (text, record) => {
          return (
            <WeaInputNumber
              value={record[`${record.insuranceId}_per`]} min={0}
              precision={2} onChange={(val) => this.handleChangeBaseItem(record, val, type, "per")}
            />
          );
        }
      },
      {
        dataIndex: "com", title: "单位缴纳金额",
        render: (text, record) => {
          return (
            <WeaInputNumber
              value={record[`${record.insuranceId}_com`]} min={0}
              precision={2} onChange={(val) => this.handleChangeBaseItem(record, val, type, "com")}
            />
          );
        }
      }
    ];
    return <WeaTable
      rowKey="insuranceId"
      dataSource={dataSource}
      pagination={false}
      columns={columns}
    />;
  };
  handleChangeBaseItem = (item, value, type, paymentType) => {
    const { onChangeInputItem, socialPayment, fundPayment, otherPayment } = this.props;
    _.map(this.props[type], it => {
      const key = `${it.insuranceId}_${paymentType}`;
      if (item.insuranceId === it.insuranceId) {
        _.assign(it, { [key]: value });
      }
    });
    onChangeInputItem(socialPayment, fundPayment, otherPayment);
  };

  render() {
    const { socialPayment, fundPayment, otherPayment } = this.props;
    return (
      <div>
        {
          !_.isEmpty(socialPayment) &&
          <WeaSearchGroup title="社保" showGroup
                          col={1}>{this.renderInputItem(socialPayment, "socialPayment")}</WeaSearchGroup>
        }
        {
          !_.isEmpty(fundPayment) &&
          <WeaSearchGroup title="公积金" showGroup
                          col={1}>{this.renderInputItem(fundPayment, "fundPayment")}</WeaSearchGroup>
        }
        {
          !_.isEmpty(otherPayment) &&
          <WeaSearchGroup title="企业年金及其他福利" showGroup
                          col={1}>{this.renderInputItem(otherPayment, "otherPayment")}</WeaSearchGroup>
        }
      </div>
    );
  }
}

export default InputPaymentAmount;