import React,{useState,useEffect, useMemo} from 'react'
import {Table} from 'antd';
import ReactEcharts from 'echarts-for-react';
import {queryStPptnDetails} from '../../../../service/ssyq'
import { httppost2 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
import moment from 'moment';
import Toolbar from './toolbar'
import drpOption from './drpOption';

export default function Sjcx({ data }) {
    const stcd = data?.stcd||''
    const [tms, setTms] = useState([moment().add(-1,'months'),moment()])
    const [list, setList] = useState([])
    const option = useMemo(() => drpOption(list,data), [list])
    const columns = [
        { title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'120px',render: (rec) => <span>{rec.slice(5,16) ?? "-"}</span> },
        { title: '水位(m)', key: 'waterLevel', dataIndex: 'waterLevel', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '库容(万m³)', key: 'boxNum', dataIndex: 'boxNum', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '溢洪流量(m³/s)', key: 'flowNum', dataIndex: 'flowNum', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '累计溢洪量(万m³)', key: 'qtotal', dataIndex: 'qtotal', align: 'center',render: (rec) => <span>{ rec ?? "-"}</span> },
    ];

    


    useEffect(()=>{
        if(stcd){
            getList(stcd,tms)
        }
    },[stcd,tms])
  
    const getList = async (stcd,tms)=>{
        const pam = {
            dateSo:{
                start:moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
                end:moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
            },
            stcd
        }
        const { code, data } = await httppost2(apiurl.home.yihongList,pam)
        if(code!==200){
            return
        }
        setList(data)
    }

    return (
        <div className='qth_skyh_sjcx'>
            <div className='qth_skyh_sjcx_top'>
                <Toolbar search={(tm)=>{setTms([...tm])}}/>
            </div>
            <div className='qth_skyh_sjcx_center'>
                <div className='qth_skyh_sjcx_center_left'>
                    <Table 
                        owKey="tm"
                        sticky
                        columns={columns}
                        pagination={false}
                        dataSource={list}
                        scroll={{ y: "650px"}}
                    />
                </div>
                <div className='qth_skyh_sjcx_center_right'>
                    {
                        list.length>0?
                        <ReactEcharts option={option} style={{width: "100%", height: '750px'}}/>
                        :<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
                    }
                </div>
            </div>
        </div>
    )
}