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 drpOption from './drpOption';

const Page = ({data}) => {  
  const [ tableData, setTableData ] = useState([])
  const [ xxsw, setXxsw ] = useState(null)
  const option = useMemo(() => drpOption(tableData,xxsw), [tableData])

  const getData = async(resCode)=>{
    const { code, data} = await httppost2(apiurl.fxdd_xyt.fhxs.getSk,{resCode:resCode})
    if(code!==200 ){
        return
    }
    const list = data.list.filter(o=>o.rz)
    setTableData(list)
    setXxsw(Number(data.flLowLimLev))
  }

  useEffect(()=>{
    if(data.resCode){
      getData(data.resCode)
    }
  },[data])

  return (
    <>
      {
        tableData.length>0?
        <ReactEcharts option={option} style={{width: "100%", height: '300px'}}/>
        :<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
      }
    </>
  )
}

export default Page;