import * as maptalks from 'maptalks';
import mapboxgl from "mapbox-gl";
// import * as turf from '@turf/turf';

import customTool from './customTool';
import 'maptalks/dist/maptalks.css';
import { MapboxglLayer } from "maptalks.mapboxgl";
import store from '../store';
import axios from './axiosHttp';
import interfaces from './interface';
import { message } from 'ant-design-vue';
import Common from '../unit/common';
import img_fengongsi_m_url from '../assets/mapv2/icon_fengongsi_m.png';
import img_fengongsi_mm_url from '../assets/mapv2/icon_fengongsi_mm.png';
import img_changzhan_m_url from '../assets/mapv2/icon_changzhan_m.png';
import img_changzhan_mm_url from '../assets/mapv2/icon_changzhan_mm.png';
import img_zhandian_m_url from '../assets/mapv2/icon_zhandian_m.png';
import img_zhandian_mm_url from '../assets/mapv2/icon_zhandian_mm.png';
import img_cheliang_m_url from '../assets/mapv2/icon_cheliang_m.png';
import img_cheliang_mm_url from '../assets/mapv2/icon_cheliang_mm.png';
import img_cheliang_n_url from '../assets/mapv2/icon_cheliang_n.png';
import img_cheliang_s_url from '../assets/mapv2/icon_cheliang_ss.png';
import img_bg_s_url from '../assets/mapv2/bg_s.png';
import img_bg_m_url from '../assets/mapv2/bg_m.png';
import img_bg_m2_url from '../assets/map/xuanlusytle.png';
import img_qidian_url from '../assets/mapv2/icon_qidian.png';
import img_zhongdian_url from '../assets/mapv2/icon_zhongdian.png';
import fgsmarkers from '../assets/json/fgsmarkers.json';
import czmarkers from '../assets/json/czmarkers.json';
import zdmarkers from '../assets/json/zdmarkers.json';
import clmarkers from '../assets/json/clmarkers.json';
import xianluline from '../assets/json/xianluline.json';
let fgsMarkers = []
let czMarkers = []
let zdMarkers = []
let clMarkers = []





// 真实接口
const initfgsLayer = () => {
  let that = this
  //utils.initfgsLayer();
  const fengongsi_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_layer' })
  // 2.在layer上绑定监听事件
  fengongsi_layer.on(this.mars3d.EventType.click, function (event) {
    console.log('监听layer，单击了矢量对象', event)
    console.log(event.graphic.attr)
    that.$store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: event.graphic.attr.companyId, value: event.graphic.attr.companyName })
    event.graphic.flyTo({ radius: 2000, duration: 1 })

  })
  const fengongsi_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_area_layer' })
  window.marsmap.addLayer(fengongsi_layer)
  window.marsmap.addLayer(fengongsi_area_layer)

  this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
    if (res.code === 0) {
      console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        const graphic = new this.mars3d.graphic.DivGraphic({
          position: [res.data[i].longitude, res.data[i].latitude, 1000],
          style: {
            html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
            offsetY: -60,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
            // 高亮时的样式
            highlight: {
              type: this.mars3d.EventType.click,
              className: "marsBlueGradientPnl-highlight"
            }
          },
          attr: res.data[i]
        })
        fengongsi_layer.addGraphic(graphic)

        if (res.data[i].shape != null) {
          const graphic = new this.mars3d.graphic.PolygonEntity({
            positions: res.data[i].shape,
            style: {
              height: 500 + Math.random() * 1000,
              diffHeight: 2000.0,
              color: this.fillBoderColors[i],
              alphaPower: 1.5,
              opacity: 0.5,
              highlight: {
                type: this.mars3d.EventType.click,
                diffHeight: 3000,
                material: this.mars3d.MaterialUtil.createMaterialProperty(this.mars3d.MaterialType.LineFlow, {
                  image: "img/textures/fence.png",
                  color: "#bdf700",
                  repeat: new Cesium.Cartesian2(10, 1),
                  axisY: true, // 方向，true时上下，false左右
                  speed: 10
                })
              },
              attr: res.data[i]
            },
          })
          fengongsi_area_layer.addGraphic(graphic)
        }
      }
    }
  });
}


