/*
 * Author: 黎永顺
 * Description: 异常列表
 * Date: 2022-04-20 21:00:54
 * LastEditTime: 2022-05-09 15:07:19
 */
import React, { Component } from "react";
import { Button, Icon, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { WeaInputSearch, WeaTable } from "ecCom";
import "./index.less";

@inject("standingBookStore")
@observer
export default class AbnormalListIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      current: 1,
      searchValue: "",
      tableData: {
        list: [],
        columns: [],
        total: 0
      }
    };
  }

  componentDidMount() {
    const { billMonth } = this.props;
    const { current } = this.state;
    this.getChangeList({ billMonth, current });
  }

  getChangeList = (payload = {}) => {
    const { getChangeList, tableStore } = this.props.standingBookStore;
    getChangeList({ ...payload }).then(({ list, total }) => {
      this.setState({
        tableData: {
          list,
          total
        }
      });
    });
  };

  handleSearch(value) {
    const { billMonth } = this.props;
    this.getChangeList({ billMonth, current: 1, userName: value });
  }

  render() {
    const { remarks, billMonth, selectedKey } = this.props;
    const { selectedRowKeys } = this.state;
    const { loading, tableStore } = this.props.standingBookStore;
    const columns = _.map(
      _.filter(tableStore.columns, (it) => it.hide && it.hide === "false"),
      (item) => ({ ...item, width: item.oldWidth })
    );
    let { list, total } = this.state.tableData;
    const pagination = {
      total,
      current: this.state.current,
      showTotal: (total) => `共 ${total} 条`,
      onChange: (current) => {
        this.setState({ current });
        this.getChangeList({ billMonth, current });
      }
    };
    return (
      <div className="normalWapper">
        <div className="topContent">
          <div className="month">
            <span>
              账单月份
              <Tooltip
                placement="topLeft"
                title="提示：列表显示未维护缴纳起始月的账单月入职人员（不在系统缴纳范围内，可添加到缴纳范围）和有缴纳起始月未维护缴纳最后月的账单月离职人员（在系统缴纳范围内，可从缴纳范围移除）。">
                <Icon type="question-circle"/>
              </Tooltip>
            </span>
            <span>{billMonth}</span>
          </div>
        </div>
        <div className="tabOption">
          <Button>导出全部</Button>
          <WeaInputSearch value={this.state.searchValue}
                          placeholder={"请输入姓名"}
                          onChange={(value) => {
                            this.setState({ searchValue: value });
                          }}
                          onSearch={(value) => {
                            this.handleSearch(value);
                          }}
          />
        </div>
        {/* table */}
        <div>
          <Spin spinning={loading}>
            <WeaTable
              rowKey="id"
              columns={columns}
              dataSource={list}
              loading={loading}
              pagination={pagination}
              scroll={{ x: 1200 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}
