import React from 'react';
import { inject, observer } from 'mobx-react';
import { Icon, Table  } from 'antd';
import { WeaInputSearch } from "ecCom"
import { slideStep2Columns, dataSource } from './columns'
import AddUserModal from './addUserModal'

@inject('ledgerStore')
@observer
export default class SlideRefereUser extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            addUserModalVisible: false,
            selectedRowKeys: [],
            searchValue: ""
        }
    }

    handleTabClick(tab) {
        const { ledgerStore: {setIncludeType, getLedgerPersonRangeInclude, salarySobId, getLedgerPersonRangeExclude}} = this.props;
        setIncludeType(tab)
        if(tab == 1) {
            getLedgerPersonRangeInclude({salarySobId: salarySobId})
        } else {
            getLedgerPersonRangeExclude({salarySobId: salarySobId})
        }
    }

    componentWillMount() {
        const { ledgerStore: {getLedgerPersonRangeInclude, salarySobId}} = this.props;
        getLedgerPersonRangeInclude({salarySobId: salarySobId})
    }

    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    }


    handleTabDelete = () => {
        const {ledgerStore: {deleteLedgerPersonRange}} = this.props;
        if(this.state.selectedRowKeys.length == 0) {
            message.warning("未选择条目")
            return
        }
        deleteLedgerPersonRange(this.state.selectedRowKeys)
    }

    handleSearch = (value) => {
        const { ledgerStore: {includeType, salarySobId, getLedgerPersonRangeInclude, getLedgerPersonRangeExclude}} = this.props;
        if(includeType == 1) {
            getLedgerPersonRangeInclude({salarySobId: salarySobId, targetName: value})
        } else {
            getLedgerPersonRangeExclude({salarySobId: salarySobId, targetName: value})
        }
    }

    render() {
        const { ledgerStore: {includeType, userTableStore, addUserModalVisible, setAddUserModalVisible}} = this.props;
        let { columns, list} = userTableStore
        const { selectedRowKeys } = this.state
        columns = columns || []
        list = list || []

        list.map(item => item.key = item.id)

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        return (
            <div className="slideRefereUser">
                <div className="refereUserHeader">
                    <div className="headerLeft"><span className={includeType == 1 ? "selectedCrumbs" : "tabItem"} onClick={() => {this.handleTabClick(1)}}>关联人员范围</span> {'  '} | {'  '} <span  className={includeType == 0 ? "selectedCrumbs" : "tabItem"} onClick={() => {this.handleTabClick(0)}}>从范围中排除</span></div>
                    <WeaInputSearch className="searchInput" value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
                    <div className="headerIcon">
                        <Icon className="iconItem" type="minus-square" onClick={() => {this.handleTabDelete()}}/>
                        <Icon className="iconItem" type="plus-square" onClick={() => {setAddUserModalVisible(true)}}/>
                    </div>
                </div>
                <div>
                    <Table rowSelection={rowSelection} dataSource={list} columns={columns} pagination={{
                        total: userTableStore.total,
                        showTotal: (total) => `共 ${total} 条`,
                        current: userTableStore.pageNum
                    }}/>
                </div>

                {
                    addUserModalVisible && <AddUserModal 
                        visible={addUserModalVisible}
                        onCancel={() => {setAddUserModalVisible(false)}}
                    />
                }

            </div>
        )
    }
}