// 站点走的真实接口查询
const initzhandianLayer = () => {
  let datas = []
  axios.get(interfaces.mapResource.getZhandianDataAll, {}).then((res) => {
    console.log(res, "站点接口")
  })
}
// 场站接口
const initchangzhanLayer = () => {
  let datas = []
  axios.get(interfaces.mapResource.getChangZhanAllData, {}).then((res) => {
    console.log(res, "场站接口")
  })
}


const queryChangZhanAttrByType = (value) => {
  let layer = window.map.getLayer("changzhanlayer");
  if (!layer.isEmpty()) {
    layer.filter(function (marker) {
      let attr = marker.getProperties()
      if (value.indexOf(attr.type) > -1) {
        marker.show()
      } else {
        marker.hide()
      }
    })
  }
}
// 已经不再使用的方法
const initxianluLayer = () => {
  if (window.map && window.map.isLoaded()) {
    let layer = window.map.getLayer("xianlulayer");
    let layertemp = window.map.getLayer("templayer");
    layer.clear()
    layertemp.clear()
    var lines = new maptalks.LineString([
      [113.568662, 22.306878],
      [113.559393, 22.304972],
      [113.554243, 22.277335],
      [113.559049, 22.270981],
      [113.565916, 22.259225],
      [113.569006, 22.247469]], {
      'id': Math.random() * 1000,
      'editable': true,
      'properties': {
        'name': 'ceshidian',
      },
      symbol: {
        'lineDasharray': [0, 0],
        'linePatternFile': img_bg_m2_url,
        'linePatternDx': 0,
        'lineCap': 'round',
        'lineJoin': 'bevel',
        'lineWidth': 5
      }
    })
    layer.addGeometry(lines);
    lines.animate({
      symbol: {
        linePatternDx: 20
      }
    }, {
      repeat: true
    });
    // 给线的起点和终点添加点样式
    {
      let markerbegin = new maptalks.Marker(lines.getFirstCoordinate(), { //标注添加到集合
        'id': 'beginid',
        'properties': {
          'name': '线路起点',
        },
        'symbol': [
          {
            'markerFile': img_qidian_url,
            'markerWidth': 248,
            'markerHeight': 132,
            'markerDy': 33
          }
        ]
      })
      layertemp.addGeometry(markerbegin);
      let markerend = new maptalks.Marker(lines.getLastCoordinate(), { //标注添加到集合
        'id': 'endid',
        'properties': {
          'name': '线路终点',
        },
        'symbol': [
          {
            'markerFile': img_zhongdian_url,
            'markerWidth': 182,
            'markerHeight': 97,
            'markerDy': 24
          }
        ]
      })
      layertemp.addGeometry(markerend);

      window.map.on('click', function (e) {
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layer]
        },
          function (geos) {
            if (geos.length === 0) {
              return;
            } else {
              store.commit("SET_SelAttr", { visa: true, type: "xianlu", id: geos[0]._id, value: geos[0].properties.name })
            }
          }
        );
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layertemp]
        },
          function (geos) {
            if (geos.length === 0) {
              return;
            } else {
              store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0]._id, value: geos[0].properties.name })
            }
          }
        );
      });
    }
  }
}

