<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-12-24 17:32:21
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-14 11:11:55
 * @FilePath: src/views/screen/components/dataManagement/BaiduMap.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container">
    <baidu-map
      ref="map"
      :style="mapStyle"
      :center="center"
      :zoom="8"
      :scroll-wheel-zoom="true"
      :dragging="true"
      @click="clickMap"
      @ready="mapReady"
    >
      <bm-boundary name="宁夏回族自治区" :strokeWeight="1" strokeColor="blue" fillColor="#87a1bc"
                   :fillOpacity="fillOpacityValue"
      ></bm-boundary>
      <bm-view style="width: 100%; height: 100%;" />
      <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" color="red" size="BMAP_POINT_SIZE_NORMAL"
                           @click="clickHandler" style="cursor:pointer;"
      ></bm-point-collection>
      <bm-info-window :position="pointInfo" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 16px">
        <p>工程名称：{{pointInfo.name}}</p>
        <p>工程地址：{{pointInfo.address}}</p>
        <p>承包商单位：{{pointInfo.constructionUnit}}</p>
        <p>负责人：{{pointInfo.leader}}</p>
        <p>开工日期：{{pointInfo.startDate}}</p>
        <p>监理单位：{{pointInfo.supervisionUnit}}</p>
        <p style="float: right"> <a @click="openDetails" style="color: #00afff">工程详情</a></p>
      </bm-info-window>
<!--      <bm-marker-->
<!--        :position="{ lng: center.lng, lat: center.lat }"-->
<!--        :dragging="true"-->
<!--        animation="BMAP_ANIMATION_BOUNCE"-->
<!--      />-->
    </baidu-map>
  </div>
</template>
<script>
import { getProjectMapData, getProSelect } from '@/api/screen/screen'

export default {
  name: 'BnsBaiDuMap',
  props: {
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      infoWindow: {
        show: true,
        contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      },
      options: [],
      center: {
        lng: 106.07145,
        lat: 37.427088
      },
      mapStyle: {
        width: '100%',
        height: '100%'
      },
      fillOpacityValue: 0.3,
      keyword: '',
      mapDetails: false,
      projectMapData: [],
      points: [],
      pointInfo: {},
    }
  },
  methods: {
    clickHandler(e) {
      this.pointInfo = e.point
      console.log("==========",this.pointInfo)
      this.infoWindowOpen()
    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    openDetails(){
      this.$emit('openDialog', this.pointInfo);
    },
    getProjectMapData(val) {
      const params = {
        proId: val === null ? null : val
      }
      getProjectMapData(params).then(res => {
        console.log(res)
        this.projectMapData = []
        this.projectMapData = res.data
        const points = []
        this.points = []
        this.projectMapData.map(item => {
          points.push({
            lng: item.lon,
            lat: item.lat,
            address: item.address,
            name: item.name,
            constructionUnit: item.constructionUnit,
            leader: item.leader,
            proId: item.proId,
            startDate: item.startDate,
            supervisionUnit: item.supervisionUnit,
          })
        })
        this.points = points
      })
    },
    mapReady({ BMap, map }) {
      // map.setMapType(BMAP_HYBRID_MAP); // 设置地图类型为卫星图
      // 其他地图配置
    },
    clickMap(e) {
      // this.center = {
      //   lng: e.point.lng,
      //   lat: e.point.lat
      // }
    },
    addressDirectory() {
      this.$refs.map.search(this.keyword)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .anchorBL {
  display: none;
}
</style>
