import React, { Component } from "react";
import { WeaTable } from "ecCom";
import * as API from "../../../../apis/special";

class SpecialAddContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      columns: [],
      loading: {
        query: false
      },
      selectedRowKeys: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.specialId !== this.props.specialId) {
      nextProps.specialId && this.specialAddDeductionGetDetailList({ specialAddDeductionId: nextProps.specialId });
    }
  }

  specialAddDeductionGetDetailList = (payload) => {
    this.setState({ loading: { ...this.state.loading, query: true } });
    API.specialAddDeductionGetDetailList(payload).then(({ status, data }) => {
      this.setState({ loading: { ...this.state.loading, query: false } });
      if (status) {
        const { columns, list: dataSource, pageSize, pageNum, total } = data;
        this.setState({
          columns, dataSource,
          pageInfo: {
            ...this.pageInfo,
            pageSize, pageNum, total
          }
        });
      }
    });
  };

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

export default SpecialAddContent;