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 { httpget2, httppost2 } from "../../../../utils/request";
import apiurl from "../../../../service/apiurl";
import moment from "moment";

 

const Page = ({record}) => {
    const [data,setData] = useState([])
    const [count ,setCount] = useState({})
    const option = useMemo(() => {
        return drpOption({data});
      }, [data])
    
    useEffect(()=>{
        if(record?.stcd){
            getData(record.stcd)
            getCount(record.stcd)
        }
    },[record])


    const getData = async(stcd)=>{ 
        const pam = {
            dateSo:{
                start:moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss'),
                end:moment().format('YYYY-MM-DD HH:mm:ss'),
            },
            stcd
        }
        const { code, data } = await httppost2(apiurl.home.yihongList,pam)
        if(code!==200){
            return
        }
        setData(data)
    }

    const getCount = async(stcd)=>{ 
        const { code, data } = await httpget2(apiurl.home.yihongCount24+stcd)
        if(code!==200){
            return
        }
        setCount(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="实时水位">{count.currWaterLevel}m</Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#70B603"}} label="转换溢洪流量">{count.flowNum}m³/s</Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="近24h溢洪量"><span style={{letterSpacing:'-1px'}}>{count.sum24}万 m³</span></Descriptions.Item>
                    <Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="采集时间"><span style={{letterSpacing:'-1px'}}>{count.createTime?.slice(5,16)}</span></Descriptions.Item>
                </Descriptions>
            </div>
        </>
    )
}

export default Page