import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon } from 'ol/style'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import qs from 'qs'
import Feature from 'ol/Feature'
import { Point } from 'ol/geom'
import axios from 'axios'
import { FlashMarker } from './flash.js'
export function flashingPoints(id, map, citys) {
    let flashingObj = null
    flashingObj = new FlashMarker(id, map, citys);
    // return new FlashMarker(id, map, citys);
    return flashingObj
}
export function filterKeySearch(name, config) {
    return new Promise(function(resolve) {
        if (name == null || name == "") {
            return
        }
        var _this = this;
        var initData = {
            "posArray": [{
                "name": name,
                'pageSize': config.pageSize,
                'currentPage': config.currentPage,
                'tableName': config.tableName
            }]
        }
        axios.post(config.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
                // if(data.length!=0){
                //     for(var i = 0;i<data.length;i++){
                //        let pos = [parseFloat(data[i].gaodelon),parseFloat(data[i].gaodelat)]
                //         // this.addVector(features,map,objVector)//(features,map)
                //        _this.addPoiVectors(data[i],pos,map,config)
                //     }
                //  }  
            resolve(data)
        })
    })
}
export function findFreeHandRoad(dataBaseConfig) {
    return new Promise(function(resolve) {
        if (dataBaseConfig.roadId == '' && dataBaseConfig.roadName == '') {
            return
        }
        // var _this = this;
        var initData = {
            "posArray": [{
                "roadId": dataBaseConfig.roadId,
                "roadName": dataBaseConfig.roadName,
                "tableName": dataBaseConfig.tableName
            }]
        }
        axios.post(dataBaseConfig.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
            resolve(data)
        })
    })
}
export function saveFreeHandRoad(roadNodeArr, roadLineArr, roadIdAndName, dataBaseConfig) {
    return new Promise(function(resolve) {
        if (roadNodeArr.length == 0) {
            return
        }
        if (roadLineArr.length == 0) {
            return
        }
        var _this = this;
        var initData = {
            "posArray": [{
                "roadNodeArr": roadNodeArr,
                "roadLineArr": roadLineArr,
                "roadIdAndName": roadIdAndName,
                "tableName": dataBaseConfig.tableName
            }]
        }
        axios.post(dataBaseConfig.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
            resolve(data)
        })
    })
}

