import React from 'react'
import { dataSource, slideSalaryItemColumns } 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 SlideSalaryItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            searchValue: ''
        }
        this.searchParam = {}
    }
    
    componentWillMount() {
        const { salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
        adjustRecordSalaryItemList({})
    }

    // 切换
    handlePageChange(value) {
        this.searchParam.current = value;
        const { salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
        adjustRecordSalaryItemList(this.searchParam)
    }

    // 搜索
    handleSearch(value) {
        const {salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
        adjustRecordSalaryItemList({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: {salaryItemList} } = 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={salaryItemList.list} 
                    columns={this.getColumns(salaryItemList.columns ? salaryItemList.columns : [])}
                    scroll={{x: this.getColumns(salaryItemList.columns ? salaryItemList.columns : []).length * 120}}
                    pagination={{
                        onChange: (value) => {
this.handlePageChange(value)
},
                        total: salaryItemList.total,
                        showTotal: (total) => `共 ${total} 条`,
                        current: salaryItemList.pageNum
                    }}
                />
                </div>
            </div>
        )
    }
}