import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Modal, message } from 'antd';
import usePageTable from '../../../components/crud/usePageTable2'
import { createCrudService } from '../../../components/crud/_';
import { httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import SetDrpStation from '../setMapStation/drp.js'
import moment from 'moment';



const Page = () => {
    const [ tableData, setTableData ] = useState([])//在线
    const [ tableData2, setTableData2 ] = useState([])//离线
    const [ checked, setChecked ] = useState('离线')
    console.log(checked)
    const columns = [
        { title: '序号', key: 'stationCode', dataIndex: 'stationCode',align: "center",width: 50, ellipsis: true, render: (text, rec, index) => index + 1 },
        { title: '站点名称', key: 'stnm', dataIndex: 'stnm',align: "center",width:80, ellipsis: true, },
        { title: '最后数据时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true },
    ];
    const getData = async(val)=>{
        setChecked(val)
        const { code, data} = await httppost2(apiurl.home.jcsb)
        if(code!==200){
            return
        }
        setTableData(data.online)
        setTableData2(data.offLine)
        console.log('list',data)
    }

    useEffect(()=>{
        getData('离线')
    },[])

  

    return (
        <>
        <div className="home_yuqing">
            <div className="home_yuqing_header">
                {
                    ['离线','在线'].map((item)=>
                        <div style={{width:'50%'}}><div style={{width:'90%'}} className={checked===item?'home_yuqing_header_item avtive':'home_yuqing_header_item'} onClick={()=>getData(item)}>{item}</div></div>
                    )
                }
            </div>
            <div className="ant-card-body" style={{padding:"10px"}}>
                <Table rowKey="stationCode"
                    sticky
                    columns={columns}
                    pagination={false}
                    dataSource={checked==='离线'?tableData2:tableData}
                    scroll={{ y: "300px"}}
                />
            </div>
        </div>
        </>
    )
}

export default Page