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

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

const WGGSContent = ({
    classPrefix = '',
    id,
    throwAberrantCode,
    startTime,
    endTime,
    throwPointId,
}: WGGSContentProps) => {
    const data = throwFailBehaviorService.list({
        housingEstateId: id,
        startDatetime: startTime,
        endDatetime: endTime,
        throwPointId,
        throwAberrantCode: throwAberrantCode === 'all' ? '' : throwAberrantCode,
    });
    return (
        <div className={`${classPrefix}-content`}>
            {data?.map?.(item => {
                const photoId = JSON.parse(item.photoAfter || '[]')[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.id} className={`${classPrefix}-content-item`}>
                        <div className={`${classPrefix}-content-item-img`}>
                            <VtxImage src={str} />
                        </div>
                        <div className={`${classPrefix}-content-item-info1`}>
                            <span>{item.throwPointName}</span>
                            <span
                                className={`${classPrefix}-content-item-${item.rectificationStatus}`}
                            >
                                {item.rectificationStatusDesc}
                            </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;
