<!--  -->
<template>
  <div class="inner">
    <div class="mapCover">
      <div id="map">地图</div>
    </div>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "../../components/home/coordtransform_utils";  //纠偏方法
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    //这里存放数据
    return {
      // center: [65.212881,31.279042],
      // zoom: 8,
      mapType: 1,
      tileLayer1: null,
      tileLayer2: null,
      equipListCurr:[],
      equipStyleObject:[
        {
          url: require("../../../static/images/projectIcon.png"), // 设别类型0
          size: new AMap.Size(70, 70), // 图标大小
          anchor: new AMap.Pixel(0,0) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          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) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      icon:{
        // 图标类型，现阶段只支持 image 类型
        type: 'image',
        // 图片 url
        image: require("../../../static/images/projectIcon.png"),
        // 图片尺寸
        size: [74, 66],
        // 图片相对 position 的锚点，默认为 bottom-center
        anchor: 'center',
      },
      // markers: [
      //   {
      //     addr: [121.5273285, 31.21515044],
      //     projectname: '南阳农田项目南阳农田项目',
      //     uid:1
      //   },
      // ],
      markersStatus:{
        iconOffset: [-70, -70],
        textOffset: [-35, 0],
        icon:require('../../../static/images/icon5.svg'),
        events: {
          click: (e) => {
            console.log(e.target.Ce.vid)
            console.log(this.markers[e.target.Ce.vid])
            // this.$store.state.user_id = this.markers[e.target.Ce.vid].uid
            this.$store.commit('setUserId',this.markers[e.target.Ce.vid].uid)
            this.$router.push('page1')
          },
          dragend: (e) => {
            console.log('---event---: dragend')
            // this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
          }
        },
        visible: true,
        draggable: false,
      },
      txtLabels:[],
      layer:null,
      markers:[],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始化地图
    infoMap(){
        this.map = new AMap.Map("map", {
            center: this.center,
            resizeEnable: true,
            zoom: 4,
            lang: "en",
        });
        AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.PolyEditor",
        ],
        () => {
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale());

          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()
      }
    },
 
    iconFormat(equip_ip, item) {
      switch (equip_ip + "") {
        case "2":
          item.icon = require("@/assets/images/home/mapView/scd.png");
          break;
        case "3":
          item.icon = require("@/assets/images/home/mapView/cbd.png");
          break;
        case "4":
          item.icon = require("@/assets/images/home/mapView/xyq.png");
          break;
        case "5":
          item.icon = require("@/assets/images/home/mapView/qxz.png");
          break;
        case "6":
          item.icon = require("@/assets/images/home/mapView/jk.png");
          break;
        case "7":
          item.icon = require("@/assets/images/home/mapView/bzy.png");
          break;
        case "9":
          item.icon = require("@/assets/images/home/mapView/tccb.png");
          break;
      }
    },
    getEquipList() {
      this.layer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          collision: false,
          allowCollision: false,
      });
      let uid = sessionStorage.getItem("myuid");
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.user_project_addr",
        data: this.qs.stringify({
          // uid:uid
        })
      }).then(res => {
        if (res.data.message == ""){
          var data = res.data.data.user_project;
          this.equipListCurr = data.map((item) => {
            if (item.gps == 1) {
              //GPS
              item.lnglat = wgs84togcj02(item.lng, item.lat);
            }
            item.position=[item.lnglat[0],item.lnglat[1]]
            item.text={
                content: item.projectname,
                direction: 'bottom',
                offset: [-20, -5],
                style: {
                  // 字体大小
                  fontSize: 16,
                  // 字体颜色
                  fillColor: '#ff0000',
                  // 描边颜色
                  strokeColor: '#ff0000',
                  // 描边宽度
                  strokeWidth: 1,
                }
            }
            item.extData={
              uid:item.uid
            }
            item.icon=this.icon
            return item;
              
          });

          this.equipListCurr.forEach((item)=>{
            var labelMarker = new AMap.LabelMarker(item);
            labelMarker.on("click", (e) => {
              this.equipMarkerClick(e.target.getExtData().uid);
            });
            this.markers.push(labelMarker);
          })

          // 将 marker 添加到图层
          this.layer.add(this.markers);
          this.map.add(this.layer);
          // this.massMarks.setMap(this.map);
          // this.massMarks.on("click", (e) => {
          //   this.equipMarkerClick(e.data);
          // });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipMarkerClick(uid) {
      this.$store.commit('setUserId',uid)
      this.$router.push('page1')
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.infoMap()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.inner{
    height: 100%;
    position: relative;
    .mapCover{
        height: 100%;
        #map{
            width: 100%;
            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/.el-radio__input.is-checked .el-radio__inner{
  border-color: #0195ff;
  background: #0195ff;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #0195ff;
}
</style>