import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { WeaTable } from 'ecCom';
import { i18n } from '../../public/i18n';
import sticky from '../../util/sticky';

@observer
export default class ScheduleList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            h: 300
        }
    }

    componentDidMount () {
        window.addEventListener('resize', this.resizeHandle);
        this.calculateH();
    }

    componentWillUnmount () {
        window.removeEventListener('resize', this.resizeHandle);
    }

    componentDidUpdate() {
        sticky('.wea-new-top-content');
    }

    resizeHandle = (e) => {
        this.calculateH();
    }

    calculateH = () => {
        setTimeout(() => {
            let h = $('.content').height() - ($('.btnBar').height() + 40 + $('.info').height() + 1 + 81 + 50);
            this.setState({
                h
            })
        }, 500)
    }

    render () {
        const { store } = this.props;
        const { listTable, total, pageIndex, pageSize, getListTableQueryParams, getScheduleData, setSelectedRowKeys, selectedRowKeys } = store;
        const { columns, datas } = store.toJS(listTable);
        const x = (columns.length - 2) * 50 + 250, y = this.state.h;
        const pagination = {
            total,
            current: pageIndex,
            // defaultCurrent: pageIndex,
            // defaultPageSize: pageSize,
            pageSize,
            showQuickJumper: true,
            pageSizeOptions: [10, 20, 50, 100],
            showSizeChanger: true,
            showTotal: (total) => {
                setTimeout(() => {
                    const pagination = $('.ant-table-pagination');
                    const paginationTips = $('.paginationTips');
                    if (pagination.length > 0 && paginationTips.length == 0)
                        pagination.append(`<span class='paginationTips'>${i18n.label['505676']()}</span>`);
                }, 500);

                return `${i18n.label['18609']()} ${total} ${i18n.label['30690']()}`;
            },
            onShowSizeChange: (current, pageSize) => {
                getScheduleData(getListTableQueryParams(current, pageSize));
                setTimeout(() => {
                    this.calculateH();
                }, 0);
            },
            onChange: (current) => {
                getScheduleData(getListTableQueryParams(current));
            }
        }
        const rowSelection = {
            selectedRowKeys: store.toJS(selectedRowKeys),
            onChange: setSelectedRowKeys
        };
        return (
            <div className='table'>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@lt4wx0`} rowSelection={rowSelection} bordered columns={columns} scroll={{ x }} dataSource={datas} pagination={pagination} />
            </div>
        )
    }
}