<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-20 09:20:39
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-04-07 10:25:15
 * @FilePath: /test-ranqi/src/views/Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ind3">
    <div id="gao-map-index"></div>
    <!-- <Left /> -->
    <!-- <Right /> -->
    <div  @click="$emit('imgClick', 'index')" class="backindex">返回首页概览</div>

    <Bottom @change="change"/>
  </div>
</template>

<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/mapClass/newMap";
import { deviceInfoList } from "@/api/baseinfo/deviceInfo";
import DeviceInfo from "./components/DeviceInfo";
import { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import {
  deviceType,
  deviceIcon,
  pipeColor,
} from "@/utils/mapClass/deviceIconTypeConfig";

export default {
  name: "",
  components: {
    Left,
    Right,
    Bottom,
    DeviceInfo
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // const path = eval(this.systemSetting.map_center);

      this.gaoMap = new EditorMap(
        "gao-map-index",
        {
          center: [118.071425,39.780639],
          // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
          mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
          zoom: 10.5,
          devicePicData: deviceIcon,
          pipeColor: pipeColor,
        },
        this
      );
      this.initMapDeviceInfo();
    },
    //设备上图
    initMapDeviceInfo() {
      //调压箱
      this.getDeviceInfo();
      //场站
      this.getStationInfo();
      //管道

    },
    //调压箱
    getDeviceInfo() {
      deviceInfoList().then((res) => {
        if (res.code && res.data) {
          console.log(res.data)
        res.data.forEach((item) => {
          item.iconType = item.deviceType;
        this.gaoMap.addDevice(item, DeviceInfo, false);
      });
      }
    });
    },
    //场站
    getStationInfo() {
      stationInfoList().then((res) => {
        if (res.code && res.data) {
        res.data.forEach((item) => {
          item.iconType = deviceType.station;
        this.gaoMap.addDevice(item, StationInfo, false);
      });
      }
    });
    },
    showMarker(val) {
      let markerList = this.gaoMap.allDevice[val];
      if (markerList) {
        markerList.forEach((marker) => {
          marker.show();
      });
      }
    },
    hideMarker(val) {
      let markerList = this.gaoMap.allDevice[val];
      if (markerList) {
        markerList.forEach((marker) => {
          marker.hide();
      });
      }
    },
    // sel1(index, item) {
    //   console.log(index, "=====fdsfdsf=====", item);
    //   const ind = this.selarr.indexOf(item.val);
    //   if (ind >= 0) {
    //     this.selarr.splice(ind, 1);
    //     this.hideMarker(item.val);
    //   } else {
    //     this.selarr.push(item.val);
    //     this.showMarker(item.val);
    //   }
    // },
    change(ind,val){
      if(ind>=0){
        this.hideMarker(val-2);
      }else {
        this.showMarker(val-2);
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.ind3 {
  height: 100vh;
  width: 100%;
  #gao-map-index {
    width: 100%;
    height: 100%;
  }
}
.backindex {
  width: 218px;
  height: 50px;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 58px;
  color: #fff;
  position: fixed;
  right: 548px;
  top: 144px;
  background: url("~@/assets/bigwindowImg/index/backIndex.png") no-repeat center center;
  line-height: 48px;
  z-index: 999;
  cursor: pointer;
}
</style>
