import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, Tree, Row, Col, Button, Input, Table } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';

import './style.less';
function AcquisitionLog(props) {
    const { loading, clientHeight, actions, dispatch, acqlogs } = props;
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [searchValue, setSearchValue] = useState('')
    const queryData = (search) => {
        const query = {
            limit: search ? 10 : pageSize || 10,
            page: search ? 1 : currentPage || 1,
            taskName: searchValue
        }
        dispatch(actions.metadataAcquisition.getLogs(query));
    }

    useEffect(() => {
        queryData();
    }, [pageSize, currentPage]);

    const columns = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
            render: (text, record) => {
                return record?.acquisitionTask?.taskName;
            }
        },
        {
            title: '数据源名称',
            dataIndex: 'dataSourceName',
            render: (text, record) => {
                return record?.acquisitionTask?.dataSource?.name;
            }
        },
        {
            title: '适配器类型',
            dataIndex: 'adapter',
        },
        {
            title: '采集方式',
            dataIndex: 'control',
        },
        {
            title: '执行周期',
            dataIndex: 'cron',
            // render: (text, record) => {
            //     return transCron(record?.cron);
            // }
        },
        {
            title: '重复次数',
            dataIndex: 'retryCount',
        },
        {
            title: '时间间隔(分钟)',
            dataIndex: 'retryTime',
        },
    ];

    return <Spin spinning={loading}>
        <Row className='protable-title'>
            <Input
                value={searchValue} onChange={e => { setSearchValue(e.target.value) }}
                style={{ width: 220, marginRight: 15 }} placeholder="数据源或任务名称" />
            <Button onClick={() => { queryData() }} type='primary'>查询</Button>
        </Row>

        <ProTable
            columns={columns}
            dateFormatter="string"
            search={false}
            scroll={
                {
                    scrollToFirstRowOnChange: true,
                    y: clientHeight - 260
                }
            }
            pagination={{
                size: 'large',
                total: acqlogs?.count,
                showSizeChanger: true,
                showQuickJumper: true,
                current: currentPage,
                pageSize: pageSize || 10,
                defaultPageSize: 10,
                pageSizeOptions: [10, 20, 50],
                showTotal: (total) => {
                    return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                },
                onShowSizeChange: (currentPage, pageSize) => {
                    setCurrentPage(currentPage);
                    setPageSize(pageSize);

                },
                onChange: (page, pageSize) => {
                    setCurrentPage(page);
                    setPageSize(pageSize);

                }
            }}
            dataSource={acqlogs?.rows || []}
            options={false}
        />
    </Spin>

}

function mapStateToProps(state) {
    const {
        global, acqlogs
    } = state;
    return {
        loading: acqlogs.isRequesting,
        clientHeight: global.clientHeight,
        actions: global.actions,
        acqlogs: acqlogs?.data || {},

    };
}

export default connect(mapStateToProps)(AcquisitionLog);