import React, { Component } from 'react'
import {toJS} from 'mobx'
import {observer} from 'mobx-react';
import {WeaRadioGroup, WeaTable} from 'ecCom'
import {Spin} from 'antd'
import AddToGroup from './AddToGroup';
import classnames from 'classnames';
import {
    i18n
} from '../../public/i18n';
import SearchRadio from './SearchRadio'


@observer
export default class GroupSearch extends Component {

    constructor(props) {
		super(props);
	}
    componentDidMount () {
        const {
			store
        } = this.props;
        const {
            initData,
        } = store;
        initData();
    }

    render() {
        const {store} = this.props;
        const { searchColumns, searchDatas, tableProps, total, pageIndex, pageSize , getPagenitionParams, tableChange} = store;
        const pagination = {
            total,
            current: pageIndex,
            pageSize: pageSize,
            showQuickJumper: true,
            pageSizeOptions: [10, 20, 50, 100],
            showSizeChanger: true,
            showTotal: (total) => {
                return `${i18n.label['18609']()} ${total} ${i18n.label['30690']()}`;
            },
            onShowSizeChange:(current, pageSize)=>{
                getPagenitionParams(1, pageSize)
              },
              onChange:(current) => {
                getPagenitionParams(current)
              },
        }

        const className = classnames({
			['tabPane']: true,
			['tabPane-include']: store.containerInitFinished.detachable
        })
        const h = $('#wrap').height() - $('#group').height() - 44 - 90;
        return (
            <div id = 'wrap' className={className}>
                <div id= 'group' >
                <SearchRadio ecId={`${this && this.props && this.props.ecId || ''}_SearchRadio@1pa548`} store = {store}/>
               </div>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9jz6k1`}  
                    columns = {searchColumns}
                    dataSource = {toJS(searchDatas)}
                    pagination = {pagination}
                    style={{padding:'0 10px'}}
                    scroll={{y: h}}
                    rowKey = {record => record.id}
                    onChange = {(pagination, filters, sorter) => tableChange(pagination, filters, sorter)}
                    {...tableProps}
                    />
            <AddToGroup ecId={`${this && this.props && this.props.ecId || ''}_AddToGroup@o7tqr1`} store= {store} />
            </div>
        )
    }
}
