import React from 'react'
import { makeStyles } from '@material-ui/core';
import HDChart from './HDChart';
import { Grid } from '@material-ui/core';
import useDescStyle from '../_/descstyle';




function RealHDTip({ record, dispatch }) {
  const classes = useDescStyle();
  const viewInfo = () => {
    dispatch?.runtime.setInfoDlg({ layerId: 'llqdLayer', properties: record })
  }

  return (
    <>
      <div className="boxhead"></div>
      <div className="featuretip-title">
        <div className="name">{record.stnm}</div>
        <div className="extra cursor-pointer" onClick={viewInfo}>详细</div>
      </div>
      <div style={{ width: '25rem' }} className='f_14'>
        <Grid container>
          <Grid item className={classes.title}>站点编号:</Grid>
          <Grid item className={classes.value}>{record.mvalue.stcd}</Grid>
          <Grid item className={classes.title}>所在地区:</Grid>
          <Grid item className={classes.value}>麻城市</Grid>
          <Grid item className={classes.title}>时间:</Grid>
          <Grid item className={classes.value}>{record.mvalue.tm}</Grid>
          <Grid item className={classes.title}>流量:</Grid>
          <Grid item className={classes.value}>{record.mvalue.hq}m³/s</Grid>
         </Grid>
      </div>

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

export default React.memo(RealHDTip);