import React from 'react';
import { VtxImage } from '@vtx/components';
import './index.less';
import { throwFailPersonService } from '../../api';

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

const WGGSContent = ({
    classPrefix = '',
    id,
    startTime,
    endTime,
    throwPointId = '',
}: WGGSContentProps) => {
    const data = throwFailPersonService.list({
        housingEstateId: id,
        beginTime: startTime,
        endTime,
        throwPointId,
    });
    const { rows = [] } = data || {};
    return (
        <div className={`${classPrefix}-content`}>
            {rows.map(item => {
                const photoId = JSON.parse(item.personPhoto2 || '[]')[0]?.id;
                const tempDetectObjects = JSON.parse(item.detectObjects || '[]');
                const photoAfterArr = tempDetectObjects.find((item: any) => item.pic === 'dropPic2')
                    ?.info;
                const str = `/cloud/sdyd/markBox?fileId=${photoId}&detectObjects=${
                    photoAfterArr ? JSON.stringify(photoAfterArr) : ''
                }`;
                return (
                    <div key={item.throwFailId} className={`${classPrefix}-content-item`}>
                        <div className={`${classPrefix}-content-item-img`}>
                            <VtxImage src={str} />
                        </div>
                        <p>{item.throwPointName}</p>
                    </div>
                );
            })}
        </div>
    );
};
export default WGGSContent;
