/*
 * Author: 黎永顺
 * name: 回算薪资项目表格数据
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import LedgerBackCalcEditSlide from "./ledgerBackCalcEditSlide";

@inject("taxAgentStore")
@observer
class LedgerBackCalculatedSalaryItemTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backCalcEditSlide: {
        visible: false,
        title: "编辑薪资项目",
        id: "",
        salaryItemId: "",
        backCalcType: ""
      }
    };
  }

  handleEditBackCalc = (record) => {
    const { id, salaryItemId, backCalcType } = record;
    const { backCalcEditSlide } = this.state;
    this.setState({
      backCalcEditSlide: {
        ...backCalcEditSlide,
        visible: true,
        id,
        salaryItemId,
        backCalcType
      }
    });
  };
  handleClose = (isRefresh = false) => {
    const { backCalcEditSlide } = this.state;
    const { onRefresh } = this.props;
    this.setState({
      backCalcEditSlide: {
        ...backCalcEditSlide,
        visible: false,
        id: "",
        salaryItemId: "",
        backCalcType: ""
      }
    }, () => {
      isRefresh && onRefresh();
    });
  };

  render() {
    const { backCalcEditSlide } = this.state;
    const { taxAgentStore: { showOperateBtn }, dataSource, editId, saveSalarySobId, key } = this.props;
    const columns = [
      {
        dataIndex: "name",
        title: "薪资项目",
        render: (text) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        }
      },
      {
        dataIndex: "formulaContent",
        title: "核算公式",
        render: (text, record) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        }
      },
      {
        dataIndex: "",
        title: "操作",
        width: 80,
        render: (text, record, index) => {
          const { canEdit } = record;
          return (showOperateBtn && canEdit) ?
            <a href="javascript: void(0);" onClick={() => this.handleEditBackCalc(record)}>编辑</a> :
            <span></span>;
        }
      }
    ];
    return (
      <div>
        <WeaTable
          rowKey="id"
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
        <LedgerBackCalcEditSlide
          {...backCalcEditSlide}
          editId={editId || saveSalarySobId}
          showOperateBtn={showOperateBtn}
          onCancle={this.handleClose}
        />
      </div>
    );
  }
}

export default LedgerBackCalculatedSalaryItemTable;