import { deviceHash } from "../../api/moveDeviceWebsocket.js";
import { mainMap,layuiObj } from "../index.js";
import { popNotify } from "../popNotify.js";
import { iframeVideoUrl } from "../../../../public/js/url.js";
let moveDeviceMarkerHash={}
let moveDeviceCircleAlarmHash={};
let circleRadius=100;
let cusMdevMarkers=null;
let currentAlarmHandleObj={};
function addMoveDeviceCircleAlarmHash(deviceid,circle){
    moveDeviceCircleAlarmHash[deviceid]=circle;
}
function removeMoveDeviceCircleAlarmHash(deviceid){
    if(deviceid in moveDeviceCircleAlarmHash){
        mainMap.removeLayer(moveDeviceCircleAlarmHash[deviceid])
        delete moveDeviceCircleAlarmHash[deviceid];
    }
}
//添加其中1个
function addMoveDeviceMarkerHash(key,marker){
    moveDeviceMarkerHash[key]=marker
}
//删除其中1个,设备离线时候删除
function deleteOneMoveDeviceMarkerHash(key){
    if(key in moveDeviceMarkerHash){
        mainMap.removeLayer(skynetIpcMarkerHash[i])
        delete moveDeviceMarkerHash[key];
    }
}
//删除移动设备的聚合
function deleteMoveDeviceCus(){
    if(cusMdevMarkers!=null){
        cusMdevMarkers.clearLayers();
        cusMdevMarkers=null;
    } 
}
function deleteAllMoveDeviceMarker(){
    for(var i in moveDeviceMarkerHash){
        mainMap.removeLayer(moveDeviceMarkerHash[i])
        delete moveDeviceMarkerHash[i]
    }
    deleteMoveDeviceCus();
}
//更新移动设备的位置信息
function updateMarkerLatlng(obj){
    var deviceid=obj["deviceid"];
    if(deviceid in moveDeviceMarkerHash){
        var latitude=obj["latitude"];
        var longitude=obj["longitude"];
        var latlng = L.latLng(latitude,longitude);
        moveDeviceMarkerHash[deviceid].setLatLng(latlng)
    }
}
//获取移动设备的Icon
function getMoveDeviceNormalIcon(){
    return L.icon({
        iconUrl:"./pages/cmddispatch/image/wb_baoan.png",//图片路径
        iconSize: [24, 24]//图片大小设置
    });
}

