<template>
  <div class="widget-bigScreenBaseMap">
    <MapInfo />
  </div>
</template>

<script>
import { Vector as VectorSource } from 'ol/source'
import { Vector as VectorLayer } from 'ol/layer'
import Feature from 'ol/Feature'
import { Point } from 'ol/geom'
import { Style, Circle, Icon, Fill, RegularShape, Stroke, Text } from 'ol/style'
import MapView from './components/mapView.vue'
import MapInfo from './components/MapInfo.vue'
import config from './config.json'
export default {
  name: 'bigScreenBaseMap', //大屏背景地图
  components: {
    MapView,
    MapInfo
  },
  data() {
    return {
      view: null,
      mapEvent: '', //地图事件

      vectorSource: null,
      vectorLayer: null,
      featureList: [
        {
          type: '工程车辆',
          position: [104.147036206, 30.0132457502],
          info: {}
        },
        {
          type: '巡检人员',
          position: [104.149004517, 30.013366738],
          info: {}
        },
        {
          type: '视频',
          position: [104.146901293, 30.0134616199],
          info: {}
        }
      ],
      //弹窗位置
      inspectorsPosition: null,
      floodReportPosition: null,
      videoPosition: null,
      //信息卡弹窗样式
      inspectorsCardStyle: config.inspectorsCardStyle,
      floodReportCardStyle: config.floodReportCardStyle,
      floodProneVideoCardStyle: config.floodProneVideoCardStyle
    }
  },
  watch: {
    view() {
      this.initMapEvent()
      // this.initVectorLayer();
    }
  },
  mounted() {},
  methods: {
    //初始化地图事件
    initMapEvent() {
      //地图单击事件
      let gl = this
      this.mapEvent = this.view.on('singleclick', function (evt) {
        let pixel = gl.view.getEventPixel(evt.originalEvent)
        gl.view.forEachFeatureAtPixel(pixel, function (feature) {
          gl.handleClick(feature.getProperties())
        })
      })
    },
    //初始化矢量图层源
    initVectorLayer() {
      // 矢量图层源
      this.vectorSource = new VectorSource({
        wrapX: false
      })
      //创建矢量层
      this.vectorLayer = new VectorLayer({
        source: this.vectorSource
      })
      //将图层添加到地图中
      this.view.addLayer(this.vectorLayer)
      this.showMapFeatureInfo()
    },
    //显示地图要素
    showMapFeatureInfo() {
      this.featureList.forEach((item) => {
        const { type, position, info } = item
        this.showPointSymbol(type, position, info)
      })
    },
    //显示点符号
    showPointSymbol(type, position, info) {
      // this.vectorSource.clear()
      //创建Feature，并添加进矢量容器中
      const feature = new Feature({
        geometry: new Point(position),
        name: type,
        info
      })
      //创建标记的样式
      feature.setStyle(this.setFeatureStyle(type))
      this.vectorSource.addFeature(feature)
    },
    //地图点击回调 @data 要素信息
    handleClick(data) {
      const { geometry, info, name } = data
      switch (name) {
        case '工程车辆':
          this.inspectorsPosition = [...geometry.flatCoordinates]
          break
        case '巡检人员':
          this.floodReportPosition = [...geometry.flatCoordinates]
          break
        case '视频':
          this.videoPosition = [...geometry.flatCoordinates]
          break
      }
    },
    //为要素设置样式
    setFeatureStyle(type) {
      switch (type) {
        case '工程车辆':
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.7],
              scale: 0.7,
              //图标的url
              src: require('@/views/groupPage/images/其他/其他-工程车辆.png')
            })
          })
        case '巡检人员':
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.7],
              scale: 0.7,
              //图标的url
              src: require('@/views/groupPage/images/其他/其他-巡查人员.png')
            })
          })
        case '视频':
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.7],
              scale: 0.7,
              //图标的url
              src: require('@/views/groupPage/images/设备/设备-视频监控.png')
            })
          })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.widget-bigScreenBaseMap {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  // background: #000;
}
</style>