/*
 * Author: 黎永顺
 * Description: 总览
 * Date: 2022-04-20 20:49:23
 * LastEditTime: 2022-05-09 15:07:56
 */
import React, { Component } from "react";
import { Icon, Tooltip, Button, Spin } from "antd";
import { inject, observer } from "mobx-react";
import { WeaInputSearch, WeaTable } from "ecCom";
import "./index.less";

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

  componentDidMount() {
    const { billMonth } = this.props;
    this.getOverViewList({ billMonth });
  }

  getOverViewList = (payload = {}) => {
    const { getOverViewList } = this.props.standingBookStore;
    getOverViewList({ ...payload, current: 1 }).then(
      ({ list, columns = [], total }) => {
        columns = _.map(
          _.filter(columns, (it) => it.dataIndex !== "id"),
          (it) => {
            // if (it.dataIndex === "employeeId") {
            //   it = {
            //     ...it,
            //     width: 150,
            //     fixed: 'left'
            //   }
            // }
            return {
              ...it,
              title: (
                <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
              ),
            };
          }
        );
        this.setState({
          tableData: {
            list,
            columns,
            total,
          },
        });
      }
    );
  };
  render() {
    const { remarks, billMonth, selectedKey } = this.props;
    const { selectedRowKeys } = this.state;
    const { loading } = this.props.standingBookStore;
    let { list, columns, total } = this.state.tableData;
    const pagination = {
      total,
      showTotal: (total) => `共 ${total} 条`,
      onShowSizeChange(current, pageSize) {
        console.log("Current: ", current, "; PageSize: ", pageSize);
      },
      onChange(current) {
        console.log("Current: ", 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>
        </div> */}
        {/* table */}
        <div style={{ padding: "0 16px" }}>
          <Spin spinning={loading}>
            <WeaTable
              rowKey="id"
              columns={columns}
              dataSource={list}
              loading={loading}
              pagination={pagination}
              scroll={{ x: 1200 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}