const initxianluLayerTrue = (attr) => {
  let xianlumarker = []
  let lines = []
  if (window.map && window.map.isLoaded()) {
    let layer = window.map.getLayer("xianlulayer");
    let layertemp = window.map.getLayer("templayer");
    layer.clear()
    layertemp.clear()
    for (let index = 0; index < attr.lineTypeMapList.length; index++) {
      const element = attr.lineTypeMapList[index];
      let line = new maptalks.LineString(element.linePointList, {
        'id': Common.uuid(),
        'editable': true,
        'properties': {
          'id': attr.lineId,
          'name': attr.lineName,
          'routeNature': attr.routeNature,
          'routeNatureName': attr.routeNatureName,
        },
        symbol: {
          'lineDasharray': [0, 0],
          'linePatternFile': img_bg_m2_url,
          'linePatternDx': 0,
          'lineCap': 'round',
          'lineJoin': 'bevel',
          'lineWidth': 5
        }
      })
      // line.animate({
      //   symbol: {
      //     linePatternDx: 20
      //   }
      // }, {
      //   repeat: true
      // });
      lines.push(line)
    }
    layer.addGeometry(lines);
    // 添加路线上的所有站点
    {
      for (var i = 0; i < attr.stationList.length; i++) {
        var x = attr.stationList[i].longitude
        var y = attr.stationList[i].latitude

        xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
          'id': Common.uuid() + '' + i,
          'editable': true,
          'properties': {
            'id': attr.stationList[i].stationId,
            'name': attr.stationList[i].stationName,
            'type': attr.stationList[i].stationTypeName,
            'flag': false
          },
          'symbol': [
            {
              'markerType': 'ellipse',
              'markerFill': 'rgb(135,196,240)',
              'markerFillOpacity': 1,
              'markerLineColor': '#34495e',
              'markerLineWidth': 1,
              'markerLineOpacity': 0.8,
              'markerLineDasharray': [],
              'markerWidth': 10,
              'markerHeight': 10,
              'markerDx': 0,
              'markerDy': 0,
              'markerOpacity': 0.8
            },
            {
              'textFaceName': 'sans-serif',
              'textName': attr.stationList[i].stationName,
              'textFill': '#ffffff',
              'textDy': -10,
              'textDx': 15,
              'textHorizontalAlignment': 'middle', //left middle right
              'textVerticalAlignment': 'top' //top middle bottom
            }
          ]
        }))
      }
      layertemp.addGeometry(xianlumarker);
    }
    layer.setZIndex(1)
    layertemp.setZIndex(2)
    // 给线和点添加点击事件
    {
      window.map.animateTo({
        zoom: map.getFitZoom(lines[0].getExtent()) - 1,
        center: lines[0].getExtent().getCenter()
      }, {
        duration: 500,
        easing: 'out'
      })
      window.map.on('click', function (e) {
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layer]
        },
          function (geos) {
            if (geos.length === 0) {
              return;
            } else {
              store.commit("SET_SelAttr", { visa: true, type: "xianlu", id: geos[0].properties.id, value: geos[0].properties.name })
              return;
            }
          }
        );
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layertemp]
        },
          function (geos) {
            // layertemp.forEach(function (g) {
            //   if (g.properties.flag) {
            //     g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
            //   }
            // });
            if (geos.length === 0) {
              return;
            } else {
              store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0].properties.id, value: geos[0].properties.name })
              if (geos[0].properties.flag) {
                //   geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
                return;
              }
            }
          }
        );
      });
    }
  }
}

// 
const loadCheLiangByLine = (id) => {
  let layer = window.map.getLayer("chelianglayer");
  layer.clear()
  axios.get(interfaces.mapResource.getLineRunVehicle, {
    params: { lineName: id },
  }).then((res) => {
    if (res.code === 0) {
      // console.log("==================",res.data)
      let datas = res.data
      let clmarkerline = []
      for (let i = 0; i < datas.length; i++) {
        let x = datas[i].longitude
        let y = datas[i].latitude
        clmarkerline.push(new maptalks.Marker([x, y], { //标注添加到集合
          'id': Common.uuid() + i,
          'editable': true,
          'properties': {
            'id': datas[i].plateNum,
            'name': datas[i].plateNum,
            'companyName': datas[i].companyName
          },
          'symbol': [
            {
              'markerFile': img_cheliang_n_url,
              'markerWidth': 30,
              'markerHeight': 30,
            }
          ]
        }))
      }
      layer.addGeometry(clmarkerline);
      window.map.on('click', function (e) {
        if (store.state.mapMenu == "线路") {
          layer.forEach(function (g) {
            g.updateSymbol([{ 'markerFile': img_cheliang_n_url }]);
          });
          window.map.identify({
            'coordinate': e.coordinate,
            'layers': [layer]
          },
            function (geos) {
              if (geos.length === 0) {
                return;
              } else {
                store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: geos[0].properties.id, value: geos[0].properties.name })
                // geos[0].updateSymbol([{ 'markerFile': img_cheliang_s_url }]);
                return;
              }
            }
          );
        }
      })
    } else {
      message.warning('您当前网络不稳定,未获取到数据!')
    }
  });
}

// 接口获取车辆动态数据
const initcheliangLayer = () => {
  let datas = [];
  axios.get(interfaces.mapResource.getCheLiangDateAll, {}).then((res) => {
    console.log(res, "获取车辆动态数据")
  })
}

const queryCheLiangAttrByType = (value) => {
  let layer = window.map.getLayer("chelianglayer");
  if (!layer.isEmpty()) {
    layer.filter(function (marker) {
      let attr = marker.getProperties()
      if (value.indexOf(attr.companyName) > -1) {
        marker.show()
      } else {
        marker.hide()
      }
    })
  }
}

