import React, {useEffect, useState} from 'react';
import { zindexmarker } from '../zindex';
import { Modal,Tabs } from "antd";
const {
css,
physics,
} = window.popmotionXL;
function renderMarker({ warnType, status }, { width, highlight }) {
let color1 = '#11b7cd';
/*return `
`;*/
return `
`;
}
const dist1 = 22000 * 22000;
const dist2 = 8000 * 8000;
function RadarMarker({ data, dispatch, setting, zoom, distSq }) {
const [visible, setVisible] = useState(false);
const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";
const [iframeUrl, setIframeUrl] = useState("");
const highlight = setting;
let zindexOffset = 1;
if (!data.status) {
zindexOffset = 0;
} else if (data.warnType) {
zindexOffset = 2;
}
useEffect(() => {
const width = 30;//12
const placeholder = document.getElementById(`marker_radar_${data.id}`);
if (!placeholder) {
return;
}
const ratio = highlight ? 1.2 : 1.0;
const svgMarker = renderMarker(data, { width: width * ratio, highlight });
placeholder.innerHTML = svgMarker;
if (!highlight) {
//console.log(placeholder);
const el = placeholder.firstChild;
//console.log(el);
const marker = el.nextSibling;
const markerSVG = marker.querySelector('svg');
const markerRenderer = css(markerSVG, {
enableHardwareAcceleration: false
});
const markerGrowSize = 1.2;
const markerScale = physics({
from: 1,
to: markerGrowSize,
velocity: 20,
spring: 300,
friction: 0.8,
onUpdate: (x) => markerRenderer.set('scale', x),
});
const zindex = zindexmarker.radar + zindexOffset;
marker.addEventListener('mouseenter', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex + zindexmarker.hilightPlus;
}
markerScale.props.from = 1;
markerScale.props.to = markerGrowSize;
markerScale.start();
});
marker.addEventListener('mouseleave', () => {
if (placeholder.parentNode.style.zIndex); {
placeholder.parentNode.style.zIndex = zindex;
}
markerScale.props.from = markerGrowSize;
markerScale.props.to = 1;
markerScale.start();
});
}
return () => {
placeholder.innerHTML = '';
}
}, [highlight]);
const showPop = () => {
/*dispatch.runtime.setFeaturePop({
id: data.id,
type: 'radar',
data,
lgtd: data.lgtd,
lttd: data.lttd,
elev: data.elev,
})*/
setVisible(true);
};
let markerZoom;
if (highlight) {
markerZoom = 2;
} else if (zoom) {
markerZoom = (zoom - 10) * 0.5;
} else {
markerZoom = (dist1 - distSq) / (dist1 - dist2) * 2 + 1;
}
if (markerZoom < 1) {
markerZoom = 1;
} else if (markerZoom > 2.5) {
markerZoom = 2.5;
} else {
markerZoom = parseFloat(markerZoom.toFixed(1));
}
useEffect(() => {
if(systemSwitchType){
setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=c53571c976c34fd09f11ad1a61b5e4cd&token=111");
}else{
setIframeUrl("http://223.75.53.141:81/isc/index.html#/player?cameraIndexCode=0fda6a3d0df743b1ac35debe77155cb1&token=111");
}
}, [systemSwitchType]);
return (
<>
1 ? ' scale(' + markerZoom + ')' : ''}`,
lineHeight: 1,
zIndex: zindexmarker.radar + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
}}
onClick={showPop}
>
{/*{
(zoom > 12 || distSq < dist2 || highlight) && (
{data?.stnm}
)
}*/}
{setVisible(false)}}
width="70vw"
className="radarVideoModal"
style={{top:"12vh", height:"82vh"}}
>
)
}
export default React.memo(RadarMarker);