/*
 * Author: 黎永顺
 * name: 字段列表
 * Description:
 * Date: 2023/1/19
 */
import React, { Component } from "react";
import { WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import { Switch } from "antd";
import { salaryFieldList } from "../../../apis/fieldManage";

@inject("taxAgentStore")
@observer
class FieldTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentDidMount() {
    this.salaryFieldList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.doSearch !== this.props.doSearch) this.salaryFieldList({ current: 1 });
  }

  salaryFieldList = (extra = {}) => {
    const { name } = this.props;
    const { pageInfo } = this.state;
    const payload = { name, ...pageInfo, ...extra };
    this.setState({ loading: true });
    salaryFieldList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          columns
        });
      }
    });
  };
  getColumns = () => {
    const { columns } = this.state;
    const { taxAgentStore, onEditLedger, onDeleteLedger } = this.props;
    const { showSalaryItemBtn, showOperateBtn } = taxAgentStore;
    return _.map([...columns, {
      dataIndex: "operate",
      display: true,
      key: "operate",
      title: "操作"
    }], item => {
      const { dataIndex } = item;
      if (dataIndex === "useDefault" || dataIndex === "hideDefault") {
        item.render = (text) => (<Switch checked={text === 1} disabled/>);
      } else if (dataIndex === "operate") {
        item.width = 120;
        item.render = (text, record) => {
          return <div className="optWrapper">
            <a href="javascript:void(0);" className="mr10"
               onClick={() => onEditLedger(record)}>{(showSalaryItemBtn || showOperateBtn) ? "编辑" : "查看"}</a>
            {
              record.canDelete && (showSalaryItemBtn || showOperateBtn) &&
              <a href="javascript:void(0);" className="mr10" onClick={() => onDeleteLedger(record)}>删除</a>
            }
          </div>;
        };
      } else {
        item.render = (text) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        };
      }
      return { ...item };
    });
  };

  render() {
    const { dataSource, pageInfo, loading } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => {
          this.salaryFieldList();
        });
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.salaryFieldList();
        });
      }
    };
    return (
      <WeaTable
        rowKey="id"
        dataSource={dataSource}
        pagination={pagination}
        loading={loading}
        columns={this.getColumns()}
      />
    );
  }
}

export default FieldTable;