let element, layer, table, tree, from, $, colorpicker;
const bidCode = parent.$('#bidPro').val();
let map;
let overlays = [];
let coordinates = []; //电子围栏坐标存放处

layui.use(['layer', 'element', 'table', 'tree', 'form', 'jquery'], function () {
    element = layui.element;
    colorpicker = layui.colorpicker;
    layer = layui.layer;
    table = layui.table;
    tree = layui.tree;
    form = layui.form;
    $ = layui.jquery;

		// 响应成功后的拦截器
		$.ajaxSetup({
			beforeSend: function(xhr, options) {
				var originalSuccess = options.success
				options.success = function(data, textStatus, jqXhr) {
						data = modifyResponseData(data);
				// success(data,textStatus, jqXhr);
					originalSuccess.apply(this, arguments)
				}
			}
		})

    //围栏类型下拉选
    getRailLists();
    //报警下拉选
    getGiveAnAlarmLists();
    //警戒等级下拉选
    getGuardAgainstLists();

    colorpicker.render({
        elem: '#ID-colorpicker-demo-form',
        color: '#1c97f5',
        done: function(color){
            $('#color').val(color);
        }
    });
    mapInit('recreate');

    $('#addButton').on('click', function(){
        $('#hiddenContent').toggle(); // 切换显示与隐藏
        $('#content').toggle(); // 切换显示与隐藏
        mapInit('draw');
    });

    $('#return').on('click', function(){
        $('#hiddenContent').toggle(); // 切换显示与隐藏
        $('#content').toggle(); // 切换显示与隐藏
        mapInit('recreate');
    });


    form.on('submit(demo1)', function(data){
        let field = data.field; // 获取表单字段值
        field.arrayField = coordinates.toString();

        field.roleCode = roleCode;
        field.orgId = orgId;
        field.userId = userId;
        field.bidCode = bidCode;
        console.log(field);
        const url = commonUrl + "screen/largeScreen/personnelControl/addNewFence";
        let encryptStr = encryptCBC(JSON.stringify(field));
        ajaxRequest(url, "POST", encryptStr, true, function () {
        }, function (result) {
            console.log(result);
            if (result.code === 200) {
                $('#hiddenContent').toggle(); // 切换显示与隐藏
                $('#content').toggle(); // 切换显示与隐藏
                table.reload('dome');
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }else if(result.code === 401){
                loginout(1)
            }
        }, function (xhr) {
            error(xhr)
        } , "application/json",aqEnnable);

        // return false; // 阻止默认 form 跳转
    });

    //穿戴装备
    wearGarList();

});

