import React from "react";
import { WeaHelpfulTip, WeaTab } from "ecCom";
import IssuedAndReissueTable from "./issuedAndReissueTable";
import PayrollItemsTable from "./payrollItemsTable";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";

@inject("calculateStore")
@observer
export default class EditSalaryDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "0"
    };
  }

  componentWillMount() {
    const { calculateStore: { acctresultDetail } } = this.props;
    acctresultDetail(this.props.id);
  }

  handleItemValueChange = (field, value, isInput, groupId) => {
    const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm } } = this.props;
    let form = { ...acctresultDetailForm };
    if (isInput === "itemsByGroup") {
      form.itemsByGroup = acctresultDetailForm.itemsByGroup.map(item => {
        if (item.salarySobItemGroupId === groupId) {
          return {
            ...item,
            salaryItems: _.map(item.salaryItems, it => {
              if (it.salaryItemId === field) {
                return { ...it, resultValue: value };
              }
              return { ...it };
            })
          };
        }
        return { ...item };
      });
    } else if (isInput === "issuedAndReissueItems") {
      form.issuedAndReissueItems = acctresultDetailForm.issuedAndReissueItems.map(item => {
        item = { ...item };
        if (item.salaryItemName === field) {
          item.resultValue = value;
        }
        return item;
      });
    }
    setAcctresultDetailForm(form);
  };
  renderTableTr = (data, isInput) => {
    const tables = [];
    const len = data.length;
    const rowNum = 3;
    const sumRows = len % rowNum;
    const sumRowMod = len / rowNum;
    const rows = (sumRows == 0 ? sumRowMod : sumRowMod + 1);
    for (let j = 0; j < rows; j++) {
      let iLen = (j + 1) * rowNum;
      iLen = iLen > len ? len : iLen;
      tables.push("<tr class='descriptions-row'>");
      for (let i = j * rowNum; i < iLen; i++) {
        if (!isInput) {
          const label = data[i].fieldName;
          const value = data[i].fieldValue || "-";
          tables.push("<th class=\"descriptions-item-label\">" + label + "</th>" + "<td class=\"descriptions-item-content\">" + value + "</td>");
        }
      }
      tables.push("</tr>");
    }
    return tables;
  };

  render() {
    const { calculateStore: { acctresultDetailForm } } = this.props;
    const { selectedKey } = this.state;
    const { itemsByGroup = [] } = toJS(acctresultDetailForm);
    const topTab = [
      {
        title: "正常工资薪金所得",
        viewcondition: "0"
      },
      {
        title: "已发补发",
        viewcondition: "1"
      }
    ];
    return (
      <div className="editSalaryDetail">
        <div className="detailItemWrapper">
          <div>
            <span className="itemTitle">基本信息</span>
            <WeaHelpfulTip style={{ marginLeft: "10px" }} title="提示：基本信息根据账套设置显示" placement="topLeft"/>
          </div>
          <div className="itemContent">
            {
              !_.isEmpty(acctresultDetailForm.employeeInfos) &&
              <table
                dangerouslySetInnerHTML={{ __html: this.renderTableTr(acctresultDetailForm.employeeInfos).join(",").replace(/,/g, "") }}
              />
            }
          </div>
        </div>
        {
          !_.isEmpty(toJS(acctresultDetailForm.issuedAndReissueItems)) &&
          <WeaTab
            datas={topTab}
            keyParam="viewcondition"
            selectedKey={selectedKey}
            onChange={v => this.setState({ selectedKey: v })}
          />
        }
        {
          selectedKey === "0" && _.map(itemsByGroup, item => {
            return <PayrollItemsTable {...item} onChangeIssueReissueValue={this.handleItemValueChange}/>;
          })
        }
        {
          selectedKey === "1" &&
          <IssuedAndReissueTable
            dataSource={toJS(acctresultDetailForm.issuedAndReissueItems)}
            onChangeIssueReissueValue={this.handleItemValueChange}
          />
        }
      </div>
    );
  }
}
