import { Grid } from '@material-ui/core';
import React from 'react';
import useRequest from '../../../../utils/useRequest';
import { skInfo } from '../../../../models/_/search';
import { adnmCun, adnmZhen } from '../../../../models/_/adcd';
import { Person } from '@material-ui/icons';
import DescriptionItem from '../DescrptionItem';


function Personel({ data }) {
  return (
    <Grid container alignItems="center" spacing={1} style={{ color: '#bbb' }}>
      <Grid item><Person /></Grid>
      <Grid item style={{ fontWeight: 'bold', color: '#fff' }}>{data.name}:</Grid>
      {data.zw && <Grid item>{data.zw};</Grid>}
      {data.zz && <Grid item>{data.zz};</Grid>}
      {data.dw && <Grid item>{data.dw};</Grid>}
      {data.phone && <Grid item>{data.phone}</Grid>}
    </Grid>
  )
}


function SkInfo({ record }) {
  let { data } = useRequest(() => skInfo(record));
  data = data || {};

  return (
    <div>
      <Grid container size="small">
        <DescriptionItem label="水库名称">{data.stnm}</DescriptionItem>
        <DescriptionItem label="设计洪水位(m)">{data.dsflz}</DescriptionItem>
        <DescriptionItem label="校核洪水位(m)">{data.HJHSW}</DescriptionItem>
        <DescriptionItem label="正常蓄水位(m)">{data.ZCXSW}</DescriptionItem>
        <DescriptionItem label="死水位(m)">{data.ddz}</DescriptionItem>
        <DescriptionItem label="汛限水位(m)">{data.fsltdz}</DescriptionItem>
        <DescriptionItem label="总库容(万方)">{data.ZKR}</DescriptionItem>
        <DescriptionItem label="防洪库容(万方)">{data.FHKR}</DescriptionItem>
        <DescriptionItem label="兴利库容(万方)" span={2}>{data.XLKR}</DescriptionItem>

      
      </Grid>
    </div>
  )
}

export default SkInfo;