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 ShenYa({ id, data, dispatch, onCancel }) {
  console.log(data);
  const [ tableData, setTableData ] = useState([])
  const [ tabVal, setTabVal ] = useState('1')
  const option = useMemo(() => drpOption(tableData), [tableData])
  const width = 780;
  
  const closePop = () => {
    if(onCancel){
      onCancel()
    }
    dispatch.runtime.closeFeaturePop(id);
  };

  const getData = async(tms,stationCode)=>{
    const params = {
      // type: 0,
      dateTimeRangeSo: {
        start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
        end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
      },
      stationCode: stationCode
    }
    
    const { code, data} = await httppost2(apiurl.home.wyList,params)
    if(code!==200){
        return
    }
    setTableData(data)
  }

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

  return (
    <>
      <div className="normalModalStyle homeModal2">
          <div className="normalModalStyle_title">
              <div className="normalModalStyle_title_icon"></div>
              {data.stationCode}
              <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)} setTabVal={setTabVal}/>
          </div>
          <div className='homeModal2_content'>
              {
                  tabVal==='1'?
                    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>
                    :null
              }
              {
                  tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
              }
          </div>
      </div>
    </>
  )
}

export default React.memo(ShenYa);