import React,{useEffect,useState,useRef,useMemo} from 'react'
import { Table, Button } from 'antd'
import ModalForm from './form';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption'
import apiurl from '../../../../../service/apiurl';
import { httppost2 } from '../../../../../utils/request';
import { CrudOpRender_text } from '../../../../../components/crud/CrudOpRender';
import BasicCrudModal from '../../../../../components/crud/BasicCrudModal2';
export default function Zrtx() {
    const refModal = useRef();
    const columns = [
        {
            title: '序号', dataIndex: 'index', key: 'index', align: "center",
            render: (r, c,i) => <span>{i + 1}</span>
         },
        { title: '水位(m)', dataIndex: 'rz', key: 'rz',align:"center" },
        { title: '库容(万m³)', dataIndex: 'w', key: 'w',align:"center" },
        {
            title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200,
            render: (value, row, index) => (<CrudOpRender_text  del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
         },
    ];
    const [data, setData] = useState([])
    const option = useMemo(() => {
      return drpOption({data});
    }, [data])
    const getData = async () => {
        try {
            const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.kr.list)
            setData(res.data.map((item,i) => ({...item,inx:i + 1})))
        } catch (error) {
            console.log(error);
            
        }
    }

    const command = (type) => (params) => {
        if (type === 'save') {
          refModal.current.showSave({});
        } else if (type === 'edit') {
          refModal.current.showEdit(params)
        } else if (type === 'view') {
          refModal.current.showView(params);
        } else if (type === 'del') {
          refModal.current.onDeletePost(apiurl.dataResourcesCenter.projectAndWater.kr.delete,params);
        } 
      }
    useEffect(() => {
      getData();
    }, [])
    
  return (
      <div>
         <h1><Button type='primary' onClick={() => {refModal.current.showSave({})}}>新增</Button></h1>
         <div style={{display:"flex",columnGap:10,width:"100%"}}>
          <div style={{width:500}}>
          <Table
              rowKey="inx"
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{ y:"calc( 100vh - 300px )"}}
          />
          </div>
          <div className='right-echarts' style={{ flex: 1 }}>
              {
                  data.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>

        <BasicCrudModal
          width={550}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={getData}
        />
    </div>
  )
}