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



const Page = () => {
    const dispatch = useDispatch();
    const [ tableData, setTableData ] = useState([])
    const [ checked, setChecked ] = useState('渗压监测')
    const columns = useMemo(() => {
        if(checked==='渗压监测'){
            return [
                { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
                { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
                { title: '管水位(m)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true,  render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div>  },
            ]
        }else if(checked === '渗流监测'){
            return [
                { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
                { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
                { title: '渗流量(L/s)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div>   },
            ]
        }else{
            return [
                { title: '监测点', key: 'cd', dataIndex: 'cd',align: "center",width: 80, ellipsis: true },
                { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)}</div></div> },
                { title: <div><div>x方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
                { title: <div><div>y方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
                { title: <div><div>h方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
            ]
        }
    }, [checked]);
    const getData = async(val)=>{
        let url = ''
        dispatch.map.setLayerVisible({ SLLayer: false })
        dispatch.map.setLayerVisible({ SYLayer: false })
        dispatch.map.setLayerVisible({ WYLayer: false })
        if(val==='渗压监测'){
            dispatch.map.setLayerVisible({ SYLayer: true })//渗压
            url = apiurl.home.sy
        }else if(val==='渗流监测'){
            dispatch.map.setLayerVisible({ SLLayer: true })//渗流
            url = apiurl.home.sl
        }else{
            dispatch.map.setLayerVisible({ WYLayer: true })//位移
            url = apiurl.home.wy
        }
        const { code, data} = await httpget2(url)
        if(code!==200){
            message.error('查询失败')
            return 
        }
        setChecked(val)
        setTableData(data)
        console.log('list',data)
    }

    useEffect(()=>{
        getData('渗压监测')

        return ()=>{
            dispatch.map.setLayerVisible({ SLLayer: false })
            dispatch.map.setLayerVisible({ SYLayer: false })
            dispatch.map.setLayerVisible({ WYLayer: false })
        }

    },[])

  

    return (
        <>
        <div className="home_yuqing">
            <div className="home_yuqing_header">
                {
                    ['渗压监测','渗流监测','位移监测'].map((item)=>
                        <div><div 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={checked == '位移监测' ?{
                    pageSize: 100,
                    showSizeChanger: true,
                    pageSizeOptions: [ '100', '200']}:false}
                    dataSource={tableData}
                    scroll={{ y: "300px"}}
                    onRow={
                        (data)=>({
                            onClick:()=>{
                            dispatch.runtime.setFeaturePop({
                                id: data.stcd,
                                data:{...data},
                                type: checked==='渗压监测'?'shenya':checked==='渗流监测'?'shenliu':'weiyi',//'drp',
                                lgtd: data.lgtd,
                                lttd: data.lttd,
                            })
                            }
                        })
                    }
                />
            </div>
        </div>
        </>
    )
}

export default Page