<!-- 水井信息 -->
<template>
  <div class="inner">
    <div class="mapCover">
      <div id="container">加载数据，请稍候...</div>
    </div>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图{{sidebarSJIndex}}</el-radio>
      </el-radio-group>
    </div>
    
    <sidebarSJ :sidebarSJIndex='sidebarSJIndex'></sidebarSJ>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import sidebarSJ from "@/components/highStand/sidebarSJ"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    sidebarSJ,
  },
  data() {
    //这里存放数据
    return {
      map: null,
      center: [116.3683244, 39.915085],
      zoom: 4.5,
      tileLayer1: null,
      tileLayer2: null,
      mapType:1,
      equipStyleObject:[
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      currentWindow: {
          position: [0, 0],
          content: '',
          events: {},
          visible: false,
      },
      queryInfo:{
        equip_id:"",
        d_id:"",
        type:"",
        model:""
      },
      markers: [
        {
          addr: [121.5273285, 31.21515044],
          projectname: '南阳农田项目南阳农田项目',
          uid:1
        },
      ],
      markers2: [
        {
          addr:[104.205946,30.254208],
          projectname:'24号井',
          icon:require('../../../static/images/icon7.svg'),
          events: {
            click: (e) => {
            console.log(this.markers2[0].addr);
              var lnglat = this.markers2[0].addr
              this.switchWindow(lnglat,0)
            },
            dragend: (e) => {
             
            }
          },
        }
      ],
      markersStatus:{
        iconOffset: [-70, -70],
        textOffset: [-35, 0],
        icon:require('../../../static/images/icon6.svg'),
        events: {
          click: (e) => {
            console.log(this.markers[e.target.Ce.vid].addr);
            
            var lnglat = this.markers[e.target.Ce.vid].addr
            this.switchWindow(lnglat,1)
          },
          dragend: (e) => {
            
          }
        },
        visible: true,
        draggable: false,
      },
      markerList:[],
      marker:null,
      txtLabels:[],
      windows: [
        {
          position: [104.205946,30.254208],
          content: '<div class="window0"><img src="../../../static/images/windows0.png"><div class="btn btn1"></div><div class="btn btn2"></div></div>',
          visible: false,
          events: {
            close() {
              console.log('close infowindow1');
            }
          }
        }
      ],
      infoWindow:null,
      sidebarSJIndex:0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      //创建地图
      var that = this;
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: that.center,
        zoom: that.zoom
      });
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.PolyEditor"
        ],
        () => {
          //   this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale({ position: "RB" }));

          this.geocoder = new AMap.Geocoder({
            city: "全国",
            radius: 1000
          });
        }
      );
      this.tileLayer1 = new AMap.TileLayer({
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 10
      }); //卫星图层
      this.tileLayer2 = new AMap.TileLayer({
        // 图块取图地址
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 101
      });
      this.map.add(this.tileLayer1);
      this.map.add(this.tileLayer2);
      this.getEquipList()
      
    },
    changeMapType(val){
      if(val==0){
        this.tileLayer1.hide()
        this.tileLayer2.hide()
      }else{
        this.tileLayer1.show()
        this.tileLayer2.show()
      }
    },

    getEquipList() {
      this.markers = [
        {
          addr: [93.659071,35.133279],
          projectname: '21号井',
        },
        {
          addr:[89.791884,41.734331],
          projectname: '22号井',
        },
        {
          addr:[112.028212,36.628648],
          projectname: '23号井',
        }
      ]

      this.map.remove(this.markerList);
      this.markerList = [];
      var icon = "../../../static/images/icon5.svg";
      this.markers.forEach((item) => {
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(item.addr[0], item.addr[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({            
              image: icon,
              size: new AMap.Size(33, 40),  //图标大小
              imageSize: new AMap.Size(33, 40)
          }),
          offset: new AMap.Pixel(-13, -30),
          title: item["projectname"]
        });
        this.markerList.push(this.marker);
        AMap.event.addListener(this.marker, "click", event => {
          this.switchWindow(item.addr,1);
        });
        AMap.event.addListener(this.map, "click", event => {
          if (this.infoWindow) {
            this.infoWindow.close();
          }
        });
      });
      
      this.$nextTick(() => {
        this.map.add(this.markerList);
        this.map.setFitView();
      });
    },
    equipMarkerClick(item) {
    
    },
    switchWindow(addr,flag) {
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗
         offset: new AMap.Pixel(130, -20)
      });
      this.infoWindow.setContent('<div class="window0"><img src="../../../static/images/windows1.png"><div class="btn btn1" @click="detial1"></div><div class="btn btn2" @click="detial2"></div></div>');
      this.infoWindow.open(this.map, addr);
    },
    detial1(){
      this.sidebarSJIndex = 0;
    },
    detial2(){

      this.sidebarSJIndex = 1;
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap()
    console.log(this.markers);
    
    this.currentWindow = this.windows[0];
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.inner{
    height: 100%;
    position: relative;
    .mapCover,#container{
        height: 100%;
    }
    .mapTypebox{
        position: absolute;
        right: 20px;
        top:30px;
        background: #fff;
        padding: 5px;
        border-radius: 5px;
    }
}
// 标注点提示文本
/deep/.amap-marker-label{
      background: transparent;
    border: none;
    color: red;
    font-size: 14px;
    font-weight: 700;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
}
/deep/.amap-marker-label.blueMarker{
    color: #ffa200;
}
/deep/.el-radio__input.is-checked .el-radio__inner{
  border-color: #0195ff;
  background: #0195ff;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #0195ff;
}

/deep/.window0{
  position: relative;
  .btn{
    position: absolute;
    width: 77px;
    height: 32px;
    cursor: pointer;
  }
  .btn1{
    bottom: 20px;
    left: 27px;
  }
  .btn2{
    left: 119px;
    bottom: 20px;
  }
}


</style>