import React, { useEffect, useState } from 'react'
import CarouselList from './public/carousel-list';
import { Tooltip } from 'antd';
import { ApiTable, useFsRequest } from '$utils';
import moment from 'moment';
function AbnormalMonitoring(props) {

    const { data: logs = {} } = useFsRequest({
        url: ApiTable.getLogs,
        query: {
            logState: false,
            startTime: moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
            endTime: moment().format('YYYY-MM-DD HH:mm:ss')
        },
        pollingInterval: 1000 * 60
    });

    const dataSource = logs?.rows ? logs?.rows?.map(s => {
        return [
            <div style={{ color: '#fff' }}>
                <Tooltip placement="top" title={s?.acquisitionTask?.taskName}>
                    {s?.acquisitionTask?.taskName?.length > 20 ? s?.acquisitionTask?.taskNamesubstring(0, 20) + '...' : s?.acquisitionTask?.taskName}
                </Tooltip>
            </div>,
            moment(s?.startTime).format('YYYY-MM-DD HH:mm:ss'),
            moment(s?.endTime).valueOf() - moment(s?.startTime).valueOf() + '毫秒',
            <div style={{ color: 'rgba(245, 27, 27, 1)' }}>
                <Tooltip placement="top" title={s?.details}>
                    {s?.details?.length > 20 ? s?.details.substring(0, 20) + '...' : s?.details}
                </Tooltip>
            </div>
        ]
    }) : []
    return <div style={{ height: 149, border: '1px solid #50c9d74d', backgroundImage: 'linear-gradient(180deg, rgba(0, 32, 74, 0) 3%, rgba(80, 201, 247, 0.1) 100%)' }}>
        <div className='center-card-title' style={{ marginBottom: 6 }}><div className='_icon_left' />异常监控<div className='_icon_right' /></div>
        <CarouselList
            header={['任务名称', '采集时间', '耗时', '异常日志']}
            data={dataSource}
            rowNum={2}
            height={100}
            multiellipsis
            marginTop={-50}
        />
    </div>
}

export default AbnormalMonitoring;