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

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

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

  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
          }
        });
      }
    );
  };
  handleExport = () => {
    const { billMonth, paymentOrganization } = this.props;
    const url = `${window.location
      .origin}/api/bs/hrmsalary/welfare/overView/export?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`;
    window.open(url, "_self");
  };

  render() {
    const { remarks, billMonth, selectedKey, paymentOrganization } = this.props;
    const { selectedRowKeys } = this.state;
    const { loading } = this.props.standingBookStore;
    let { list, columns, total } = this.state.tableData;
    const pagination = {
      total,
      showTotal: (total) => `共 ${total} 条`,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ current, pageSize });
        this.getOverViewList({
          billMonth, current,
          pageSize, paymentOrganization
        });
      },
      onChange: (current) => {
        this.setState({ current });
        this.getOverViewList({
          billMonth, current,
          pageSize: this.state.pageSize, paymentOrganization
        });
      }
    };
    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 type="primary" onClick={this.handleExport}>导出全部</Button>
        </div>
        {/* table */}
        <div className="tableWrapper">
          <WeaNewScroll height="100%">
            <Spin spinning={loading}>
              <WeaTable
                rowKey="id"
                columns={columns}
                dataSource={list}
                loading={loading}
                pagination={pagination}
                scroll={{ x: 1200 }}
              />
            </Spin>
          </WeaNewScroll>
        </div>
      </div>
    );
  }
}