import { useEffect, useState, useMemo } from "react"
import {useDispatch, useSelector} from "react-redux";
import {Descriptions} from "antd";
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption'
import { httppost2 } from "../../../../utils/request";
import apiurl from "../../../../service/apiurl";

 

const Page = () => {
    const [data,setData] = useState([])
    const option = useMemo(() => {
        return drpOption({data});
      }, [data])
    
    useEffect(()=>{
        (async()=>{
            const {data,code} = await httppost2(apiurl.dataResourcesCenter.projectAndWater.xl.list,{stcd:'61610700'})
            if(code!==200){
                return
            }
            setData(data)
        })()
    },[])



    return (
        <>          
            <div style={{width:'100%',height:'240px'}}>
                <ReactEcharts
                    option={option}
                    style={{width: "100%", height: '100%'}}
                />
            </div>
            <div style={{padding:'15px 0px 10px 15px'}}>
                <Descriptions column={2}>
                    <Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="实时水位">{103.89}m</Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#70B603"}} label="转换溢洪流量">{0.20}m³/s</Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="近24h溢洪量">{8.67}万m³</Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="采集时间">{'06-24 09:30'}</Descriptions.Item>
                </Descriptions>
            </div>
        </>
    )
}

export default Page