<template>
  <div style="position: relative">

    <!-- 组织路由 -->
    <div>组织路由</div>

    <div class="div_search">
      <el-select v-model="selAgencyId"
                 placeholder="请选择未添加标注的组织">
        <el-option @click.native="orgChange(index)"
                   v-for="(item,index) in subAgencyArray"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>

      <el-button v-if="showBtn&&!hasPolygon"
                 style="margin-left:10px"
                 type="primary"
                 icon="el-icon-plus"
                 @click="handleSearch">搜索</el-button>

    </div>

    <div class="div_content">

      <div id="map"
           class="div_map"
           :style="{height:mapHeight+'px'}"></div>
      <div class="div_data"></div>
    </div>

  </div>

</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { ZoomSlider, Zoom } from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import Static from 'ol/source/ImageStatic.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Projection from 'ol/proj/Projection.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import { defaults as defaultControls, ZoomToExtent } from 'ol/control.js';
import { defaults as defaultInteractions, Modify, Select, DoubleClickZoom } from 'ol/interaction.js';
import { getCenter } from 'ol/extent.js';
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js';
import Draw from 'ol/interaction/Draw.js';
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import { transform } from 'ol/proj'
import { altKeyOnly, click, pointerMove } from 'ol/events/condition';


let loading;//加载动画

let x = 1500
let y = 700
let size = [x, y]
let extent = [-x, -y, x, y]
let projection = new Projection({
  code: 'xkcd-image',
  units: 'pixels',
  extent: extent
});

let map;
let mapView;
let gaodeMapLayer;//背景地图图层
let polygonLayer;//变电站标注图层
let polygonSource;//变电站标注多边形

let draw;//绘制handle
let select;//选中标注
let selectAltClick;
let selectedFeatures;

//变电站标注的文字样式
var createTextStyle = function (feature) {
  return new Text({
    textAlign: undefined,
    font: "bold 18px Arial",
    //fontFamily: "Courier New, monospace",
    fontWeight: "bold",
    text: feature.values_.name,
    //text: "变电站名称",
    fill: new Fill({ color: "#007ab9" }),
    stroke: new Stroke({ color: "#ffffff", width: 3 }),
    offsetY: 0,
    overflow: true,
  });
};
//变电站标注样式

var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        color: [255, 255, 255, 0.3]
      }),
      stroke: new Stroke({
        color: [0, 153, 255, 1],
        width: 3
      }),

      text: createTextStyle(feature)
    });;
  };
})()

