import React from 'react';
import { useAntdTable } from 'ahooks';
import { queryPage } from '../../api';
import { ViolationRecordProps } from '../../types';
import './index.less';

interface WGGSContentProps {
    classPrefix?: string;
    id: string;
    throwAberrantCode?: string;
    startTime: string;
    endTime: string;
}

const WGGSContent = ({
    classPrefix = '',
    id,
    throwAberrantCode,
    startTime,
    endTime,
}: WGGSContentProps) => {
    const getTableData = ({ current, pageSize }: { current: number; pageSize: number }) => {
        return queryPage<ViolationRecordProps>('/cloud/sdyd/throwFail/page', {
            page: current - 1,
            size: pageSize,
            housingEstateId: id,
            throwAberrantCode: throwAberrantCode === 'all' ? '' : throwAberrantCode,
            // startDatetime: startTime,
            // endDatetime: startTime
        });
    };
    const { tableProps } = useAntdTable(getTableData, {
        defaultPageSize: 1000000,
        refreshDeps: [id, endTime, startTime],
    });
    const { dataSource } = tableProps;
    return (
        <div className={`${classPrefix}-content`}>
            {dataSource?.map?.((item, index) => {
                const photoId = JSON.parse(item.photoAfter || '[]')[0]?.id;
                return (
                    <div key={index} className={`${classPrefix}-content-item`}>
                        <div className={`${classPrefix}-content-item-img`}>
                            <img
                                src={`/aiFile/vortex/rest/cloud/np/file/downloadFileThumbnail?id=${photoId}&outputQuality=0.3&scale=0.3`}
                                // preview={{ src: `/aiFile/cloudFile/common/downloadFile?id=${photoId}` }}
                            />
                        </div>
                        <div className={`${classPrefix}-content-item-info1`}>
                            <span>{item.throwPointName}</span>
                            <span>已忽略</span>
                        </div>
                        <div className={`${classPrefix}-content-item-info2`}>
                            <span>{item.datetime}</span>
                            <div>{item.aberrantName}</div>
                        </div>
                        <div className={`${classPrefix}-content-item-info3`}>
                            <img src={require('../../imgs/avatar_empty.png')} />
                            {item.personName || '暂无关联用户'}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};
export default WGGSContent;