const loadGeometryById = (id, type) => {
  let obj = {};
  if (window.map && window.map.isLoaded()) {
    if (store.state.mapMenu == "分公司") {
      let layer = window.marsmap.getLayerById("fengongsi_layer");
      console.log(layer)
    } else if (store.state.mapMenu == "场站") {
      let layer = window.map.getLayer("changzhanlayer");
      if (!layer.isEmpty()) {
        layer.forEach(function (g) {
          g.updateSymbol([{ 'markerFile': img_changzhan_m_url }, { 'markerFile': img_bg_s_url }]);
        });
        // obj = layer.getGeometryById(id)
        obj = layer.getGeometries(function (marker) {
          let attr = marker.getProperties()
          if (id == attr.id) {
            marker.updateSymbol([{ 'markerFile': img_changzhan_mm_url }, { 'markerFile': img_bg_s_url }]);
            window.map.animateTo({
              zoom: 16,
              center: marker._coordinates.add(0.000, 0.000)
            }, {
              duration: 500,
              easing: 'out'
            })
          }
        })
      }
    } else if (store.state.mapMenu == "线路") {
      let layer = window.map.getLayer("xianlulayer");
      layer.clear()
      axios.get(interfaces.mapResource.getXianLuDataByLineID, {
        params: { lineId: id, flag: type },
      })
        .then((res) => {
          if (res.code === 0) {
            initxianluLayerTrue(res.data)
            // 查询线路上的车辆
            loadCheLiangByLine(res.data.lineName)
          } else {
            message.warning('您当前网络不稳定,未获取到数据!')
          }
        });
    } else if (store.state.mapMenu == "站点") {
      let layer = window.map.getLayer("zhandianlayer");
      if (!layer.isEmpty()) {
        layer.forEach(function (g) {
          g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
        });
        obj = layer.getGeometries(function (marker) {
          let attr = marker.getProperties()
          if (id == attr.id) {
            marker.updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_s_url }]);
            window.map.animateTo({
              zoom: 17,
              center: marker._coordinates.add(0.000, 0.000)
            }, {
              duration: 500,
              easing: 'out'
            })
          }
        })
      }
    } else if (store.state.mapMenu == "车辆") {
      let layer = window.map.getLayer("chelianglayer");
      if (!layer.isEmpty()) {
        layer.forEach(function (g) {
          g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
        });
        obj = layer.getGeometries(function (marker) {
          let attr = marker.getProperties()
          if (id == attr.id) {
            marker.updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_s_url }]);
            window.map.animateTo({
              zoom: 17,
              center: marker._coordinates.add(0.000, 0.000)
            }, {
              duration: 500,
              easing: 'out'
            })
          }
        })
      }
    }
  }
}

const initToolLayer = () => {
  if (window.map && window.map.isLoaded()) {
    let layer = window.map.getLayer("toollayer");
    let toollayer = window.map.getLayer("CustomTool_layer");
    if (layer) { layer.clear() }
    if (toollayer) { toollayer.clear() }
    if (store.state.maptool) {
      window.drawTool = new maptalks.DrawTool({
        mode: 'Point'
      }).addTo(window.map).disable();
      window.drawTool.setSymbol({
        lineColor: "#09b1ff",
        lineWidth: 2,
        lineDasharray: [5, 3],
        polygonFill: "rgb(9,177,255)",
        polygonOpacity: 0.15,
      })
      window.drawTool.on('drawend', function (param) {
        let flag = layer.addGeometry(param.geometry).onLoad();
        if (flag) {
          loadPointContainPolygon(param.geometry)
        }
        store.commit("SET_Maptool", false)
        window.drawTool.disable();
      });
      window.drawTool.setMode("Ellipse").enable();
    } else {
      layer.clear();
    }
  }
}