const vueGis = {
  name: 'HomeMap',
  data () {
    return {
      method: "",//绘制方法
      centerPoint: [],//中心点位置
      zoom: 14,//缩放范围：区14
      minZoom: 1,//最小缩放
      isMapLoaded: false,//地图是否加载完毕

      orgData: {},//当前组织对象
      orgId: '',
      orgLevel: '',

      subAgencyArray: [],//下拉框数据
      selAgencyIndex: 0,
      selAgencyId: '',//下拉框选中的组织id
      selAgency: {},//下拉框选中的组织对象
      hasPolygon: false,//下拉框选中的组织是否有标注
      showBtn: false,

      selPolygonId: '',//选择的多边形id
      selPolygon: {},

      //下钻层级记录
      runNum: 0,
      runAgency: [],

    }
  },
  async mounted () {
    //加载组织数据
    await this.loadOrgData()

    //初始化地图
    this.initMap()

    //添加标注图层
    this.addPolygonLayer()

    //加载当前园区的标注
    this.loadPolygon()

  },
  methods: {
    //查询
    handleSearch (index) {

      this.selAgencyIndex = index

      selectedFeatures.clear()

      if (index || index === 0) {
        this.showBtn = true
        this.selAgency = this.subAgencyArray[index]
        if (this.selAgency.coordinates) {
          this.hasPolygon = true
          this.highlightPolygon()
        } else {
          this.hasPolygon = false
        }

      } else {
        this.showBtn = false
      }

    },

    //刷新地图
    async refreshMap (isRefreshView) {
      //加载组织数据
      await this.loadOrgData()

      //加载当前园区的标注
      await this.loadPolygon()

      //重置地图中心点
      if (isRefreshView) {
        this.setMapLocation()
        mapView.setCenter(this.centerPoint);
        mapView.setZoom(this.zoom);
      }
    },

    //高亮某个标注
    highlightPolygon () {

      let features = polygonSource.getFeatures()
      features.forEach(element => {

        if (element.id_ === this.selAgencyId) {

          selectedFeatures.push(element)
        }
      });

    },

    //返回上一级组织
    handleBack () {

      this.runNum--
      this.runAgency.pop()
      if (this.runNum === 0) {
        this.orgId = ''
        this.orgLevel = ''
      } else {
        this.orgId = this.runAgency[this.runAgency.length - 1].id
        this.orgLevel = this.runAgency[this.runAgency.length - 1].level
      }

      this.refreshMap(true)

    },

    //加载组织数据
    async loadOrgData () {
      const url = "/gov/org/agency/maporg"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
      let params = {
        orgId: this.orgId,
        level: this.orgLevel
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.orgData = data
        this.runAgency.push(data)

        if (data.children && data.children.length > 0) {
          this.subAgencyArray = data.children
          this.selAgencyId = this.subAgencyArray[0].id
        }

      } else {
        this.$message.error(msg)
      }

    },

    //加载当前园区的标注
    loadPolygon () {
      polygonSource.clear()//清空变电站标注

      let featureData = []//标注数据
      if (this.subAgencyArray && this.subAgencyArray.length > 0) {//判断是否存在下级标注
        let oneData = {}

        this.subAgencyArray.forEach(agencyItem => {

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }

        });

      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        polygonSource.addFeatures(feature)

      }
      this.orgChange(this.selAgencyIndex)
    },

    //选择feature
    selectFeature (e) {
      console.log(e)
      this.selAgencyId = e.selected[0].id_
      this.subAgencyArray.forEach((element, index) => {
        if (element.id === e.selected[0].id_) {
          this.selAgencyIndex = index
          this.orgChange(index)
        }

      });

    },
    //下钻到下一级
    toSubAgency (e) {
      console.log(e)
      if (this.method != 'mAddPolygon' && this.level != 'neighborHood') {
        //下钻到下一级
        this.subAgencyArray.forEach(item => {
          if (item.id === e.selected[0].id_) {
            this.selPolygonId = item.id
            this.selPolygon = item
            this.orgId = item.id
            this.orgLevel = item.level

          }
        });

        this.runNum++
        this.runAgency.push(this.selPolygon)
        this.selAgencyIndex = 0
        this.refreshMap(true)

      }
    },

    //设置地图定位的中心点和缩放级别
    setMapLocation () {
      this.centerPoint = []

      if (this.orgData.longitude && this.orgData.latitude) {
        this.centerPoint.push(this.orgData.longitude)
        this.centerPoint.push(this.orgData.latitude)
      }

      this.setZoom(this.orgData.agencyLevel)
    },

    //根据组织层级设置缩放级别
    setZoom (agencyLevel) {
      if (agencyLevel === 'district') {
        this.zoom = 14
      } else if (agencyLevel === 'street') {
        this.zoom = 15
      } else if (agencyLevel === 'community') {
        this.zoom = 16
      }

    },

    initMap () {
      this.setMapLocation()

      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          //指定url瓦片
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: true//x方向平铺，也可以选择false
        }),
        zIndex: 20
      });

      mapView = new View({
        //中心点坐标
        center: this.centerPoint,
        // projection: 'EPSG:3857',
        projection: 'EPSG:4326',
        zoom: this.zoom,
        minZoom: this.minZoom
      }),
        //初始化map和地图底图
        //创建地图容器
        map = new Map({
          layers: [gaodeMapLayer],
          //加载瓦片图层数据
          view: mapView,
          target: 'map'
          //目标加载到map中
        })

      map.on('singleclick', function (e) {
        console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));

      })

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom;
        });
      map.removeInteraction(dblClickInteraction);

    },

    //添加变电站标注图层
    addPolygonLayer () {
      polygonSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      polygonLayer = new VectorLayer({
        source: polygonSource,
        style: polygonStyleFunction,
        zIndex: 50
      });

      //选中多边形后的样式
      var overlayStyle = (function () {

        return function (feature) {
          var styles = {};
          styles['Polygon'] = [
            new Style({
              stroke: new Stroke({
                color: '#ec9000',
                width: 2
              })
            }),

            new Style({
              fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
              })
            }),
            new Style({
              text: createTextStyle(feature)
            })
          ];
          styles['MultiPolygon'] = styles['Polygon'];
          return styles[feature.getGeometry().getType()];
        };
      })();

      select = new Select({
        style: overlayStyle
      });

      selectAltClick = new Select({
        condition: function (mapBrowserEvent) {
          return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
        },
      });

      selectedFeatures = select.getFeatures();

      map.addLayer(polygonLayer)
      map.addInteraction(select);
      map.addInteraction(selectAltClick);

      select.on('select', e => {
        this.selectFeature(e)
      });
      selectAltClick.on('select', e => {
        this.toSubAgency(e)
      });

    },



    //点击【重新绘制】
    handleEditPolygon () {
      if (this.method === 'mEditPolygon') {
        this.method = ""
        map.removeInteraction(draw);
      } else {
        this.method = 'mEditPolygon';
        draw = new Draw({
          source: polygonSource,
          type: "Polygon"
        });
        map.addInteraction(draw);
        draw.on('drawend', feature => {
          this.polygonCoor = feature.feature.values_.geometry.flatCoordinates

          var coorString = ""
          for (var i = 0; i < this.polygonCoor.length; i++) {
            coorString = coorString + this.polygonCoor[i] + ","
          }
          if (this.polygonCoor.length > 0) {
            coorString = coorString.substring(0, coorString.length - 1)
          }
          console.log(coorString)

        });
      }

    },


    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {

    vueFlag: {
      type: String,
      default: "alarm"
    }
  },
  computed: {

    extentXOffset () {

      if (this.clientHeight < 900) {
        return 0.88
      } else {
        return 0.95
      }
    },
    extentYOffset () {

      return 0.95
    },
    imgExtent () {

      return [-x * this.extentXOffset, -y * this.extentYOffset, x * this.extentXOffset, y * this.extentYOffset]
    },
    mapHeight () {

      return this.clientHeight - 220;

    },

    ...mapGetters(["clientHeight"])

  },
  components: {},
}
export default vueGis;
</script>

<style >
.div_search {
  text-align: center;
  height: 50px;
  width: 100px;
  display: flex;
}

.div_content {
  margin-top: 30px;
  padding: 20px 30px;
  display: flex;
}

.div_map {
  width: 100%;
}
.div_data {
  width: 300px;
}
.ol-overlaycontainer-stopevent {
  display: none;
}
</style>    