<template>
  <div class="container">
    <div id="container"></div>
    <div class="input-card">
<!--      <div >{{tips}}</div>-->
      <el-button @click="setFitView()">全局查看</el-button>
      <el-button @click="changeMapStyle()">切换地图</el-button>
    </div>
  </div>

</template>
<script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  import globalConfig from "@/utils/config/globalConfig";
  import {listDevice} from "@/api/system/device";
  import {listArea} from "@/api/system/area";


  export default {
    name: "map-view",
    data() {
      return {
        AMap: null,
        map: null,  // 地图实例
        markers: [],
        tips: null,
        // 运营区表格数据
        areaList: [],
        // 设备表格数据
        deviceList: [],
        type: null
      }
    },
    mounted() {
      this.initAMap();
    },
    unmounted() {
      this.map?.destroy();
    },
    methods: {
      changeMapStyle(){
        // 创建一个默认的图层组件
        let defaultLayer = new AMap.TileLayer();
        // 创建一个卫星图图层组件
        let satelliteLayer = new AMap.TileLayer.Satellite();
        let roadNetLayer = new AMap.TileLayer.RoadNet();
        // 将默认图层添加到地图中
        this.map.add(defaultLayer);
        // 获取当前地图显示的图层
        let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
        // 切换图层
        if(this.type=='default'){
          console.log(1111111)
          //获取地图图层数据
          this.map.setLayers([defaultLayer]); // 切换回默认图层
          this.type = 'Satellite';
        }else{
          console.log(222222)
          this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
          this.type = 'default';
        }
      },
      setFitView(){
        this.map.setFitView(null, false, [150, 60, 100, 60]);
      },
      initAMap() {
        AMapLoader.load({
          key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center: [120.356031,26.94088], //初始化地图中心点位置--大嵛山岛
          });
          //设备点标记
          this.deviceMarker();
          //运营区边界
          this.areaBoundary();
          setTimeout(() => {
            this.setFitView();
          }, 500);
        }).catch((e) => {
          console.log(e);
        });
      },
      deviceMarker(){
        listDevice().then(response => {
          this.deviceList = response.rows;
          this.deviceList.forEach(device => {
            this.addMarker(device.longitude,device.latitude,device.status,device.onlineStatus);
          });
        });
      },
      areaBoundary(){
        listArea().then(response => {
          this.areaList = response.rows;
          this.areaList.forEach(area => {
            this.addPolygon(JSON.parse(area.boundaryStr) || []);
          });
        });
      },
      addMarker(lng, lat, status, onlineStatus) {
        function formarStatus(status,onlineStatus) {
          if(onlineStatus == "0"){
            return globalConfig.icon.red;
          }else{
            if(status == "0"){
              return globalConfig.icon.gray;
            }else if(status == "1"){
              return globalConfig.icon.blue;
            }else if(status == "2"){
              return globalConfig.icon.yellow;
            }else if(status == "3"){
              return globalConfig.icon.yellow;
            }else if(status == "4"){
              return globalConfig.icon.light_blue;
            }else if(status == "8"){
              return globalConfig.icon.gray;
            }else if(status == "9"){
              return globalConfig.icon.gray;
            }
          }
        }

        let marker = new AMap.Marker({
          map: this.map,
          icon: formarStatus(status,onlineStatus),
          position: [lng, lat],
          // offset: new AMap.Pixel(-13, -30)
        });
      },

      //添加多边形
      addPolygon(data) {
        let polygon = new AMap.Polygon({
          path: data,
          fillColor: '#ccebc5',
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: '#2b8cbe',
          strokeWeight: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5],
        });
        polygon.on('mouseover', () => {
          polygon.setOptions({
            fillOpacity: 0.7,
            fillColor: '#7bccc4'
          })
        })
        polygon.on('mouseout', () => {
          polygon.setOptions({
            fillOpacity: 0.5,
            fillColor: '#ccebc5'

          })
        })
        this.map.add(polygon);
      }
    },
  };
</script>
<style lang="scss"  scoped>
  #container {
    width: 100%;
    height: 850px;
  }
  .container {
    position: relative;
    border: 1px solid rgb(204, 204, 204);

    .input-card {
      position: absolute;
      bottom: 15px;
      right: 15px;
    }
  }
</style>
