import React from 'react'
import { dataSource, slieAgentColumns } from "./columns"
import { WeaInputSearch, WeaTable } from 'ecCom'
import { Table } from 'antd'
import { inject, observer } from 'mobx-react';
import "./index.less"

@inject('salaryFileStore')
@observer
export default class SlideAgent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            searchValue: ''
        }
    }
    componentWillMount() {
        const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
        adjustRecordTaxAgentList({username: this.state.searchValue})
    }

    // 分页
    handlePageChange(value) {
        const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
        adjustRecordTaxAgentList({username: this.state.searchValue, current: value})
    }

    // 搜索
    handleSearch(value) {
        const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
        adjustRecordTaxAgentList({username: value, current: 1})
    }

    getColumns(columns) {
        let newColumns = [...columns]
        newColumns.map(item => {
            item.width = "120px"
            if(item.dataIndex == "username") {
                item.fixed = "left";
            }
        })
        return newColumns;
    }

    render() {
        const { salaryFileStore: {taxAgentList} } = this.props;
        const { searchValue } = this.state

        return (
            <div className="salaryFileSlide">
                <div className="searchBar">
                    <WeaInputSearch className="inputSearch" value={searchValue} onChange={(value) => {
                        this.setState({
                            searchValue: value
                        })
                    }} onSearch={(value) => {
 this.handleSearch(value)
}}/>
                </div>
                <div className="tableWrapper">
                    <WeaTable 
                        dataSource={taxAgentList.list} 
                        columns={this.getColumns(taxAgentList.columns ? taxAgentList.columns : [])}
                        scroll={{x: this.getColumns(taxAgentList.columns ? taxAgentList.columns : []).length * 120}}
                        pagination={{
                            onChange: (value) => {
this.handlePageChange(value)
},
                            total: taxAgentList.total,
                            showTotal: (total) => `共 ${total} 条`,
                            current: taxAgentList.pageNum
                        }}
                    />
                </div>
            </div>
        )
    }
}