<!--  -->
<template>
  <div class="inner">
    <div class="mapCover">
      <el-amap
        class="bm-view"
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :plugin="plugin"
        :events="mapEvents"
      >
        <el-amap-marker 
          v-for="(marker, index) in markers" 
          :key="index" 
          :position="marker.addr" 
          :events="markersStatus.events" 
          :visible="markersStatus.visible" 
          :draggable="markersStatus.draggable" 
          :icon="markersStatus.icon"
          :offset="markersStatus.iconOffset"
          :label="{content:marker.projectname,offset:[marker.projectname.length*-5/2,60]}"
          :vid="index">
        </el-amap-marker>
        <!-- <el-amap-text 
          v-for="(text,index) in markers" 
          :key="index+markers.length"
          :text="text.text" 
          :offset="text.offset" 
          :position="text.position" 
          :events="text.events">
        </el-amap-text> -->
      </el-amap>
    </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 VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    //这里存放数据
    return {
      amapManager,
      center: [65.212881,31.279042],
      zoom: 8,
      mapType: 1,
      plugin: [
        // {
        //   pName: "ToolBar",
        //   events: {
        //     init(instance) {
        //       console.log(instance);
        //     }
        //   }
        // },
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }
        // {
        //     pName: 'MapType',
        //     defaultType: 0,
        //     events: {
        //       init(instance) {
        //         console.log(instance);
        //       }
        //     }
        //   }
      ],
      xyzTileLayer: null,
      xyzTileLayer2: null,
      mapEvents: {
        init: o => {
          this.xyzTileLayer = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "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: 100
          });
          this.xyzTileLayer2 = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "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
          });
          o.add(this.xyzTileLayer);
          o.add(this.xyzTileLayer2);
        }
      },
      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) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      queryInfo:{
        equip_id:"",
        d_id:"",
        type:"",
        model:""
      },
      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.$router.push('page1')
            },
            dragend: (e) => {
              console.log('---event---: dragend')
              // this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            }
          },
          visible: true,
          draggable: false,
        },
        txtLabels:[],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeMapType(val){
      let o = amapManager.getMap();    
      if(val==0){
        this.xyzTileLayer.hide()
        this.xyzTileLayer2.hide()
      }else{
        this.xyzTileLayer.show()
        this.xyzTileLayer2.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() {
      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 == ""){
          this.markers = res.data.data.user_project;
          this.txtLabels = []
          res.data.data.user_project.forEach((item) => {
            this.txtLabels.push(new AMap.Text({
              position: item.addr
            }))
          });
          this.$nextTick(()=>{
            let o = amapManager.getMap();
            o.setFitView(this.txtLabels)
          })
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    equipMarkerClick(item) {
    
    },

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