function addPoiVectors(attributes, pos, map, config) {
    var vectorSource = new VectorSource({ id: config.id })
    let iconStyle = new Style({
        image: new Icon({
            scale: config.scale,
            src: config.img
        })
    })
    let iconFeature;
    iconFeature = new Feature({
        id: config.id,
        attributes: attributes,
        geometry: new Point(pos)
    })
    vectorSource.addFeature(iconFeature)
    let vectorLayerPoi = new VectorLayer({
        id: config.id,
        source: vectorSource,
        style: iconStyle
    })
    vectorLayerPoi.setZIndex(config.zIndex)
    map.addLayer(vectorLayerPoi)
}
export function addHugePointsGif(layerId, vectors, config, map) {
    // var coords =[]
    // var red = 0
    // for(var i = 0; i < 500; i++)
    // {
    //     var x = 118  +  4 * Math.random()
    //     var y = 28 + 5 * Math.random()
    //     coords.push([x,y])
    // }
    // var vectorLayerPoi = null ;
    var vectorSourcePoi = new VectorSource({})
    var vectorLayerPoi = new VectorLayer({
        id: layerId,
        source: vectorSourcePoi,
        // style: iconStyle,
        // updateWhileAnimating:true
    })
    vectorLayerPoi.setZIndex(config.zIndex)
    var canvas = document.createElement("canvas"); //创建一个canvas标签
    canvas.width = 150;
    canvas.height = 400;
    var image = new Image();
    var ctx = canvas.getContext("2d");
    image.src = config.img
    image.onload = function() {
        var imageWidth = image.width; //获取当前图片的尺寸
        var imageHeight = image.height;
        var personWidth = imageWidth / 54; //小人的宽高
        var personHeight = imageHeight * 2; //小人的高
        var index = 0;
        var x0 = ctx.canvas.width / 54 - personWidth / 54; //小人的起始位置
        var y0 = ctx.canvas.height / 54 - personHeight / 54;;
        ctx.drawImage(image, 0, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
        setInterval(function() {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
                //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
                //image:规定要使用的图像、画布或视频。
                //开始剪切的 x 坐标位置。
                //开始剪切的 y 坐标位置。
                //被剪切图像的宽度。
                //被剪切图像的高度。
                //在画布上放置图像的 x 坐标位置。
                //在画布上放置图像的 y 坐标位置。
                //可选。要使用的图像的宽度。（伸展或缩小图像）
                //可选。要使用的图像的高度。（伸展或缩小图像）
            ctx.drawImage(image, index * personWidth, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
            index++;
            if (index >= 54) {
                index = 0;
            }
            vectorLayerPoi.getSource().changed()
        }, 50);
        // var imageWidth = image.width;//获取当前图片的尺寸
        // var imageHeight = image.height;
        // var personWidth = imageWidth/4; //小人的宽高
        // var personHeight = imageHeight/4;
        // var index = 0; 
        // var x0 =ctx.canvas.width/2 - personWidth/2;  //小人的起始位置
        // var y0 = ctx.canvas.height/2 - personHeight/2;
        // ctx.drawImage(image,0,0, personWidth,personWidth,x0,y0,personWidth,personWidth);
        // setInterval(function(){

        //     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
        //     //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        //     //image:规定要使用的图像、画布或视频。
        //     //开始剪切的 x 坐标位置。
        //     //开始剪切的 y 坐标位置。
        //     //被剪切图像的宽度。
        //     //被剪切图像的高度。
        //     //在画布上放置图像的 x 坐标位置。
        //     //在画布上放置图像的 y 坐标位置。
        //     //可选。要使用的图像的宽度。（伸展或缩小图像）
        //     //可选。要使用的图像的高度。（伸展或缩小图像）
        //     ctx.drawImage(image,index*personWidth,0,personWidth,personWidth,x0+index,y0,personWidth,personWidth);
        //     index++;
        //     if(index>=4){
        //         index =0;
        //     }
        //     vectorLayerPoi.getSource().changed()
        // },200);
    }
    for (var i = 0; i < vectors.length; i++) {
        let coord = vectors[i];
        let circle = new Feature({
            attributes: vectors[i].attributes,
            geometry: new Point([coord.X, coord.Y])
        });
        circle.setStyle(new Style({
            image: new Icon({
                img: canvas,
                imgSize: [canvas.width, canvas.height],
                scale: config.scale
            })
        }));
        vectorLayerPoi.getSource().addFeature(circle);
    }
    map.addLayer(vectorLayerPoi);
}
export function addMultiHugePoints(layerId, vectors, config, map) {
    for (let i = 0; i < layerId.length; i++) {
        var index = i
        let targetLayer = this.findByIdToLayer(layerId[index], this.poiMap)
        if (targetLayer == undefined) { //去掉重复的渲染
            var vectorSource = new VectorSource({})
            let iconStyle = new Style({
                image: new Icon({
                    scale: config.scale,
                    src: config.img
                })
            })
            let hugePointsArr = [];
            if (vectors.length == 0) return;
            for (var i = 0; i < vectors.length; i++) {
                let iconFeature = new Feature({
                    attributes: vectors[i].attributes,
                    geometry: new Point([vectors[i].X, vectors[i].Y])
                })
                hugePointsArr.push(iconFeature)
            }
            vectorSource.addFeatures(hugePointsArr)
            let vectorLayerPoi = new VectorLayer({
                id: layerId[index],
                source: vectorSource,
                style: iconStyle,
                updateWhileAnimating: true
            })
            vectorLayerPoi.setZIndex(config.zIndex)
            map.addLayer(vectorLayerPoi)
        }
    }

}
export function addHugePoints(layerId, vectors, config, map) {
    var vectorSource = new VectorSource({})
    let iconStyle = new Style({
        image: new Icon({
            scale: config.scale,
            src: config.img
        })
    })
    let hugePointsArr = [];
    if (vectors.length == 0) return;
    for (var i = 0; i < vectors.length; i++) {
        let iconFeature = new Feature({
            attributes: vectors[i].attributes,
            geometry: new Point([vectors[i].X, vectors[i].Y])
        })
        hugePointsArr.push(iconFeature)
    }
    vectorSource.addFeatures(hugePointsArr)
    let vectorLayerPoi = new VectorLayer({
        id: layerId,
        source: vectorSource,
        style: iconStyle,
        updateWhileAnimating: true
    })
    vectorLayerPoi.setZIndex(config.zIndex)
    map.addLayer(vectorLayerPoi)
}
export function queryGeometry(posArr, map, config) {
    return new Promise((resolve) => {
        if (config == undefined) return;
        let posArrStr = '';
        for (var i = 0; i < posArr.length; i++) {
            if (i == posArr.length - 1) {
                posArrStr += "[" + posArr[i] + "]";
            } else {
                posArrStr += "[" + posArr[i] + "],";
            }
        }
        var _this = this;
        var initData = {
            "posArray": [{
                "posArr": posArrStr,
                "tableName": config.tableName
            }]
        }
        axios.post(config.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
            if (data.length != 0) {
                for (var i = 0; i < data.length; i++) {
                    let pos = [parseFloat(data[i].wgslon), parseFloat(data[i].wgslat)]
                        // this.addVector(features,map,objVector)//(features,map)
                    _this.addPoiVectors(data[i], pos, map, config)
                }
            }
            resolve(data)
        })
    })
}
export function addressSearch(address, config) {
    var _this = this;
    return new Promise(function(resolve) {
        if (address == null || address == "") {
            return
        }
        var initData = {
            "posArray": [{
                "address": address,
                "tableName": config.tableName
            }]
        }
        axios.post(config.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
            resolve(data);
        })
    })
}
export function revAddressSearch(address, config) {
    var _this = this;
    return new Promise(function(resolve) {
        if (address == null || address == "") {
            return
        }
        var initData = {
            "posArray": [{
                "addressPoints": address,
                "tableName": config.tableName
            }]
        }
        axios.post(config.serurl, qs.stringify(initData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).then(res => {
            let data = res.data
            resolve(data);
        })
    })
}