import React from 'react';
import DpTab from '../../../../layouts/mui/DpTab';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpTabs from '../../../../layouts/mui/DpTabs';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import WarningCard from './historyYy'
import WarningCardBottom from './historyYyBottom';
import WarningRight from './rightYy';
import VideoPlayer from './VideoCom'
import './index.less'
function HDStDlg({ record, onClose }) {
  const [value, setValue] = React.useState(0);
  const warnObj = {
    id: 1,
    title: '2024年12月10日-降雨叠加50mm-无隐患',
    type: '现在时',
    risk: '余家河无隐患',
    timeRange: '2024-12-10 10:00:00至2024-12-10 18:00:00',
    status: '实测降雨+无隐患',
    createTime: '2024-12-10 16:24:16'
  }
  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>
      <DialogContent style={{ padding: 0, width: '100%', overflowX: 'hidden', height: '100rem' }}>
        <DpAppBar position="sticky">
          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
            <DpTab label="预演方案" />
          </DpTabs>
          <DpCloseButton onClick={onClose} />
        </DpAppBar>
        <div style={{ display: 'flex' }}>
          <div className='yy-left'>
            <WarningCard
              key={warnObj.id}
              data={warnObj}
            />
            <img src={`${process.env.PUBLIC_URL}/assets/lsyy.png`} style={{ width: '100%', height: 480 }} />
            <WarningCardBottom
              key={warnObj.id}
              data={warnObj}
            />
          </div>
          <div className='yy-middle'>
            <VideoPlayer
              videoUrl={`${process.env.PUBLIC_URL}/assets/yyVideo.mp4`}
              date=""
            />
            {/* <video src={`${process.env.PUBLIC_URL}/assets/yyVideo.mp4`} style={{width:'100%',height:'100%'}}></video> */}
          </div>
          <div className='yy-right'>
            <WarningRight />

          </div>
        </div>
        {/* <iframe src={`${process.env.PUBLIC_URL}/assets/${record.planName}.pdf`} width="100%" height="100%"></iframe> */}
      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default React.memo(HDStDlg);