import { useEffect, useState } from "react"
import { Button, Modal, message, Table } from 'antd';
import {useDispatch, useSelector} from "react-redux";

import GeoJSONFormat from "ol/format/GeoJSON";
import Feature from "ol/Feature";
import FillStyle from "ol/style/Fill";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style";
import StrokeStyle from "ol/style/Stroke";
import { Vector as VectorSource } from "ol/source";

import { httppost2 } from "../../../utils/request";
import apiurl from "../../../service/apiurl";
import { geometryCenter } from "../../../utils/tools";
import moment from "moment";



const Page = ({mySetTms}) => {
    const dispatch = useDispatch();
    let mapObj = useSelector(s => s.map.map)
    const [ dataObj, setDataObj ] = useState({})
    const [ open, setOpen ] = useState(false)
    const [ key , setkey ] = useState('')
    const [ tms , setTms ] = useState([
        moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss'),
    ])

    const columns1 = [
        { title: '巡查完成日期', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true },
        { title: '巡查人', key: 'drp', dataIndex: 'drp',align: "center" },
        { title: '异常项次', key: 'drp', dataIndex: 'drp',align: "center" },
    ];

    const columns2 = [
        { title: '上报时间', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true },
        { title: '巡检问题描述', key: 'drp', dataIndex: 'drp',align: "center" },
    ];

    useEffect(()=>{
        (async()=>{
            const params = {
                start:tms[0],
                end:tms[1]
            }
            const { code, data } = await httppost2(apiurl.home.yj_qxyj,params)
            if(code!==200){
                message.error('请求失败')
                return
            }
            mySetTms([
                moment(tms[0]),
                moment(tms[1])
            ]) 
            setDataObj(data)
        })()
    },[])


    const addHlLayer = (geojsonrv,name,color,item)=>{
        mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
            if( (layer.values_.name) && ((layer.values_.name).indexOf("HlSX_") !== -1 || (layer.values_.name).indexOf("HlItem_") !== -1 || (layer.values_.name).indexOf("LyItem_") !== -1) ){
                layer.getSource().clear();
            }
        })

        if(!geojsonrv){
            return
        }
        const geojsonFormat = new GeoJSONFormat();
        let geometry = geojsonFormat.readGeometry(geojsonrv, {
        featureProjection: 'EPSG:3857',
        });
        const feature = new Feature({
            geometry,
            data: item,
            name: name
        });

        var vectorSource = new VectorSource({
            features: [feature]
        });

        const vectorLayer = new VectorLayer({
            // @ts-ignore
            name: name,
            source: vectorSource,
            style: new Style({
                stroke: new StrokeStyle({
                    color: color,
                    width: 4,
                }),
            }),
            zIndex:100
        });

        mapObj.addLayer(vectorLayer);
    }
  

    return (
        <div className="xunchaxunjian">
            <div className="bodyBox">
                <div className="bodyBoxItem">
                    <div className="num" style={{color:'#04D919'}}>{dataObj.qxWarn?.length||0}</div>
                    <div className="content">本月巡查</div>
                </div>
                <div className="bodyBoxItem">
                    <div className="num" style={{color:'#04D919'}}>{dataObj.shiftWarn?.length||0}</div>
                    <div className="content">本年巡查</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem">
                    <div className="num">{dataObj.pressWarn?.length||0}</div>
                    <div className="content">未处理异常</div>
                    <div></div>
                </div>
            </div>

            <div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
            
            <div className='homePage_head2'>
                <div className='homePage_head2_Bg'>
                    <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
                    {'本月巡查记录'}
                </div>
            </div>

            <div className="ant-card-body" style={{padding:"10px"}}>
                <Table rowKey="adcd"
                    sticky
                    columns={columns1}
                    pagination={false}
                    dataSource={[
                        {stnm:'05-19 日常巡检',drp:10,data:{"type":"MultiLineString","coordinates":[[[108.946468916,29.839743716],[108.94648914,29.839752481],[108.946539808,29.839746046],[108.946613728,29.839728456],[108.946710354,29.839695317]]]}},
                        {stnm:'2',drp:11,data:{"type":"MultiLineString","coordinates":[[[108.81539631,29.812984419],[108.815424872,29.813001491],[108.815487593,29.813061075],[108.815576108,29.813157977],[108.815677919,29.813283716]]]}},
                    ]}
                    scroll={{ y: "300px"}}
                    onRow={
                        (data)=>({
                            onClick:()=>{
                                addHlLayer(data.data,'HlItem_'+data.stnm,'#00FFFF',data)
                                const center = geometryCenter({type:"LineString",coordinates:data.data.coordinates[0]}); 
                                dispatch.runtime.setFeaturePop({
                                    id: data.stnm,
                                    data: data,
                                    type: 'xunjian',
                                    lgtd: center[0],
                                    lttd: center[1],
                                })
                            }
                        })
                    }
                />
            </div>

            <div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
            
            <div className='homePage_head2'>
                <div className='homePage_head2_Bg'>
                    <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
                    {'待处理问题清单'}
                </div>
            </div>

            <div className="ant-card-body" style={{padding:"10px"}}>
                <Table rowKey="adcd"
                    sticky
                    columns={columns2}
                    pagination={false}
                    dataSource={[
                        {stnm:'1',drp:10},
                        {stnm:'2',drp:11},
                    ]}
                    scroll={{ y: "300px"}}
                    onRow={
                        (data)=>({
                            onClick:()=>{
                            // dispatch.map.setLayerVisible({"HdswLayer":true});
                            dispatch.runtime.setFeaturePop({
                                id: data.stnm,
                                data: data,
                                type: 'daichuli',
                                lgtd: data.lgtd,
                                lttd: data.lttd,
                            })
                            }
                        })
                    }
                />
            </div>
        </div>
    )
}

export default Page