import React, {useState} from 'react';
import classNames from 'classnames';

import OpsRecord from '../../Device/OpsRecord'
import style from './index.less'
import VerificationList from '@/pages/Ops/Device/StandingBook/components/Verification/List'

import MeterInfo from './MeterInfo'

const Info = (props) => {
  const { id } = props.match.params
  const [charts, setCharts] = useState(1);
  const update = () => {
    setCharts(charts + 1)
  }

  return (
    // <div className={ classNames('innerFullBox',utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
    <div>
      <div className="innerFullBox">
        {/* <div className='comPrintBox'> */}
        {/*   <div className="inner"> */}
        {/*     <div className="inPadBox"> */}
        {/*       <table width="180%" border = "0" className="comPrintTable"> */}
        {/*         <tr> */}
        {/*           <th colSpan={3} className="title">设备标签卡</th> */}
        {/*         </tr> */}
        {/*         <tr> */}
        {/*           <td width="22%" className="center">设备编号</td> */}
        {/*           <td colSpan={2}>oyEPxTHBox</td> */}
        {/*         </tr> */}
        {/*         <tr> */}
        {/*           <td className="center">设备名称</td> */}
        {/*           <td colSpan={2}>A2高配房低压电表-9</td> */}
        {/*         </tr> */}
        {/*         <tr> */}
        {/*           <td className="center">规格型号</td> */}
        {/*           <td>11</td> */}
        {/*           <td rowSpan={3} valign="top"> */}
        {/*             <img src="/img/2.jpg" style = {{width:120 }} alt="" /> */}
        {/*           </td> */}
        {/*         </tr> */}
        {/*         <tr> */}
        {/*           <td className="center">管制编号</td> */}
        {/*           <td>AMD-LH20-7667777</td> */}
        {/*         </tr> */}
        {/*         <tr> */}
        {/*           <td className="center">管理单位</td> */}
        {/*           <td>华南能源托管部</td> */}
        {/*         </tr> */}
        {/*       </table> */}
        {/*     </div> */}
        {/*   </div>      */}
        {/* </div>   */}

        <MeterInfo deviceId={id} onUpdate={update} hasBook={props.match.path.indexOf('book') > -1}/>

        <div className={ classNames(style.info_box,'hidePrint')}>
          <VerificationList deviceId={id}/>
          <OpsRecord deviceId={id} charts={charts}/>
        </div>
      </div>
    </div>
  );
};

export default Info