//设置设备正常的ICON
function setMoveDeviceAlarmNormalIcon(obj){
    var deviceid=obj["deviceid"];
    if(deviceid in moveDeviceMarkerHash){
        moveDeviceMarkerHash[deviceid].setIcon(getMoveDeviceNormalIcon())
    }
}
//画所有移动设备的Marker
function drawMoveDeviceMarker(){	
    cusMdevMarkers = L.markerClusterGroup({iconCreateFunction: function(cluster) {
        return L.divIcon({ html: `<div class="polyMarker-cusmarker">   
            <img src="./pages/cmddispatch/image/wb_baoan.png">
            <span> ${cluster.getChildCount()}</span>
        </div>` });
    }});
    for(let d in deviceHash){
        let name=deviceHash[d]["showname"];
        let deviceid=deviceHash[d]["deviceid"];
        let longitude=deviceHash[d]["longitude"];
        let latitude=deviceHash[d]["latitude"];
        var iconObj=getMoveDeviceNormalIcon();
        let marker=L.marker([latitude,longitude],{
            icon: iconObj,//将marker设置为上面引用的图形
            riseOnHover:true
        });
        marker.bindTooltip(name).openTooltip();
        marker.on('click',function(e){
            showMoveDeviceInfoWindow(deviceHash[d])
        })
        cusMdevMarkers.addLayer(marker);
        addMoveDeviceMarkerHash(deviceid,marker)
    }
    mainMap.addLayer(cusMdevMarkers);
}
//显示移动设备的info
function showMoveDeviceInfoWindow(obj){
    var deviceid=obj["deviceid"];  
    if(deviceid in moveDeviceMarkerHash){     
        moveDeviceMarkerHash[deviceid].unbindPopup();
        moveDeviceMarkerHash[deviceid].bindPopup(`<div class="moveDeviceInfoWindow">${getMoveDeviceInfoWindowDiv(obj)}</div>`,{maxHeight:260}).openPopup();
        mainMap.setView([obj["latitude"],obj["longitude"]], 18);
    }
}
function getMoveDeviceInfoWindowDiv(obj){
    var deviceid=obj["deviceid"];
    if(deviceid in deviceHash){
        var obj=deviceHash[deviceid];
        var showname=deviceHash[deviceid]["showname"];
        if("power" in obj){
            var devicePower=obj["power"]+"%";
        }else{
            var devicePower=0+"%";
        }
        if("arg0" in obj){
            var memory=(parseFloat(obj["arg0"]/1024)).toFixed(2)+"(G)";
        }else{
            var memory=0;
        }
        if("cardNumber" in obj){
            var cardNumber=obj["cardNumber"];
        }else{
            var cardNumber="未知 ";
        }
        if("arg1" in obj){
            var img=`<img src=${obj["arg1"]}>`
        }else{
            var img="未知";
        }
        if("timestamp" in obj){
            var timestamp=obj["timestamp"];
        }else{
            var timestamp="未知";
        }
        if("locate" in obj){
            var locate=obj["locate"];
        }else{
            var locate="未知";
        }
        if("appVersion" in obj){
            var appVersion=obj["appVersion"];
        }else{
            var appVersion="未知";
        }  
        if("speed" in obj){
            var speed=(obj["speed"]).toFixed(2)+"(KM/H)";
        }else{
            var speed="未知";
        }
        var div=`
            <div>
                <p>
                    <span>设备名称:</span>
                    <span>${showname}</span>
                </p>
                <p>
                    <span>设备号:</span>
                    <span>${deviceid}</span>
                </p>
            </div>
            <div>
                <p>
                    <span>剩余电量:</span>
                    <span>${devicePower}</span>
                </p>
                <p>
                    <span>剩余内存:</span>
                    <span>${memory}</span>
                </p>
            </div>
            <div>
                <p>
                    <span>网络:</span>
                    <span>${img}</span>
                </p>
                <p>
                    <span>速度:</span>
                    <span>${speed}</span>
                </p>
            </div>
            <div>
                <p>
                    <span>定位时间:</span>
                    <span>${timestamp}</span>
                </p>
                <p>
                    <span>定位方式:</span>
                    <span>${locate}</span>
                </p> 
            </div>
            <div>
                <p>
                    <span>APP版本:</span>
                    <span>${appVersion}</span>
                </p>
                <p>
                    <span>SIM卡号:</span>
                    <span>${cardNumber}</span>
                </p> 
            </div>
            <div class="moveDeviceOpear">
                <span>操作:</span>
                <button devicid='${obj["deviceid"]}' class="layui-btn layui-btn-normal deviceopearbtn" onclick='openMoveDeviceNotify(this)'>
                    <img src="./pages/cmddispatch/infowindow/notify.png">通知
                </button>
                <button token='${obj["gbChannel"]}' class="layui-btn layui-btn-normal deviceopearbtn" onclick='openMoveDeviceVideo(this)'>
                    <img src="./pages/cmddispatch/infowindow/video.png">视频
                </button>
            </div>
        `
    }
    return div;
}
window.openMoveDeviceNotify=function(that){
    var deviceid=$(that).attr("devicid")
    popNotify(getMdevInfo(deviceid))
}
window.openMoveDeviceVideo=function(that){
    var token=$(that).attr("token")
    var url=`${iframeVideoUrl}?token=${token}&autoplay=true`
    window.open(url);
}
function mdevAlarmHandleDrawCircle(deviceid){
    if(deviceid in deviceHash){
        alarmHandleCreateData(deviceHash[deviceid]);
    }
}
//创建告警的数据
function alarmHandleCreateData(obj){
    currentAlarmHandleObj["longitude"]=obj["longitude"];
    currentAlarmHandleObj["latitude"]=obj["latitude"];
    currentAlarmHandleObj["deviceid"]=obj["deviceid"];
    circleRadius=100;
    if(mdevAlarmIndex!=null){
        closemdevAlarmIndex();
        $(".mdevAlarmInfoBox").empty();
    }
    showMdevAlarmNearbyDevice();
    drawMdevAlarmCircle();
    mainMap.setView([obj["latitude"],obj["longitude"]], 18);
}
function drawMdevAlarmCircle(){
    var deviceid= currentAlarmHandleObj["deviceid"]
    if(!(deviceid in moveDeviceCircleAlarmHash)){
        var circle= L.circle([currentAlarmHandleObj["latitude"],currentAlarmHandleObj["longitude"]],{
            radius:100, //米
            fillColor:"red",
            color:"red",
        }).addTo(mainMap);
        addMoveDeviceCircleAlarmHash(deviceid,circle);
    }
}
let mdevAlarmIndex=null;
function showMdevAlarmNearbyDevice(){
    if(mdevAlarmIndex==null){
        mdevAlarmIndex=layuiObj["layer"].open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: ['306px', '300px'],
            shade: 0,
            offset: 'lb',
            id: new Date().getTime(), //设定一个id，防止重复弹出
            btnAlign: 'c',
            move:'.layui-move',
            moveType: 1, //拖拽模式，0或者1
            content:`<div class="popnotify popWindows">
                <div class="notifyInfo">
                    <div class="notifyTitle mdevAlarmInfoTitle">
                        <span class="layui-move">警报处置</span>
                        <img src="./pages/cmddispatch/image/closeInfoWindow.png">
                    </div>
    
                    <div class="mdevAlarmInfoBox">
                        <div class="mdevAlarmInfoOpear">
                            <div>范围:</div>
                            <div id="rangeSlide" class="range-slider"></div>
                            <div><span class="rangeSlideValue">100</span>(米)</div>
                        </div>
                        <div class="mdevAlarmInfoNearby">
                          ${getmdevAlarmInfoNearby()}
                        </div>
                        <div class="mdevGroupOpearBtn">
                            <button class="layui-btn layui-btn-normal deviceopearbtn">
                                <img src="./pages/cmddispatch/infowindow/notify.png">通知
                            </button>
                        </div>
                    </div>
    
                </div>
            </div>`,
            success:function(){
                layuiObj.slider.render({
                    elem: '#rangeSlide',
                    min: 1,
                    step:1,
                    max: 50,
                    tips: false, //关闭默认提示层
                    change: function(value){
                        circleRadius=100;
                        circleRadius=circleRadius*value;
                        $(".rangeSlideValue").html(circleRadius);
                        $(".mdevAlarmInfoNearby").html(getmdevAlarmInfoNearby());
                        updateMdevCircle();
                        mdevAlarmInfoNearbyEvent();
                    }
                });
                mdevAlarmInfoNearbyEvent();
            },
        })
    }
    $(".mdevAlarmInfoTitle>img").on('click',()=>{
        closemdevAlarmIndex()
    })
}
function totalPointDistanceOf(){
    var tempArr=[];
    for(var i in deviceHash){
        var m= distanceOf(currentAlarmHandleObj,deviceHash[i]);
        if(m<=circleRadius){
            deviceHash[i]['distance']=m;
            tempArr.push(deviceHash[i]);
        }
    }
    return tempArr;
}
function getmdevAlarmInfoNearby(){
    var div=`<div>`;
    var arr=totalPointDistanceOf()
    for(var i=0;i<arr.length;i++){
        div+=`<p deviceid='${arr[i]["deviceid"]}'>
        <img src="./pages/cmddispatch/image/checkbox2.png" state="select">
        <span>${arr[i]["showname"]}</span>
        <img src="./pages/cmddispatch/infowindow/notify.png">
    </p>`
    } 
    div+=`</div>`;
    return div;
}
function mdevAlarmInfoNearbyEvent(){
    //单选
    $(".mdevAlarmInfoNearby>div>p>img:first-child").off('click');
    $(".mdevAlarmInfoNearby>div>p>img:first-child").on('click',function(){
        var state=$(this).attr("state");
        if(state=="noselect"){
            var img="./pages/cmddispatch/image/checkbox2.png";
            $(this).attr("state","select").attr("src",img)
        }else{
            var img="./pages/cmddispatch/image/checkbox1.png";
            $(this).attr("state","noselect").attr("src",img)
        }
    })

    $(".mdevAlarmInfoNearby>div>p>img:last-child").off('click');
    $(".mdevAlarmInfoNearby>div>p>img:last-child").on('click',function(){
        var deviceid=$(this).parent().attr("deviceid");
        popNotify(getMdevInfo(deviceid))
    })

    $(".mdevGroupOpearBtn").off('click');
    $(".mdevGroupOpearBtn").on('click',function(){
        var stateArr=$(".mdevAlarmInfoNearby>div>p>img:nth-child(1)")
        var deviceInfoArr=[];
        for(var i=0;i<stateArr.length;i++){
            var thisState=stateArr[i];
            var stateValue=$(thisState).attr("state");
            if(stateValue=="select"){
                var deviceid=$(thisState).parent().attr("deviceid")
                if(deviceid in deviceHash){
                    deviceInfoArr.push(deviceHash[deviceid])
                }
              
            }
        }

        popNotify(deviceInfoArr);
    })

}
function getMdevInfo(deviceid){
    var arr=[];
    if(deviceid in deviceHash){
        arr.push(deviceHash[deviceid]);
    }
    return arr;
}
function closemdevAlarmIndex(){
    if(mdevAlarmIndex!=null){
        layuiObj["layer"].close(mdevAlarmIndex);
        mdevAlarmIndex=null;
        removeMoveDeviceCircleAlarmHash(currentAlarmHandleObj["deviceid"])
    }
}
function updateMdevCircle(){
    moveDeviceCircleAlarmHash[currentAlarmHandleObj["deviceid"]].setRadius(circleRadius);
}
//计算2点之间的距离
function distanceOf(p1, p2) {
    var lat_start=p1["latitude"];
    var lng_start=p1["longitude"];
    var lat_end=p2["latitude"];
    var lng_end=p2["longitude"];
    return  L.latLng([lat_start,lng_start]).distanceTo([lat_end,lng_end]); 
}
export {
    drawMoveDeviceMarker,
    deleteAllMoveDeviceMarker,
    updateMarkerLatlng,
    moveDeviceMarkerHash,
    setMoveDeviceAlarmNormalIcon,
    deleteOneMoveDeviceMarkerHash,
    closemdevAlarmIndex,
    showMoveDeviceInfoWindow,
    mdevAlarmHandleDrawCircle,
    alarmHandleCreateData,
    getMoveDeviceInfoWindowDiv
}