import React from 'react'
import { WeaInputSearch } from 'ecCom'
import { Table, Icon, message, Modal } from 'antd'
import { dataSource, slideStep5Columns} from './columns'
import ValidRuleEditModal from './step5/ValidRuleEditModal'
import { inject, observer } from 'mobx-react';

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

    componentWillMount() {
        const { ledgerStore: {getLedgerRuleList} } = this.props; 
        getLedgerRuleList()
    }

    handleItemDelete(record) {
        const { ledgerStore: {deleteLedgerRule}} = this.props;
        deleteLedgerRule([record.id])
    }

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

    handleBatchDelete() {
        const { ledgerStore: { deleteLedgerRule } } = this.props;
        const { selectedRowKeys } = this.state;
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目")
            return
        }
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
                deleteLedgerRule(selectedRowKeys)
            },
            onCancel: () => {

            },
        });
    }

    handeSearch() {
        const { ledgerStore: { getLedgerRuleList } } = this.props;
        const { searchValue } = this.state;
        getLedgerRuleList(searchValue)
    }

    render() {
        const { ledgerStore } = this.props;
        const { ledgerRuleList } = ledgerStore
        const { selectedRowKeys } = this.state; 
        let columns = ledgerRuleList.columns ? ledgerRuleList.columns.filter(item => item.dataIndex != "id") : []

        if(columns.length > 0) {
            columns.push({
                title: "操作",
                key: 'cz',
                render: (text, record) => (
                    <a onClick={() => {this.handleItemDelete(record)}}>删除</a>
                )
            })
        }


        let dataSource = ledgerRuleList.list ? ledgerRuleList.list : []
        dataSource.map(item => item.key = item.id)
         
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange.bind(this),
        };
        return (
            <div className="validRulesForm">
                <div className="headerBar">
                    <WeaInputSearch className="inputSearch" value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} 
                    onSearch={(value) => {this.handeSearch(value)}}/>
                    <span className="btnsWrapper">
                        {
                            dataSource.length > 0 && <Icon className="iconItem" type="minus-square" onClick={() => {this.handleBatchDelete()}}/>
                        }
                        <Icon className="iconItem" type="plus-square" onClick={() => {this.setState({
                            modalVisible: true
                        })}}/>
                    </span>
                </div>
                <div className="tableWrapper">
                {
                    ledgerRuleList.list && <Table rowSelection={rowSelection} dataSource={ledgerRuleList.list} columns={columns}  pagination={{
                        total: ledgerRuleList.total,
                        showTotal: (total) => `共 ${total} 条`,
                        current: ledgerRuleList.pageNum
                    }}/>
                }
                
                </div>
                {
                    this.state.modalVisible && 
                    <ValidRuleEditModal 
                        visible={this.state.modalVisible}
                        onCancel={() => {this.setState({modalVisible: false})}}
                    />
                }
            </div>
        )

    }
}