const loadtempLayer = (attr) => {
  let layer = window.map.getLayer("templayer");
  let polygons = [];
  if (!layer.isEmpty()) {
    layer.clear();
  }
  axios.get(interfaces.mapResource.getFenGongSiExtentById, {
    params: { companyId: attr.id },
  })
    .then((res) => {
      if (res.code === 0) {
        for (let index = 0; index < res.data.length; index++) {
          let element = res.data[index];
          polygons.push(new maptalks.Polygon(element, {
            visible: true,
            editable: true,
            cursor: "pointer",
            shadowBlur: 0,
            shadowColor: "black",
            draggable: false,
            dragShadow: false, // display a shadow during dragging
            drawOnAxis: null, // force dragging stick on a axis, can be: x, y
            symbol: {
              lineColor: "#09b1ff",
              lineWidth: 2,
              lineDasharray: [5, 3],
              polygonFill: "rgb(9,177,255)",
              polygonOpacity: 0.15,
            },
          }));
        }
        layer.addGeometry(polygons);
      } else {
        message.warning('您当前网络不稳定,未获取到数据!')
      }
    });
}

const loadPointContainPolygon = (geometry) => {
  let datas = []
  let tempPoints = ""
  let tool = new customTool().addTo(map);
  if (store.state.mapMenu === "站点") {
    let points = window.map.getLayer("zhandianlayer");
    datas = zdMarkers;
    points.clear()
    for (let i = 0; i < datas.length; i++) {
      let eee = window.map.coordinateToContainerPoint(datas[i]._coordinates);
      //g.containsPoint的参数不是coordinate(经纬度坐标),而是containerPoint (相对地图左上角的像素坐标)
      if (geometry.containsPoint(eee)) {
        // points.addGeometry(datas[i]);
        tool.setMarkersLayer(datas[i])
        tempPoints = tempPoints + "," + datas[i].properties.id
      }
    }
    let pointnum = tempPoints.split(",").length - 1
    if (pointnum > 50) {
      message.warning('选择站点不能大于50!')
    } else {
      store.commit("SET_SelAttr", { visa: true, type: "zhandiancircle", value: tempPoints })
    }
  } else if (store.state.mapMenu === "车辆") {
    let points = window.map.getLayer("chelianglayer");
    datas = clMarkers;
    points.clear()
    for (let i = 0; i < datas.length; i++) {
      let eee = window.map.coordinateToContainerPoint(datas[i]._coordinates);
      //g.containsPoint的参数不是coordinate(经纬度坐标),而是containerPoint (相对地图左上角的像素坐标)
      if (geometry.containsPoint(eee)) {
        // points.addGeometry(datas[i]);
        if (datas[i].options.visible) {
          tool.setMarkersLayer(datas[i])
          tempPoints = tempPoints + "," + datas[i].properties.id
        }
      }
    }
    let pointnum = tempPoints.split(",").length - 1
    if (pointnum > 50) {
      message.warning('选择车辆不能大于50!')
    } else {
      store.commit("SET_SelAttr", { visa: true, type: "cheliangcircle", value: tempPoints })
    }
  }


}

const loadLineNetworkByName = (id, name, flag) => {
  let layerter = window.map.getLayer("templayer");
  let layertemp = window.map.getLayer("zhandianlayer");
  let layer = window.map.getLayer("xianlulayer");
  layerter.clear()
  layer.clear()
  // layertemp.clear()
  let lines = []
  if (flag) {
    if (!layertemp.isEmpty()) {
      layertemp.filter(function (marker) {
        let attr = marker.getProperties()
        if (id == attr.id) {
          marker.show()
          marker.updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_s_url }]);
        } else {
          marker.hide()
        }
      })
    }
    axios.get(interfaces.mapResource.getZhandianNetWorkById, {
      params: { stationId: id },
    }).then((res) => {
      if (res.code === 0) {
        res.data.forEach(element => {
          lines.push(new maptalks.LineString(element.linePointList, {
            'id': element.lineId,
            'editable': false,
            'properties': {
              'name': element.lineName,
              'routeNature': element.routeNature,
              'routeNatureName': element.routeNatureName,
            },
            symbol: {
              'lineDasharray': [0, 0],
              'linePatternFile': img_bg_m2_url,
              'linePatternDx': 0,
              'lineCap': 'round',
              'lineJoin': 'bevel',
              'lineWidth': 5
            }
          }))
        });

        layer.addGeometry(lines);
      } else {
        message.warning('您当前网络不稳定,未获取到数据!')
      }
    });
  } else {
    if (!layertemp.isEmpty()) {
      layertemp.filter(function (marker) {
        let markerid = marker.getId()
        if (id == markerid) {
          marker.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
        }
        marker.show()
      })
    }
  }
}
export default {
  initfgsLayer,
  initzhandianLayer,
  initchangzhanLayer,
  initcheliangLayer,
}