import React, { useEffect, useState, useRef } from 'react';
import { Form, Input, Button, Table, Radio } from 'antd';
import {CloseOutlined} from '@ant-design/icons';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import moment from 'moment';
import './index.less'
import ModalForm1 from './table1'
import { httpget2, httppost2 } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';

const Page = ({projectId,onCancel}) => {
    const [data,setData] = useState({data:[],tms:{}})
    const [tab,setTab] = useState('1')
    const columns = [
        { title: '序号', key: 'inx', dataIndex: 'inx', align:"center",render: (text, rec, index) => index + 1 },
        { title: '时间', key: 'tm', dataIndex: 'tm', align:"center", width:180,render:v=>v.slice(0, 16)},
        { title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', align:"center", width:100,render:(v,row)=>{
            const val = v===null?'-':Number(v).toFixed(2)
            return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>{val}{row.ispreDrp==='1'?<div style={{marginLeft:'5px',width:'20px',height:'20px',borderRadius:"10px",border:'1px solid rgb(245, 154, 35)',color:'rgb(245, 154, 35)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px'}}>预</div>:null}</div>
        }},
        { title: '实测水位(m)', key: 'realSwHValue', dataIndex: 'realSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
        { title: '预报水位(m)', key: 'ycSwHValue', dataIndex: 'ycSwHValue', align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
        { title: '入库流量(m³/s)', key: 'realRkQValue', dataIndex: 'realRkQValue', width:120, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
        { title: '预报入库流量(m³/s)', key: 'ycRkQValue', dataIndex: 'ycRkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
        { title: '实际出库流量(m³/s)', key: 'realCkQValue', dataIndex: 'realCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
        { title: '预报出库流量(m³/s)', key: 'ycCkQValue', dataIndex: 'ycCkQValue', width:160, align:"center",render:(v)=>v===null?'-':Number(v).toFixed(2)},
      ];


    useEffect(()=>{
        (async()=>{
            const {code , data} = await httpget2(apiurl.fxdd_xyt.hsyb.ybfagl.getData+'?projectId='+projectId)
            if(code!==200){
                return
            }
            setData({data:[...data.voList],tms:{
                forecastTime: data.forecastTm,
                projectTm: data.projectTm,
                startTime: data.startTm,
                endTime: data.endTm,
                forecastPeriod: data.forecastPeriod,
                forecastWarm: data.forecastWarm,
                type:data.type,
                ycMaxSwH:data.ycMaxSwH,
                ycMaxRkQ:data.ycMaxRkQ,
                ycMaxCkQ:data.ycMaxCkQ,
                ycSumFlood:data.ycSumFlood, 
            }})
        })()
    },[])
    return (
        <div className='normalModalStyle homeModal2' style={{paddingBottom:'20px'}}>
            <div className="normalModalStyle_title">
                <div className="normalModalStyle_title_icon"></div>
                预报成果详情
                <div className="normalModalStyle_title_cancel">
                    <CloseOutlined onClick={onCancel} style={{color:"#333"}}/>
                </div>
            </div>
            <div className='fxdd_hsybjs_content_item2_toolbar'>
                预见期(小时)：
                <span style={{marginRight:'55px'}}>{data?.tms?.forecastPeriod}</span>
                预热期(天)：
                <span style={{marginRight:'55px'}}>{data?.tms?.forecastWarm}</span>
                预报时间：
                <span style={{marginRight:'55px'}}>{data?.tms?.forecastTime}</span>
                开始时间：
                <span style={{marginRight:'55px'}}>{data?.tms?.startTime}</span>
                结束时间：
                <span style={{marginRight:'55px'}}>{data?.tms?.endTime}</span>
                <div className='fxdd_hsybjs_content_item2_toolbar_tab'>
                <Radio.Group onChange={(e)=>{setTab(e.target.value)}} defaultValue="1">
                    <Radio.Button value="1">数据图</Radio.Button>
                    <Radio.Button value="2">数据表</Radio.Button>
                </Radio.Group>
                </div>
            </div>
            <div className='fxdd_hsybjs_content_item2_toolbar2'>
                <div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最高调洪水位(m):<span>{data?.tms?.ycMaxSwH?.toFixed(2)}</span></div>
                <div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大入库流量(m³/s):<span>{data?.tms?.ycMaxRkQ?.toFixed(2)}</span></div>
                <div className='fxdd_hsybjs_content_item2_toolbar_content'>预报最大下泄流量(m³/s):<span>{data?.tms?.ycMaxCkQ?.toFixed(2)}</span></div>
                <div className='fxdd_hsybjs_content_item2_toolbar_content'>预报洪水总量(万m³):<span>{data?.tms?.ycSumFlood?.toFixed(2)}</span></div>
            </div>
            <div className='fxdd_hsybjs_content_item2_content'>
                {
                    tab==='1'?
                    <ReactEcharts option={drpOption(data)} style={{width: "1500px", height: '600px'}}/>
                    :null //<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
                }
                {
                    tab==='2'?
                    <div className="colorTable" style={{padding:"10px 30px",height:'600px'}}>
                        <Table rowKey="id"
                            sticky
                            columns={columns}
                            pagination={false}
                            dataSource={data.data}
                            scroll={{ y: "540px"}}
                        />
                    </div>:null
                }
            </div>
        </div>
    );
}

export default Page;