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), [list])
    const columns = [
        { title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'120px',render: (rec) => <span>{rec.slice(5,16) ?? "-"}</span> },
        { title: '水位(m)', key: 'sw', dataIndex: 'sw', align: 'center',width:'80px',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '库容(万m³)', key: 'kr', dataIndex: 'kr', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '溢洪流量(m³/s)', key: 'll', dataIndex: 'll', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
        { title: '累计溢洪量(万m³)', key: 'lj', dataIndex: 'lj', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
    ];

    


    useEffect(()=>{
        getList(stcd,tms)
    },[stcd,tms])
  
    const getList = async (stcd,tms)=>{
        const pam = {
            stm:tms[0].format('YYYY-MM-DD HH:mm:ss'),
            etm:tms[1].format('YYYY-MM-DD HH:mm:ss'),
            stcd
        }
        // const res = await httppost2(apiurl)
        const list = []
        for (let i=0;i<10;i++){
            list.push({
                tm:'2023-02-07 12:'+(i+10)+':00',
                sw:i+1+'.91',
                kr:i+22+'.91',
                ll:i+15+'.91',
                lj:i+41+'.91',
            })
        }
        setList(list)
    }

    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="adcd"
                        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>
    )
}