import React, { useEffect, useState } from 'react'
import Box from './public/table-card';
import CarouselList from './public/carousel-list';
import { Tooltip } from 'antd';

function AlarmList(props) {
    const { cardContentHeight } = props;

    const data = [
        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
        ['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
    ]
    const renderBody = () => {
        return <CarouselList
            header={['预警内容', '预警等级', '预警时间']}
            data={data?.map(s => {
                return [
                    <Tooltip placement="top" title={s[0]}>
                        {s[0].length > 20 ? s[0]?.taskNamesubstring(0, 20) + '...' : s[0]}
                    </Tooltip>,
                    <div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>,
                    s[2]
                ]
            })}
            rowNum={6}
            height={cardContentHeight}
            multiellipsis
            columnWidth={[180, 80, 150]}
        />
    }

    return <Box title={"预警列表"}>
        {renderBody()}
    </Box>
}

export default AlarmList;