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 [ yjData, setYjData ] = useState([])
  const option = useMemo(() => drpOption(tableData,yjData), [tableData,yjData])
  const width = 780;
  
  const closePop = () => {
    if(onCancel){
      onCancel()
    }
    dispatch.runtime.closeFeaturePop(id);
  };

  const getData = async(tms,stationCode)=>{
    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'),
      },
      stationCode: stationCode
    }
    const { code, data} = await httppost2(apiurl.home.syslList,params)
    if(code!==200){
        return
    }
    setTableData(data)
  }

  const getYjData = async(stationCode)=>{
    const params = {
      "pageSo": {
          "pageSize": 10,
          "pageNumber": 1
      },
      "stationCode": stationCode
    }

    const { code, data:{records}} = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.page,params)
    if(code!==200){
        return
    }
    const linshi = []
    records?.map((item)=>{
      if(item.status===0){
        return
      }
      if(item.valueOne||0){
        linshi.push({
          yjName:item.level ===1?'黄色预警':'红色预警', 
          value:item.valueOne,
          color:item.level ===1?'#f1bf42':'red'
        })
      }
      if(item.valueTwo||0){
        linshi.push({
          yjName:item.level ===1?'黄色预警':'红色预警', 
          value:item.valueTwo,
          color:item.level ===1?'#f1bf42':'red'
        })
      }
    })
    debugger
    setYjData(linshi)
  }

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

  return (
    <>
      <div className="normalModalStyle homeModal1">
          <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)}/>
          </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);