import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import request from 'superagent'
import Hua from '../footer/leadership/centerleft/hudong'
import moment from 'moment';
import { OlMapRequest } from '$utils'
import { useRef } from 'react';
import { getReportList } from '../../../fillion/actions/patrol'
import AutoRollComponent from '../footer/build/AutoRollComponent'
import { Carousel } from 'antd'
import { CloseOutlined } from '@ant-design/icons'

export const busWillRun = [
    { text: '非运营', value: '0' },
    { text: '运营', value: '1' },
    { text: '维修', value: '2' },
    { text: '保养', value: '3' },
    { text: '专车', value: '4' },
    { text: '机动车', value: '5' },
    { text: '包车', value: '6' },
    { text: '班车', value: '7' },
    { text: '检车', value: '8' },
]

const codeMap = {
    x: 'gpsxd',
    y: 'gpsyd',
    c: 'gpscd',
}
const OlMap = (props) => {
    const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost, patrolList, roadProjectList, tab, busRunTime, busLine, projectList } = props

    const [olMapOpenData, setOlMapOpenData] = useState([])
    const [olMap, setOlMap] = useState()
    const [curClickCoordinate, setCurClickCoordinate] = useState([])
    const [pointItem, setPointItem] = useState({})
    //
    const [busRunData, setBusRunData] = useState([])
    const [reportRoadData, setReportRoadData] = useState([])
    //
    const curTab = useRef(tab)

    useEffect(() => {
        curTab.current = tab
        setOlMapOpenData([])
        setPointItem({})
        setReportRoadData([])
        if (olMap) {
            olMap.closeOverlay('clickOpen')
            olMap.closeOverlay('pointClickOpen')
            olMap.removeGeometryLayer('geometry0')
            if (tab != 'conserve') {
                patrolList.forEach((d, index) => {
                    olMap.removeGeometryLayer('geometry_patrol_' + index)
                })
            }
            if (tab != 'build') {
                roadProjectList.forEach((d, index) => {
                    olMap.removeGeometryLayer('geometry_road_' + index)
                    olMap.removeGeometryLayer('geometry_road_' + d.id)
                })
            }
            if (tab != 'operation') {
                busRunData.forEach((d, index) => {
                    olMap.removeGeometryLayer('geometry_bus_' + index)
                })
            }
        }
    }, [tab])

    useEffect(() => {
        if (olMapGeoDataHost) {
            let config = {
                layerName: 'nanchang',
                center: [116.08706, 28.602018], // 中心坐标
                zoom: 10, // 缩放
                minZoom: 8,
                maxZoom: 21,
                isMoveSelect: false, // 鼠标滑过是否选中
                projection: 'EPSG:4326' // 坐标系
            }
            let arcgisUrls = {
                nanchang: {
                    url: `${olMapArcgisHost || 'http://36.2.6.33:6080'}/arcgis/rest/services/PBDT/nachang/MapServer`,
                },
            }

            let option = {
                target: 'olMap', // 元素ID
                config: config,
                arcgisUrls, // 动态底图图层
                onEvent: {
                    // 选中回调
                    onSelectClick: function (p) {
                        // console.log(p)
                    },
                    // 鼠标滑过回调
                    onPointerMove: function (p) {
                        // console.log(p)
                    },
                }
            }
            let olMapTool = new OlMapTool(option)
            olMapTool.map.on('dblclick', function (p) {
                // console.log(p)
            })
            olMapTool.map.on('singleclick', function (p) {
                setOlMapOpenData([])
                setPointItem({})
                setReportRoadData([])
                olMapTool.closeOverlay('clickOpen')
                olMapTool.closeOverlay('pointClickOpen')
                olMapTool.removeGeometryLayer('geometry0')

                setCurClickCoordinate(p.coordinate)
                if (curTab.current == 'build') {
                    return
                }
                // 请求路线坐标
                request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/bufferSearch`)
                    .type('form')
                    .send({
                        params: `{"layerName":"view_by_line","pageSize":1,"pageNum":1,"filter":"","isReturnGeometry":"true","spatialRel":"INTERSECTS","orderByFields":" sort1, sort2, lxbm, sxxfx, qdzh asc", "spatialFilter":"point(${p.coordinate[0]} ${p.coordinate[1]})","distance":20}`
                    })
                    .then(res => {
                        if (res.status == 200 && res.body && res.body.code == 1) {
                            const data = res.body.data
                            const { datalist } = data
                            let index = 0
                            for (let d of datalist.list) {
                                olMapTool.addGeometryJMLayer({
                                    features: [
                                        {
                                            geometry: d.shape,
                                            geometryType: 'LineString',
                                            // geometryType: 'Point',
                                        },
                                    ],
                                    style: { stroke: { width: 5, color: '#9933FF' } },
                                    selectStyle: { stroke: { width: 8, color: '#9933FF' } },
                                    layerName: 'geometry' + index++
                                });
                                const config = {
                                    id: 'clickOpen',
                                    offset: [0, 25], // 偏移
                                    position: p.coordinate, // 坐标
                                    autoPan: true,
                                    autoPanMargin: 100,
                                    positioning: 'top-right'
                                }
                                // 注意 现在只取第一条数据 所以能在这里请求
                                // 这里请求的是路线的信息
                                request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
                                    .type('form')
                                    .send({
                                        params: `{"layerName":"${d.tablename.toLowerCase()}","filter":"(roadcode = '${d.roadcode}')","spatialFilter":"","isReturnGeometry":"false","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":1}`
                                    })
                                    .then(detailRes => {
                                        if (detailRes.status == 200 && detailRes.body && detailRes.body.code == 1) {
                                            const detailData = detailRes.body.data
                                            const { datalist: detailDatalist } = detailData
                                            for (let de of detailDatalist.list) {
                                                setOlMapOpenData([{
                                                    n: '路段编码',
                                                    v: de['roadcode'],
                                                }, {
                                                    n: '路段名称',
                                                    v: de['roadname'],
                                                }, {
                                                    n: '起点名称',
                                                    v: de['f006'],
                                                }, {
                                                    n: '起点桩号',
                                                    v: de['roadstart'],
                                                }, {
                                                    n: '止点名称',
                                                    v: de['f010'],
                                                }, {
                                                    n: '止点桩号',
                                                    v: de['roadends'],
                                                }, {
                                                    n: '路段里程',
                                                    v: de['f067']
                                                    // !isNaN(de['roadends']) && !isNaN(de['roadstart']) ?
                                                    //     de['roadends'] - de['roadstart']
                                                    //     : '-',
                                                }, {
                                                    n: '技术等级',
                                                    v: de['f014'],
                                                    map: [{ text: '高速公路', value: '1' }, { text: '一级公路', value: '2' }, { text: '二级公路', value: '3' }, { text: '三级公路', value: '4' }, { text: '四级公路', value: '5' }, { text: '等外公路', value: '6' }],
                                                }, {
                                                    n: '路面类型',
                                                    v: de['f016'],
                                                    map: [{ text: '沥青混凝土', value: '11' }, { text: '水泥混凝土', value: '12' }, { text: '沥青贯入式', value: '21' }, { text: '沥青碎石', value: '22' }, { text: '沥青表面处治', value: '23' }, { text: '砂石路面', value: '31' }, { text: '石质路面', value: '32' }, { text: '渣石路面', value: '33' }, { text: '砖铺路面', value: '34' }, { text: '砼预制块', value: '35' }, { text: '无路面', value: '36' }]
                                                },])
                                                break
                                            }
                                        }
                                    })
                                olMapTool.addOverlay('clickOpen', config)
                                break
                            }
                        }
                    })
            })
            setOlMap(olMapTool)
        }
    }, [olMapGeoDataHost])

    useEffect(() => {
        if (patrolList.length && olMap && tab == 'conserve') {
            busRunData.forEach((d, index) => {
                olMap.removeGeometryLayer('geometry_bus_' + index)
            })

            patrolList.forEach((d, index) => {
                olMap.addGeometryLayer({
                    features: [
                        {
                            name: 'patrolPoint',
                            attributes: {
                                callbackParams: {
                                    type: 'patrolPoint',
                                    id: d.id,
                                },
                                callback: (p) => {
                                    setPointItem(d)
                                    olMap.addOverlay('pointClickOpen', {
                                        id: 'pointClickOpen',
                                        offset: [0, 4], // 偏移
                                        position: [d.longitude, d.latitude], // 坐标
                                        autoPan: true,
                                        autoPanMargin: 100,
                                        positioning: 'top-right'
                                    })
                                    // 请求路线坐标
                                    if (d.code_road) {
                                        let roadCodeStart = d.code_road[0]
                                        let layerName = codeMap[roadCodeStart.toLowerCase()]
                                        if (layerName) {
                                            request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
                                                .type('form')
                                                .send({
                                                    params: `{"layerName":"${layerName}","filter":"(roadcode = '${d.code_road}')","spatialFilter":"","isReturnGeometry":"true","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":99}`
                                                })
                                                .then(res => {
                                                    if (res.status == 200 && res.body && res.body.code == 1) {
                                                        const data = res.body.data
                                                        const { datalist } = data
                                                        if (datalist?.list?.length) {
                                                            let index = 0
                                                            for (let d of datalist.list) {
                                                                olMap.addGeometryJMLayer({
                                                                    features: [
                                                                        {
                                                                            geometry: d.shape,
                                                                            geometryType: 'LineString',
                                                                            // geometryType: 'Point',
                                                                        },
                                                                    ],
                                                                    style: { stroke: { width: 5, color: '#9933FF' } },
                                                                    selectStyle: { stroke: { width: 8, color: '#9933FF' } },
                                                                    layerName: 'geometry' + index++
                                                                });
                                                            }
                                                        }
                                                    }
                                                })
                                        }
                                    }

                                }
                            },
                            geometry: [d.longitude, d.latitude],
                            geometryType: 'Point',
                        },
                    ],
                    style: {
                        icon: {
                            src: '/assets/images/gis/pointer.png',
                            scale: 1, // 图标引用
                        },
                        // stroke: { width: 1, color: '#ffff00' },
                        // circle: {
                        //     radius: 12, // 直径
                        //     fill: '#ff0000', // 颜色
                        //     stroke: { width: 1, color: '#ffff00' },
                        // },
                    },
                    selectStyle: {
                        icon: {
                            src: '/assets/images/gis/pointer.png',
                            scale: 1, // 图标引用
                        },
                        // circle: {
                        //     radius: 16, // 直径
                        //     fill: '#ff0000', // 颜色
                        //     stroke: { width: 2, color: '#ffff00' },
                        // },
                        // stroke: { width: 2, color: '#ffff00' },
                    },
                    layerName: 'geometry_patrol_' + index
                });
            });
        }
    }, [patrolList, olMap, tab])

    useEffect(() => {
        if (roadProjectList.length && olMap && tab == 'build') {
            // roadProjectList.forEach((d, index) => {
            //     olMap.addGeometryLayer({
            //         features: [
            //             {
            //                 name: 'roadPoint',
            //                 attributes: {
            //                     callbackParams: {
            //                         type: 'roadPoint',
            //                         id: d.id,
            //                     },
            //                     callback: (p) => {
            //                         setPointItem(d)
            //                         olMap.addOverlay('pointClickOpen', {
            //                             id: 'pointClickOpen',
            //                             offset: [0, 4], // 偏移
            //                             position: [d.longitude, d.latitude], // 坐标
            //                             // position: [115.944220000000, 28.545380000000],
            //                             autoPan: true,
            //                             autoPanMargin: 100,
            //                             positioning: 'top-right'
            //                         })
            //                         // 查路线

            //                     }
            //                 },
            //                 geometry: [d.longitude, d.latitude],
            //                 // geometry: [115.944220000000, 28.545380000000],
            //                 geometryType: 'Point',
            //             },
            //         ],
            //         style: {
            //             icon: {
            //                 src: '/assets/images/gis/pointer.png',
            //                 scale: 1, // 图标引用
            //             },
            //         },
            //         selectStyle: {
            //             icon: {
            //                 src: '/assets/images/gis/pointer.png',
            //                 scale: 1, // 图标引用
            //             },
            //         },
            //         layerName: 'geometry_road_' + index
            //     });
            // });
        }
    }, [roadProjectList, olMap, tab])

    useEffect(() => {
        if (busRunTime && busRunTime.length) {
            setBusRunData(busRunTime)
        }
    }, [busRunTime])

    const drawBusRunPoint = () => {
        patrolList.forEach((d, index) => {
            olMap.removeGeometryLayer('geometry_patrol_' + index)
        })

        busRunData.forEach((d, index) => {
            olMap.addGeometryLayer({
                features: [
                    {
                        name: 'busPoint',
                        attributes: {
                            callbackParams: {
                                type: 'busPoint',
                                busNo: d.busNo,
                            },
                            callback: (p) => {
                                setPointItem(p)
                                setOlMapOpenData([{
                                    n: '车牌号',
                                    v: d.busNoChar
                                }, {
                                    n: '司机',
                                    v: d.employeeName
                                }, {
                                    n: '工号',
                                    v: d.opNo
                                }, {
                                    n: '调度状态',
                                    v: d.willRun,
                                    map: busWillRun,
                                }, {
                                    n: '实际发车时间',
                                    v: d.lastDepTime
                                }, {
                                    n: '定位时间',
                                    v: d.siteTime
                                },])
                                olMap.addOverlay('clickOpen', {
                                    id: 'clickOpen',
                                    offset: [0, 4], // 偏移
                                    position: [d.lng, d.lat], // 坐标
                                    // position: [115.944220000000, 28.545380000000],
                                    autoPan: true,
                                    autoPanMargin: 100,
                                    positioning: 'top-right'
                                })
                            }
                        },
                        geometry: [d.lng, d.lat],
                        // geometry: [115.944220000000, 28.545380000000],
                        geometryType: 'Point',
                    },
                ],
                style: {
                    icon: {
                        src: '/assets/images/gis/bus.png',
                        scale: 0.7, // 图标引用
                    },
                },
                selectStyle: {
                    icon: {
                        src: '/assets/images/gis/bus.png',
                        scale: 0.8, // 图标引用
                    },
                },
                layerName: 'geometry_bus_' + index
            });
        });
    }
    useEffect(() => {
        if (busRunData.length && olMap && tab == 'operation') {
            if (!busLine.length) {
                drawBusRunPoint()
            }
        }
    }, [busRunData, olMap, tab])

    useEffect(() => {
        if (busLine && olMap && tab == 'operation') {
            if (busLine.length) {
                olMap.closeOverlay('clickOpen')
                busRunData.forEach((d, index) => {
                    olMap.removeGeometryLayer('geometry_bus_' + index)
                })
                olMap.addGeometryLayer({
                    features: [
                        {
                            name: 'busLine',
                            attributes: {
                            },
                            geometry: busLine.map(b => {
                                return [b.pointLng, b.pointLat]
                            }),
                            // geometry: [115.944220000000, 28.545380000000],
                            geometryType: 'LineString',
                            style: { stroke: { width: 5, color: '#9933FF' } },
                            selectStyle: { stroke: { width: 8, color: '#9933FF' } },
                        },
                    ],
                    style: { stroke: { width: 5, color: '#9933FF' } },
                    selectStyle: { stroke: { width: 8, color: '#9933FF' } },
                    layerName: 'geometry_bus_line'
                });
                olMap.setCenter([
                    (busLine[0].pointLng + busLine[busLine.length - 1].pointLng) / 2,
                    (busLine[0].pointLat + busLine[busLine.length - 1].pointLat) / 2
                ])

            } else {
                drawBusRunPoint()
            }
        } else if (tab != 'operation' && olMap) {
            olMap.removeGeometryLayer('geometry_bus_line')
        }
    }, [busLine, olMap, tab])

    useEffect(async () => {
        if (olMap) {
            if (tab == 'build') {
                const roadRes = await Promise.all(projectList.map((d, index) => {
                    let roadCodeStart = d.roadCodeStart ? d.roadCodeStart[0] : 'N'
                    let layerName = codeMap[roadCodeStart.toLowerCase()]
                    if (layerName) {
                        return request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
                            .type('form')
                            .send({
                                params: `{"layerName":"${layerName}","filter":"(roadcode = '${d.roadCodeStart}')","spatialFilter":"","isReturnGeometry":"true","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":99}`
                            })
                    } else {
                        return new Promise(resolve => setTimeout(() => resolve(), 0));
                    }
                }))

                let renderIndex = 0
                for (let res of roadRes) {
                    const corData = projectList[renderIndex]
                    if (res) {
                        if (res.status == 200 && res.body && res.body.code == 1) {
                            const data = res.body.data
                            const { datalist } = data
                            if (datalist?.list?.length) {
                                let dataIndex = 0
                                for (let d of datalist.list) {

                                    olMap.addGeometryJMLayer({
                                        features: [
                                            {
                                                geometry: d.shape,
                                                geometryType: 'LineString',
                                                // geometryType: 'Point',
                                                attributes: {
                                                    callbackParams: {},
                                                    callback: (p, x) => {
                                                        let extent = p?.selected[0]?.values_?.geometry?.flatCoordinates
                                                        let coordinate = []
                                                        if (extent && extent.length) {
                                                            let coordinateIndex = Math.ceil((extent.length - 1) / 2)
                                                            if (coordinateIndex % 2) {
                                                                coordinateIndex -= 1
                                                            }
                                                            coordinate = [extent[coordinateIndex], extent[coordinate + 1]]
                                                        }
                                                        if (coordinate.length) {
                                                            setReportRoadData([])
                                                            setPointItem(corData)
                                                            setOlMapOpenData([{
                                                                n: '项目名称',
                                                                v: corData.entryName
                                                            }, {
                                                                n: '项目规模(公里)',
                                                                v: corData.projectMileage
                                                            }, {
                                                                n: '项目投资(万元)',
                                                                v: corData.investment
                                                            }, {
                                                                n: '业主单位',
                                                                v: corData.buildUnit,
                                                            }, {
                                                                n: '施工单位',
                                                                v: corData.constructionUnit
                                                            }, {
                                                                n: '开工日期',
                                                                v: corData.startTime ? moment(corData.startTime).format('YYYY-MM-DD') : ''
                                                            },])
                                                            olMap.addOverlay('clickOpen', {
                                                                id: 'clickOpen',
                                                                offset: [0, 4], // 偏移
                                                                position: coordinate, // 坐标
                                                                // position: [115.944220000000, 28.545380000000],
                                                                autoPan: true,
                                                                autoPanMargin: 100,
                                                                positioning: 'top-right'
                                                            })
                                                        }
                                                    }
                                                },
                                            },
                                        ],
                                        style: { stroke: { width: 5, color: '#9933FF' } },
                                        selectStyle: { stroke: { width: 8, color: '#9933FF' } },
                                        layerName: 'geometry_build_road_' + renderIndex
                                    });
                                }
                            }
                        }
                    }
                    if (corData.roadCodeStart) {
                        // 画对应的巡查上报的点
                        const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName)
                        if (corProjectRoadReport) {
                            const d = corProjectRoadReport
                            olMap.addGeometryLayer({
                                features: [
                                    {
                                        name: 'roadPoint',
                                        attributes: {
                                            callbackParams: {
                                                type: 'roadPoint',
                                                id: d.id,
                                            },
                                            callback: (p) => {
                                                setPointItem(d)
                                                setReportRoadData([])
                                                olMap.addOverlay('pointClickOpen', {
                                                    id: 'pointClickOpen',
                                                    offset: [0, 4], // 偏移
                                                    position: [d.longitude, d.latitude], // 坐标
                                                    // position: [115.944220000000, 28.545380000000],
                                                    autoPan: true,
                                                    autoPanMargin: 100,
                                                    positioning: 'top-right'
                                                })
                                            }
                                        },
                                        geometry: [d.longitude, d.latitude],
                                        // geometry: [115.944220000000, 28.545380000000],
                                        geometryType: 'Point',
                                    },
                                ],
                                style: {
                                    icon: {
                                        src: '/assets/images/gis/pointer.png',
                                        scale: 1, // 图标引用
                                    },
                                },
                                selectStyle: {
                                    icon: {
                                        src: '/assets/images/gis/pointer.png',
                                        scale: 1, // 图标引用
                                    },
                                },
                                layerName: 'geometry_road_' + d.id
                            });

                        }
                    }
                    renderIndex++
                }
            } else {
                projectList.forEach((d, index) => {
                    olMap.removeGeometryLayer('geometry_build_road_' + index)
                })
            }
        }
    }, [projectList, olMap, tab])

    const isRoadProject = pointItem.report_type == 'road'
    // const isBusPoint = pointItem.busNoChar
    return (
        <div id="olMap" style={{ position: 'absolute', height: '100%', width: "100%" }}>
            <div slot="overlays" style={{ display: 'none', }}>
                <div id="clickOpen"
                    style={{
                        backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`,
                        minWidth: 340,
                        backgroundPosition: 'center',
                        backgroundSize: '100% 100%',
                        minHeight: 180,
                        padding: '24px',
                        backgroundRepeat: 'no-repeat',
                        color: '#fff',
                        overflow: 'auto',
                    }}>
                    {
                        olMapOpenData.map(s => {
                            return (
                                <div style={{ display: 'flex' }}>
                                    <div style={{ width: 100, textAlign: 'right' }}>{s.n} </div>
                                    <div style={{ flex: 1 }}>：
                                        {
                                            s.map ?
                                                s.map.find(sm => sm.value == s.v)?.text
                                                : s.v || s.v == 0 ?
                                                    s.v
                                                    : '-'
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                    {
                        pointItem.roadCodeStart ?
                            <a style={{ float: 'right' }} onClick={() => {
                                dispatch(getReportList({
                                    reportType: 'road',
                                    keyword: pointItem.entryName
                                })).then(res => {
                                    if (res.success) {
                                        let data = res.payload.data || []
                                        if (!data.length) {
                                            message.warning('暂无上报记录')
                                        } else {
                                            setReportRoadData(data)
                                        }
                                    }
                                })
                            }}>上报记录</a>
                            : ''
                    }
                </div>
            </div>
            <div slot="overlays" style={{ display: 'none', }}>
                <div id="pointClickOpen" style={{
                    width: "400px", zIndex: 100, right: "24%", marginTop: "0", top: "25%", backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`, backgroundPosition: 'center',
                    backgroundSize: '100% 100%',
                    padding: '24px',
                    backgroundRepeat: 'no-repeat',
                }}>
                    {/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */}
                    <div style={{ display: "flex", }}>
                        <div style={{ width: "50%", height: "100%", }}>
                            {
                                pointItem.id ?
                                    <Hua key={pointItem.id} shuzu={
                                        isRoadProject ?
                                            [{
                                                "imgs": pointItem.scene_pic && pointItem.scene_pic.length ?
                                                    pointItem.scene_pic[0] : ""
                                            }] :
                                            [{
                                                "imgs": pointItem.conserve_after_pic && pointItem.conserve_after_pic.length ?
                                                    pointItem.conserve_after_pic[0] : ""
                                            }, {
                                                "imgs": pointItem.conserve_before_pic && pointItem.conserve_before_pic.length ?
                                                    pointItem.conserve_before_pic[0] : ""
                                            }, {
                                                "imgs": pointItem.conserve_underway_pic && pointItem.conserve_underway_pic.length ?
                                                    pointItem.conserve_underway_pic[0] : ""
                                            }]}
                                    />
                                    : ''
                            }
                        </div>
                        <div style={{ width: "50%", left: "50%", }}>
                            <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>
                                {
                                    isRoadProject ?
                                        pointItem.user_name || '--'
                                        :
                                        <>
                                            {
                                                pointItem.road_section_start ? pointItem.road_section_start : ""
                                            }{
                                                pointItem.road_section_start && pointItem.road_section_end ? "——" : ""
                                            }{
                                                pointItem.road_section_end ? pointItem.road_section_end : ""
                                            }{
                                                pointItem.road_section_start || pointItem.road_section_end ? "" : "--"
                                            }
                                        </>
                                }

                            </p>
                            {
                                isRoadProject ?
                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
                                        {
                                            isRoadProject ? '上报内容' : '养护内容'
                                        }
                                        <span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC", overflowWrap: 'break-word' }}>
                                            {
                                                pointItem.content ? pointItem.content : "--"
                                            }
                                        </span>
                                    </p> : ''
                            }
                            {
                                isRoadProject ? '' :
                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
                                        负责人
                                        <span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
                                            {
                                                pointItem.user_name ? pointItem.user_name : "--"
                                            }
                                        </span>
                                    </p>
                            }
                            <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
                                日期
                                <span style={{ color: "#EEF4FF", marginLeft: "60px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
                                    {
                                        pointItem.time ? moment(pointItem.time).format("YYYY-MM-DD") : "--"
                                    }
                                </span>
                            </p>
                        </div>
                    </div>

                    {
                        isRoadProject && pointItem.project ?
                            <div style={{ paddingTop: 24 }}>
                                {[{
                                    n: '项目名称',
                                    k: 'entryName',
                                }, {
                                    n: '项目规模(公里)',
                                    k: 'projectMileage',
                                }, {
                                    n: '项目投资(万元)',
                                    k: 'investment',
                                }, {
                                    n: '开工时间',
                                    k: 'startTime',
                                },].map(s => {
                                    return (
                                        <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
                                            {s.n}
                                            <span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
                                                {
                                                    s.k == 'startTime' ?
                                                        pointItem.project[s.k] ? moment(pointItem.project[s.k]).format("YYYY-MM-DD") : "--"
                                                        :
                                                        pointItem.project[s.k] || "--"
                                                }
                                            </span>
                                        </p>
                                    )
                                })}
                            </div>
                            : ''
                    }
                </div>
            </div>

            {/* 展示在建项目的上报记录 */}
            {
                tab == 'build' && reportRoadData.length ?
                    <div style={{
                        backgroundColor: 'rgba(0, 33, 98, 0.8)',
                        height: 'calc(100vh - 103px)',
                        top: 0,
                        width: 320,
                        position: 'absolute',
                        right: 485,
                        zIndex: 9999
                    }}>
                        <div>
                            <CloseOutlined style={{
                                fontSize: 'large',
                                color: "#fff",
                                margin: 12
                            }} onClick={() => {
                                setReportRoadData([])
                            }} />
                        </div>
                        <AutoRollComponent
                            content={reportRoadData.map(r => {
                                return (
                                    <div style={{
                                        display: 'flex', backgroundImage: 'url(/assets/images/leadership/beijinglan.png)',
                                        backgroundSize: '100% 100%',
                                        margin: 8
                                    }}>
                                        <div style={{
                                            width: 80, margin: "4px 0px 0px 4px",
                                        }}>
                                            {
                                                r.scenePic?.length > 0 ?
                                                    <Carousel autoplay >
                                                        {
                                                            r.scenePic?.map(v => <img className='picfileimg'
                                                                style={{ width: 80, display: 'inline-block', }}
                                                                src={
                                                                    v.startsWith("http") ? v :
                                                                        `${localStorage.getItem("qndmn")}/${v}`
                                                                }
                                                                width={`200px`}
                                                            />)
                                                        }
                                                    </Carousel>
                                                    : ''
                                            }
                                        </div>

                                        <div style={{ flex: 1, marginLeft: 4, marginTop: 4, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
                                            <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
                                                上报时间:
                                                <span style={{
                                                    color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
                                                    overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
                                                }}>
                                                    {r.time ? moment(r.time).format("YYYY-MM-DD") : "--"}
                                                </span>
                                            </p>
                                            <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
                                                上报内容:
                                                <span title={r.content} style={{
                                                    color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
                                                    overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 120
                                                }}>
                                                    {r.content}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                )
                            })}
                            containerStyle={{ position: "relative", height: "90%", }}
                            divHeight={'calc(100vh - 154px)'} divId={"chart-overview-report-list"}
                        />
                    </div>
                    : ''
            }
        </div >
    )
}

function mapStateToProps (state) {
    const { auth, global, busRunTime, busLine, projectList } = state;
    return {
        user: auth.user,
        actions: global.actions,
        olMapArcgisHost: global.olMapArcgisHost,
        olMapGeoDataHost: global.olMapGeoDataHost,
        busRunTime: busRunTime.data || [],
        busLine: busLine.data || [],
        projectList: projectList.data || []
    };
}

export default connect(mapStateToProps)(OlMap);