import React,{useState} from 'react';
import DownloadModal from '../../../businessComponents/DownloadModal';
import ContentBox from '../../../themeComponents/ContentBox';
import InfoBox from '../../../themeComponents/ContentBox/InfoBox';
import TwoImgCard from '../../../businessComponents/AlarmCard/TwoImgCard';
import VehicleCard from '../../../businessComponents/AlarmCard/VehicleCard';
import { data1 } from './mock';
import { Row, Col,Button } from 'antd';
import './index.less';

export default function CardTheme() {
  const [visible,setVisible] = useState(false)
  const modelInfoOfApply = {
    applyPicsItem: [],
    dataArray: {
      downloadContent: [
        { label: '下载类型', value: '图片' },
        { label: '设备名称', value: '测试设备3603' },
        { label: '抓拍时间', value: '1618465889000' },
      ],
      imageDetails: [
        {
          url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3790103280,4006928547&fm=26&gp=0.jpg',
        },
      ],
    },
    isApply: true,
    title: '下载申请',
  };
  return (
    <ContentBox className="card-theme-component">
      <Button onClick={()=>setVisible(true)}>下载图片</Button>
         <InfoBox title="抓拍卡片示例">
        <Row style={{ padding: 20 }}>
          {Array.from(new Array(6)).map((_, index) => (
            <Col span={8} key={index}>
              <TwoImgCard sourceData={data1} isActual={true} actionName={true} click={e => console.log(e)} handleChangeYN={e => console.log(e)} className="history-alarm-list-focus-card" />
            </Col>
          ))}
        </Row>
      </InfoBox>
      <InfoBox title="抓拍卡片示例">
        <Row style={{ padding: 20 }}>
          {Array.from(new Array(6)).map((_, index) => (
            <Col span={4} key={index}>
              <VehicleCard data={data1} alarmType='5' isActual={true} actionName={true} click={e => console.log(e)} handleChangeYN={e => console.log(e)} className="history-alarm-list-focus-card" />
            </Col>
          ))}
        </Row>
      </InfoBox>
      <DownloadModal visible={visible} {...modelInfoOfApply} toSubmit={()=>setVisible(false)} toCancel={()=>setVisible(false)}/>
    </ContentBox>
  );
}
