import React from 'react';
import { WarningRecordCard } from '@zhst/biz';
import { Space } from 'antd';

// 例如 后端返回这样的数据结构
const backEndData = [
  {
    imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
    id: '1561561',
    warningType: '火焰识别',
    boxId: '2',
    position: '2',
    cabietId: '002',
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
    odRect: [{
      // "id": "123",
      "x": 0.5519352,
      "y": 0.2965385,
      "w": 0.05185461,
      "h": 0.24698898,
    }]
  },
  {
    imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
    id: '156156155',
    warningType: '火焰识别',
    boxId: '1',
    position: '1',
    cabietId: '001',
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
    odRect: [{
      // "id": "456",
      "x": 0.1519352,
      "y": 0.2965385,
      "w": 0.05185461,
      "h": 0.24698898,
    }]
  }
]

// 前端处理数据结构
const dataSource = backEndData.map(o => {
  return {
    imageKey: o.imageKey,
    id: o.id,
    warningType: o.warningType,
    boxId: o.boxId,
    position: o.position,
    cabietId: o.cabietId,
    warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
    // cabietText: `柜子ID: ${o.cabietId}`,  
    warningTimestamp: o.warningTimestamp,
    odRect: o.odRect
  }
})
export default () => {

  return (
    <Space size={[8, 16]} direction="vertical">
      {dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)}
    </Space>
  )
}