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 [ data, setData ] = useState([])
    const [ data2, setData2 ] = useState([])
    const [ data3, setData3 ] = useState(0)



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

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

    useEffect(()=>{
        (
            async()=>{
                const { code, data } = await httppost2(apiurl.home.xcxj_dcl)
                if(code!==200){
                    message.error('请求失败')
                    return
                }
                setData(data)
            },

            async()=>{
                const { code, data } = await httppost2(apiurl.home.xcxj_by)
                if(code!==200){
                    message.error('请求失败')
                    return
                }
                setData2(data)
            },

            async()=>{
                const { code, data } = await httppost2(apiurl.home.xcxj_bn)
                if(code!==200){
                    message.error('请求失败')
                    return
                }
                setData3(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'}}>{data3||0}</div>
                    <div className="content">本月巡查</div>
                </div>
                <div className="bodyBoxItem">
                    <div className="num" style={{color:'#04D919'}}>{data2?.length||0}</div>
                    <div className="content">本年巡查</div>
                    <div></div>
                </div>
                <div className="bodyBoxItem">
                    <div className="num">{data?.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={data2}
                    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={data}
                    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