<template>
    <div style="width: 100%;height: 100%;position: relative">
      <div id="devicesMap">
         <div id="panel"></div>
      </div>
      <div class="mengbang"></div>
    </div>
</template>
<script>
  export default{
    data(){
      return{
        map:null,
        driving:null,
      }
    },
    created() {

    },
    props:{
      agencies:{
        type:Object
      },
      devicesData:{
        type:Array
      },
      detailData:{
        type:Object
      },
      mapStyle:{
        type:String,
        default:'amap://styles/blue'
      }
    },
    watch:{
      devicesData(){
        var _this = this;
        if(_this.devicesData.length<1){
          return
        }
        _this.devicesData.forEach((item,index)=>{
          let pos = item.latitudeLongitude.split(",")
          if(pos.length<2){
            return false
          }
          var iconUrl = item.iconUrl?item.iconUrl:require("../../../../public/img/grid/location.png")
            var icon = new AMap.Icon({
                size: new AMap.Size(20, 20),    // 图标尺寸
                image: iconUrl,  // Icon的图像
                // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(20, 20)   // 根据所设置的大小拉伸或压缩图片
            });
            let marker = new AMap.Marker({
                position: pos,
                icon: icon,
                offset: new AMap.Pixel(-13, -30)
            });
            // 设置鼠标划过点标记显示的文字提示
            // 设置label标签
            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            marker.setLabel({
                offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                // content: item.deviceName, //设置文本标注内容
                // content: item.deviceTypeName, //设置文本标注内容
                direction: 'top' //设置文本标注方位
            });
            marker.setMap(this.map);
            marker.on('click',(res)=>{
              let params = {
                title:'设备信息',
                type:'deviceInfo'
              }
              _this.$emit("onEmit",item,params)
             })
             marker.on('mousemove',(res)=>{
               marker.setLabel({
                   content: item.deviceName, //设置文本标注内容
               });
             })
             marker.on('mouseout',(res)=>{
               marker.setLabel({
                   content: "", //设置文本标注内容
               });
             })

        })
         var newCenter = this.map.setFitView();
         newCenter.getCenter();
      }
    },
    mounted() {
      var _this = this;
      let center  = _this.agencies?[_this.agencies.longitude,_this.agencies.latitude]:[116.397128,39.916527]
      this.map = new AMap.Map('devicesMap', {
         resizeEnable: true, //是否监控地图容器尺寸变化
         center: center,
         zoom:16,
         viewMode:'3D',
         showBuildingBlock:true,
         pitch:50,
         pitchEnable:true,
         mapStyle: _this.mapStyle,
         showIndoorMap:true,
       });
      if(_this.agencies){
        this.initPolygon(this.agencies.boundaryPath)
      }
    },
    methods:{
      initPolygon(path){
        if(path==""||path==null||path==undefined)return
        var _this = this;
        this.polyEditor = new AMap.PolygonEditor(this.map);
        this.setPolygon(JSON.parse(path))
        this.polyEditor.on('add', function (data) {
          var polygon = data.target;
          _this.polyEditor.addAdsorbPolygons(polygon);
          // polygon.on('click', (res) => {
          //   console.log(res)
          //   _this.polyEditor.setTarget(polygon);
          //   _this.polyEditor.open();
          // })
        })
      },
      setPolygon(data){
        if(data.length<1)return
        var _this = this
            let polygon = new AMap.Polygon({
              path: data,
              fillColor: '',
              strokeOpacity: 1,
              fillOpacity: 0.5,
              strokeColor: '#4cd5de',
              strokeWeight: 4,
              strokeStyle: 'solid',
              strokeDasharray: [5, 5],
            });
            polygon.on('mouseover', () => {
              polygon.setOptions({
                fillOpacity: 0.3,
                fillColor: '#4cd5de'
              })
            })
            polygon.on('mouseout', () => {
              polygon.setOptions({
                fillOpacity: 0.1,
                fillColor: '#4cd5de'
              })
            })
            polygon.on('click', () => {
              // this.polyEditor.open();
            })
            this.map.add(polygon);
            this.map.setFitView();
            _this.polyEditor.setTarget(polygon)
      },
      drawLine(){
         //构造路线导航类
           var _this = this;
           this.driving = new AMap.Driving({
              map: _this.map,
              panel: "panel"
            });
            var locat = this.detailData.latitudeLongitude.split(",")
            // 根据起终点经纬度规划驾车导航路线
            this.driving.search(new AMap.LngLat(106.27412171021103,38.459586232331596), new AMap.LngLat(locat[0],locat[1]), function(status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    // log.success('绘制驾车路线完成')
                } else {
                    // log.error('获取驾车数据失败：' + result)
                }
            });
      }
    }
}
</script>

<style lang="less">
      .mengbang{
        -webkit-pointer-events: none;
        -moz-pointer-events: none;
        -ms-pointer-events: none;
        -o-pointer-events: none;
        pointer-events: none;
        position: absolute;
        left: 0;
        top:0;
        right:0;
        bottom:0;
        background-image: linear-gradient(
                top,
                rgba(255, 255, 255, 0) 80%,
                rgba(0, 11, 44, 1) 100%
            ),linear-gradient(
                bottom,
                rgba(255, 255, 255, 0) 80%,
                rgba(0, 11, 44, 1) 100%
            ),linear-gradient(
                left,
                rgba(255, 255, 255, 0) 80%,
                rgba(0, 11, 44, 1) 100%
            ),linear-gradient(
                right,
                rgba(255, 255, 255, 0) 80%,
                rgba(0, 11, 44, 1) 100%
            );
      }
     #devicesMap {
       /*去除下标*/
       .amap-logo{
       display: none!important;
       }
       .amap-copyright{
       opacity:0;
       }
        width: 100%;
        height: 100%;
        background-color: transparent;
        border-radius: 5px;
        #panel {
                position: absolute;
                max-height: 40%;
                right: 0;
                top: 0;
                width: 200px;
                z-index: 999;
                .planTitle{
                  background-color: #000;
                  color: #BCBEC2;
                  p{
                    color: #BCBEC2;
                  }
                }
            }
            .amap-call{
              display: none;
            }
            #panel .amap-call {

            }
            #panel .amap-lib-driving {
              border-radius: 5px;
              overflow: hidden;
              background-color: #000;
              color: #BCBEC2;
              border: 1px solid #0086a9;
              .planTitle{
                border: 0;
              }
              .plan dt{
                border: 0;
                background-color: #000!important;
              }
              .plan dt:hover{
                background-color: #000;
                color: #2ec5aa;
              }
            }
      }
      .amap-icon img {
                  width: 30px;
                  height: 30px;
              }

              .amap-marker-label{
                  border: 0;
                  background-color: transparent;
              }

              .info{
                  position: relative;
                  top: 0;
                left:0;
                  right: 0;
                bottom:0;
                margin:0 auto;
                  min-width: 0;
                  background-color: transparent!important;
                  box-shadow: none!important;
              }
              .amap-marker-label{
                color: #00CCFF!important;
              }
</style>
