import React from 'react';
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 DpTab from '../../../../layouts/mui/DpTab';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import Overall from './Overall';
import './index.less';
import JZReal from './JZReal';
import ZXJT from './ZXJT';
import FJReal from './FJReal';
import GYSBReal from './GYSBReal';
import Personels from './Personels';
import ZMT from './ZMT';
import BasicInfo from './BasicInfo';


function PumpDlg({ record, onClose }) {
  const [value, setValue] = React.useState(0);

  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>
      <DialogContent style={{ padding: 0, width: '82rem', overflowX: 'hidden' }}>
        <DpAppBar position="sticky">
          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
            <DpTab label="监测汇总" />
            <DpTab label="机组监测" />
            <DpTab label="公用设备监测" />
            <DpTab label="辅机监测" />
            <DpTab label="主线接图" />
            <DpTab label="闸门图" />
            <DpTab label="预案" />
            <DpTab label="联系人" />
            <DpTab label="基础信息" />
          </DpTabs>
          <DpCloseButton onClick={onClose} />
        </DpAppBar>
        <div style={{ padding: '2rem', height: '52rem' }}>
          {value === 0 && <Overall />}
          {value === 1 && <JZReal />}
          {value === 2 && <GYSBReal />}
          {value === 3 && <FJReal />}
          {value === 4 && <ZXJT />}
          {value === 5 && <ZMT />}
          {value === 6 && (
            <div style={{ padding: 100 }}>
              暂未上传预案
            </div>
          )}
          {value === 7 && <Personels />}
          {value === 8 && <BasicInfo />}
        </div>

      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default React.memo(PumpDlg);