/*
 * Author: 黎永顺
 * name: 个税对应字段-薪资项目选择弹框
 * Description:
 * Date: 2023/8/17
 */
import React, { Component } from "react";
import { WeaDialog, WeaInputSearch, WeaLocaleProvider } from "ecCom";
import { Button, Col, Row, Table } from "antd";
import { commonBrowserData } from "../../../apis";

const { getLabel } = WeaLocaleProvider;

class LedgerSalaryItemSelectDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageInfo: { current: 1, pageSize: 20, total: 0 },
      loading: false, columns: [], dataSource: [],
      keywords: ""
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.commonBrowserData(nextProps);
  }

  commonBrowserData = (props) => {
    const { salarySobId } = props;
    const { keywords, pageInfo } = this.state;
    const payload = {
      type: "salaryItemBrowser",
      jsonParam: JSON.stringify({ salarySobId, key: keywords }),
      ...pageInfo
    };
    this.setState({ loading: true });
    commonBrowserData(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { list: dataSource, columns, pageNum: current, pageSize, total } = data;
        this.setState({
          dataSource, columns,
          pageInfo: { ...pageInfo, current, pageSize, total }
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleRowClick = (record) => {
    this.props.onCancel();
    this.props.handleClickItem(record);
  };

  render() {
    const { loading, columns, dataSource, pageInfo, keywords } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.commonBrowserData(this.props));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.commonBrowserData(this.props));
      }
    };
    return (
      <WeaDialog
        {...this.props} hasScroll className="incomeDialog" initLoadCss ref={dom => this.incomeRef = dom}
        buttons={[
          <Button type="primary" onClick={this.props.handleClearSalaryItem}>{getLabel(111, "清除")}</Button>
        ]}
        title={(<Row className="incomeDialogTitle" type="flex">
          <Col span={12} className="incomeDialogTitle-left">
            <span className="title">{getLabel(543598, "请选择薪资项目")}</span>
          </Col>
          <Col span={12} className="incomeDialogTitle-right">
            <Button type="ghost" icon="reload" title={getLabel(111, "刷新")} onClick={() => {
              this.setState({
                keywords: "",
                pageInfo: { ...pageInfo, current: 1 }
              }, () => this.commonBrowserData(this.props));
            }}/>
          </Col>
        </Row>)}
        style={{
          width: 850,
          height: 606.6,
          minHeight: 200,
          minWidth: 380,
          maxHeight: "90%",
          maxWidth: "90%",
          overflow: "hidden",
          transform: "translate(0px, 0px)"
        }}
      >
        <div className="incomeDialogContent">
          <WeaInputSearch
            style={{ width: "100%", margin: "6px 0" }} placeholder={getLabel(500351, "请输入关键字")}
            value={keywords} onChange={val => this.setState({ keywords: val })}
            onSearch={() => this.commonBrowserData(this.props)}
          />
          <Table
            showHeader={false} dataSource={dataSource}
            loading={loading} pagination={pagination}
            columns={columns} onRowClick={this.handleRowClick}
            scroll={{ y: this.incomeRef ? this.incomeRef.state.height - 106 : 600 }}
          />
        </div>
      </WeaDialog>
    );
  }
}

export default LedgerSalaryItemSelectDialog;