//穿戴装备
function wearGarList(){
    const url = commonUrl + "screen/largeScreen/personnelControl/getNewFenceList";

    table.render({
        elem: '#dome',
        url: url,
        skin: 'line',
        page: false,
        headers:{
            decrypt:"decrypt",
            "Authorization":token
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode
        },
        cols: [[
            {field: 'number', width:60,title: '序号', align: 'center', type: 'numbers'},
            {field: 'fenceName', width:110, align: 'center', title: '围栏名称'},
            {field: 'fenceType', width:110, align: 'center', title: '围栏类型'},
            {field: 'alarmType', width:100, align: 'center', title: '报警类型'},
            {field: 'alertType', width:100, align: 'center', title: '警戒等级'},
            {field: 'color', width:80, align: 'center', title: '颜色', templet: d => {
                    return '<div style="width: 20px;height: 20px;background-color: '+d.color+'"></div>';
                }
            },
            {field: 'status', align: 'center', title: '状态', templet: '#switchTpl'},
            {
                fixed: 'right', width:80, title: '操作', align: 'center', templet: d => {
                    let text = "";
                        text +='<a lay-event="del" style="color: #f80b37;cursor: pointer;font-size: 16px">删除</a>';
                    return text;
                }
            }
        ]],
        initComplete: function () {
            // 在表格渲染完成后，重新渲染序号列
            var that = this.elem.next();
            var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
            tool.find("tr").each(function (index, item) {
                $(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
            });
        },
        done:function(res, curr, count, origin){
            console.log(res);
        },
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 7
    });

    table.on('tool(test)', function (obj) {
        var data = obj.data; //当前行数据
        var rowIndex = obj.index;
        var layEvent = obj.event; //当前点击的事件名
        if (layEvent === 'del') {
            layer.confirm('确定要删除吗？', {
                btn : [ '确定', '取消' ]
            }, function(index) {
                const url = commonUrl + "screen/largeScreen/personnelControl/delSubcontractorById";

                const params = {
                    "roleCode": roleCode,
                    "orgId": orgId,
                    "userId": userId,
                    "bidCode": bidCode,
                    "id": data.id
                }
                let encryptStr = encryptCBC(JSON.stringify(params));
                ajaxRequest(url, "POST", encryptStr, true, function () {
                }, function (result) {
                    if (result.code === 200) {
                        layer.close(index);
                        table.reload('dome');
                    } else if (result.code === 500) {
                        layer.msg(result.msg, { icon: 2 });
                    }else if(result.code === 401){
                        loginout(1)
                    }
                }, function (xhr) {
                    // error(xhr)
                }, "application/json",aqEnnable);
            });
        }

    });

    //权限判断
    form.on('switch(statusSwitch)', function(data){
        debugger
        var isChecked = data.elem.checked; // 获取复选框的当前状态
        var value = data.value; // 获取复选框的值
        let status = isChecked ? 1 : 0;
        const url = commonUrl + "screen/largeScreen/personnelControl/subcontractorSwitchListen";

        const params = {
            "roleCode": roleCode,
            "orgId": orgId,
            "userId": userId,
            "bidCode": bidCode,
            "id": value,
            "status": status
        }
        let encryptStr = encryptCBC(JSON.stringify(params));
        ajaxRequest(url, "POST", encryptStr, true, function () {
        }, function (result) {
            if (result.code === 200) {
                layer.msg('状态更新成功');
                table.reload('dome');
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }else if(result.code === 401){
                loginout(1)
            }
        }, function (xhr) {
            // error(xhr)
        }, "application/json",aqEnnable);
    });
}

function mapInit(module){
    // 获取经纬度
    var lat,lon;
    // if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(function (position) {
    //         lat = position.coords.latitude;
    //         lon = position.coords.longitude;
            lat = '31.93566198931321';
            lon = '117.16010067578883';
            console.log(lon,lat)
            map= new BMap.Map("map");
            map.centerAndZoom(new BMap.Point(lon,lat), 15);
            map.enableScrollWheelZoom();


            var marker = new BMap.Marker(new BMap.Point(lon,lat));        // 创建标注
            map.addOverlay(marker);
            if (module === 'draw') {
                drawAFence();
            } else if (module === 'recreate') {
                RecreateFence();
            }



        // });
    // } else {
    //     console.log("浏览器不支持 Geolocation API");
    // }

}

//围栏显示
function RecreateFence(){
    const url = commonUrl + "screen/largeScreen/personnelControl/getReplicaFence";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        // console.log(result);
        if (result.code === 200) {
            let rawData = result.data;
            let polygonsDatas = [];

            // 将原始数据按 id 分组
            let idGroups = {};
            rawData.forEach(function(item) {
                if (!idGroups[item.id]) {
                    idGroups[item.id] = [];
                }
                idGroups[item.id].push(item);
            });

            // 将每组数据转换为 BMapGL.Point 格式并添加到 polygonsDatas 中
            for (let id in idGroups) {
                let points = idGroups[id].map(function(item) {
                    return new BMap.Point(parseFloat(item.longitude), parseFloat(item.latitude));
                });
                let color = idGroups[id][0].color;
                polygonsDatas.push({ points: points, color: color });
            }
            console.log(polygonsDatas);
            polygonsDatas.forEach(function(data) {
                // 创建一个多边形对象
                var polygon = new BMap.Polygon([data.points], {
                    zIndex: 999,
                    fillOpacity: 0,
                    strokeColor: data.color,
                    strokeWeight: 2,
                    strokeOpacity: 1
                });
                map.addOverlay(polygon);
            });

        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr) {
        // error(xhr)
    } , "application/json",aqEnnable);
}

//绘制围栏
function drawAFence(){
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
        debugger
        if (overlays.length > 0) {
            console.log(overlays[0])
            var polygon = e.overlay.getPath();//Array<Point> 返回多边型的点数组

          //  const polygon = overlays[0].Po;
            for (let i = 0; i < polygon.length; i++) {
                coordinates.push(polygon[i].lng + '@' +polygon[i].lat);
            }
            console.log("多边形顶点坐标:", coordinates);
        }
    };

    var styleOptions = {
        strokeColor: "red", //边线颜色。
        fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, //边线的宽度，以像素为单位。
        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
}

function getRailLists(){
    // let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
    // let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
    const url = commonUrl + "system/sys/select/getRailLists"; // url
    ajaxRequestGet(url, "GET", true, function () {
    }, function (result) {
        if (result.code === 200) {
            let html = '';
            if (result.data && result.data.length > 0) {
                $.each(result.data, function (index, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>'
                })
            }
            $('#railType').empty().append(html);
            layui.form.render();
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, aqEnnable);
}

function getGiveAnAlarmLists(){
    let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
    let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
    const url = commonUrl + "system/sys/select/getGiveAnAlarmLists?params=" + montageParam; // url
    ajaxRequestGet(url, "GET", true, function () {
    }, function (result) {
        if (result.code === 200) {
            let html = '';
            if (result.data && result.data.length > 0) {
                $.each(result.data, function (index, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>'
                })
            }
            $('#giveAnAlarmType').empty().append(html);
            layui.form.render();
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, aqEnnable);
}

function getGuardAgainstLists(){
    let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
    let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
    const url = commonUrl + "system/sys/select/getGuardAgainstLists?params=" + montageParam; // url
    ajaxRequestGet(url, "GET", true, function () {
    }, function (result) {
        if (result.code === 200) {
            let html = '';
            if (result.data && result.data.length > 0) {
                $.each(result.data, function (index, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>'
                })
            }
            $('#guardAgainstType').empty().append(html);
            layui.form.render();
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, aqEnnable);
}