/*
 * Author: 黎永顺
 * name: 薪资项目-列表数据
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaHelpfulTip, WeaTable } from "ecCom";

class LedgerSalaryItemTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: []
    };
  }

  /*
   * Author: 黎永顺
   * Description: 列表操作隐藏复选框
   * Params:
   * Date: 2022/12/14
   */
  handleChangeItem = (value, id) => {
    const { dataSource, onHandleItemhide } = this.props;
    onHandleItemhide(
      _.map([...dataSource], item => {
        if (id === item.id) {
          return {
            ...item,
            itemHide: String(value)
          };
        }
        return { ...item };
      })
    );
  };
  handleChangeAllItem = (value) => {
    const { dataSource, onHandleItemhide } = this.props;
    onHandleItemhide(
      _.map([...dataSource], item => {
        return {
          ...item,
          itemHide: String(value)
        };
      })
    );
  };

  render() {
    const { dataSource, onDropCategoryItem, onChangeSelectedRowKeys, onEditFormnul } = this.props;
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys }, () => {
        onChangeSelectedRowKeys(this.state.selectedRowKeys);
      }),
      getCheckboxProps: record => ({
        disabled: !record.canDelete
      })
    };
    const checkValue = _.every(dataSource, it => it.itemHide && it.itemHide === "1") ? "1" : "0";
    const columns = [
      {
        title: "名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: <span>
          <span style={{ marginRight: 8 }}>核算公式</span>
          <WeaHelpfulTip title={<HelpContent/>} placement="bottom" width={200}/>
        </span>,
        dataIndex: "formulaContent",
        key: "formulaContent",
        render: (text, record) => {
          if (record.canEdit) {
            return (
              <span className="linkWapper">
                <a href="javascript: void(0);" onClick={() => onEditFormnul(record)}> {text} </a>
              </span>
            );
          } else {
            return <span> {text} </span>;
          }
        }
      },
      {
        title: "个税申请表对应字段",
        dataIndex: "taxDeclarationColumn",
        key: "taxDeclarationColumn"
      },
      {
        title: <span>
          <WeaCheckbox
            value={checkValue}
            onChange={value => this.handleChangeAllItem(value)}
          />
          <span style={{ marginLeft: 8 }}>隐藏</span>
        </span>,
        dataIndex: "itemHide",
        key: "itemHide",
        render: (text, record) => <WeaCheckbox
          value={text ? String(text) : !text ? "0" : "1"}
          onChange={value => this.handleChangeItem(value, record.id)}
        />
      }
    ];
    return (
      <WeaTable
        rowKey="id"
        rowSelection={rowSelection}
        dataSource={dataSource}
        columns={columns}
        onRow={(record, index) => ({
          index,
          moveRow: record
        })}
        pagination={false}
        onDrop={onDropCategoryItem}
        draggable={true}
      />
    );
  }
}

export default LedgerSalaryItemTable;

const HelpContent = () => {
  return <span>
    <span>1、新建薪资账套时，核算公式与【薪资项目管理】菜单一致；</span><br/>
    <span>2、取值方式为公式的薪资项目，核算公式显示为具体公式；点击公式可编辑公式，核算时，按照当前薪资项目的公式进行核算；</span><br/>
    <span>3、薪资账套内的薪资项目的公式或SQL的修改或公式的修改，都不影响【薪资项目管理】菜单的薪资项目取值方式或公式，只对当前账套生效；</span><br/>
  </span>;
};