import React, { useEffect, useState, useMemo } from 'react';
import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
import {CloseOutlined} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
import moment from "moment"
import ToolBar from './toolbar';
import TableData from './TableData'
import drpOption from './drpOption';

function ShenLiu({ id, data, dispatch, onCancel }) {
  console.log(data);
  const [ tableData, setTableData ] = useState([])
  const option = useMemo(() => drpOption(tableData), [tableData])
  const width = 780;
  
  const closePop = () => {
    if(onCancel){
      onCancel()
    }
    dispatch.runtime.closeFeaturePop(id);
  };

  const getData = async(tms,stcd)=>{
    // const params = {
    //   type: 2,
    //   dateTimeRangeSo: {
    //     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.syslList,params)
    // if(code!==200){
    //     return
    // }
    setTableData([])
  }

  useEffect(()=>{
    getData([moment().add(-1,'months'),moment()],data.stcd)
  },[])

  return (
    <>
      <div className="normalModalStyle homeModal1">
          <div className="normalModalStyle_title">
              <div className="normalModalStyle_title_icon"></div>
                {data.stnm}
              <div className="normalModalStyle_title_cancel">
                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
          </div>

          <div style={{padding:'0 20px'}}>
            <ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
          </div>
          <div className='homeModal1_content'>
                <div className='homeModal1_content_lf'>
                    <TableData tableData={tableData}/>
                </div>
                <div className='homeModal1_content_rf'>
                    {
                        tableData.length>0?
                        <ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
                        :<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
                    }
                </div>
          </div>
      </div>
    </>
  )
}

export default React.memo(ShenLiu);