<template>
  <div class="gaode-wrapper">
    <div class="typelist-div flex">
      <div class="flex">
        <div
          class="list flex bb"
          v-for="(item, index) in arr"
          :key="index"
          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
          @click="sel1(index, item)"
        >
          <img :src="item.imgurl" />
          {{ item.name }}
        </div>
        <!-- 管线 -->
        <div
          class="list flex bb"
          key="line"
          :class="lineShow ? 'active' : ''"
          @click="showLine"
        >
          <img src="~@/assets/indexImg/line.png" />
          管线
        </div>
      </div>
    </div>
    <div id="gao-map-index" class="gao-map"></div>
    <LineTips :show="show" v-show="lineTipsShow"/>
  </div>
</template>

<script>
import { EditorMap } from "@/utils/mapClass/newMap";
import {
  deviceType,
  deviceIcon,
  pipeColor,
} from "@/utils/mapClass/deviceIconTypeConfig";
import { mapGetters } from "vuex";
import { deviceInfoList } from "@/api/baseinfo/deviceInfo";
import DeviceInfo from "./components/DeviceInfo";
import { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import StationInfo from "./components/StationInfo";
import { pipeInfoList } from "@/api/baseinfo/pipeInfo";
import PipeInfo from "./components/PipeInfo";
import axios from "axios";
import gcoord from "gcoord";
import LineTips from "./components/LineTips";
export default {
  name: "gao-map-index",
  props: {
    show: {
      type: Boolean,
    },
  },
  components:{
    LineTips
  },
  mounted() {
    this.initMap();
  },
  data() {
    return {
      gaoMap: null,
      arr: [
        {
          val: deviceType.regulatorBox,
          ischeck: false,
          imgurl: require("@/assets/indexImg/tyx.png"),
          name: "调压箱",
        },
        {
          val: deviceType.valve,
          ischeck: false,
          imgurl: require("@/assets/indexImg/fmj.png"),
          name: "阀门井",
        },
        {
          val: deviceType.station,
          ischeck: false,
          imgurl: require("@/assets/indexImg/cz.png"),
          name: "场 站",
        },
      ],
      selarr: [],
      lineStyle: {
        medium: "#FF0000",
        height1: "#00FF00",
        height2: "#FFFF00",

        newLine: "#00FFFF",
      },
      pipeLines: [],
      lineShow: false,
      lineTipsShow: false
    };
  },
  methods: {
    initMap() {
      const path = eval(this.systemSetting.map_center);

      this.gaoMap = new EditorMap(
        "gao-map-index",
        {
          center: [118.09,39.48],
          // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
          mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
          zoom: 10.5,
          devicePicData: deviceIcon,
          pipeColor: pipeColor,
        },
        this
      );
      this.initMapDeviceInfo();
    },
    //设备上图
    initMapDeviceInfo() {
      //调压箱
      this.getDeviceInfo();
      //场站
      this.getStationInfo();
      //管道
      //this.getPipeInfo();
      //this.getPipeByGeoJson();
      this.getPipeByWgsArr();
    },
    //调压箱
    getDeviceInfo() {
      deviceInfoList().then((res) => {
        if (res.code && 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);
          });
        }
      });
    },
    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);
      }
    },
    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();
        });
      }
    },
    //管道
    getPipeInfo() {
      pipeInfoList().then((res) => {
        if (res.code == 200 && res.data) {
          res.data.forEach((item) => {
            item.path = eval(item.coordinates);
            item.pipePressure = 2;
            item.strokeWeight = 4;
            this.gaoMap.addPipeLine(item, PipeInfo);
          });
        }
      });
    },
    getPipeByGeoJson() {
      axios.get("../geo_json/huanggezhuang.json").then((res) => {
        console.log("haha===========", res.data);
        this.gaoMap.map.plugin(["AMap.GeoJSON"], () => {
          const geojson = new AMap.GeoJSON({
            geoJSON: res.data,
            getPolyline: function (geojson, lnglats) {
              return new AMap.Polyline({
                path: lnglats,
                borderWeight: 4, // 线条宽度
                strokeColor: "blue", // 线条颜色
              });
            },
          });
          this.gaoMap.map.add(geojson);
        });
      });
    },
    getPipeByWgsArr() {
      this.getMediumLineInfo();
      this.getNewLineInfo();
      this.getHeight2Info();
      this.getHeight2Info2();
      this.getHeightGao();
    },
    //中压
    getMediumLineInfo() {
      axios.get("../geo_json/mediumLine.json").then((res) => {
        res.data.forEach((line) => {
          const linePath = [];
          line.forEach((ponit) => {
            let gaoPoint = gcoord.transform(
              ponit, // 经纬度坐标
              gcoord.WGS84, // 当前坐标系
              gcoord.AMap // 目标坐标系
              // gcoord.GCJ02,
              // gcoord.WGS84
            );
            linePath.push(gaoPoint);
          });
          this.pipeOnMap("medium", linePath);
        });
      });
    },
    //新管线
    getNewLineInfo() {
      axios.get("../geo_json/newLine.json").then((res) => {
        res.data.forEach((line) => {
          const linePath = [];
          line.forEach((ponit) => {
            let gaoPoint = gcoord.transform(
              ponit, // 经纬度坐标
              gcoord.WGS84, // 当前坐标系
              gcoord.AMap // 目标坐标系
              // gcoord.GCJ02,
              // gcoord.WGS84
            );
            linePath.push(gaoPoint);
          });
          this.pipeOnMap("height2", linePath);
        });
      });
    },
    //高压管线
    getHeight2Info() {
      axios.get("../geo_json/height2.json").then((res) => {
        res.data.forEach((line) => {
          const linePath = [];
          line.forEach((ponit) => {
            let gaoPoint = gcoord.transform(
              ponit, // 经纬度坐标
              gcoord.WGS84, // 当前坐标系
              gcoord.AMap // 目标坐标系
              // gcoord.GCJ02,
              // gcoord.WGS84
            );
            linePath.push(gaoPoint);
          });
          this.pipeOnMap("height2", linePath);
        });
      });
    },
    getHeight2Info2() {
      axios.get("../geo_json/height3.json").then((res) => {
        res.data.forEach((line) => {
          const linePath = [];
          line.forEach((ponit) => {
            let gaoPoint = gcoord.transform(
              ponit, // 经纬度坐标
              gcoord.AMap, // 当前坐标系
              gcoord.AMap // 目标坐标系
              // gcoord.GCJ02,
              // gcoord.WGS84
            );
            linePath.push(gaoPoint);
          });
          this.pipeOnMap("height1", linePath);
        });
      });
    },
    getHeightGao(){
      axios.get("../geo_json/heightGao.json").then((res) => {
          res.data.forEach((line) => {
             this.pipeOnMap("height2", line);
          });
      });
    },
    pipeOnMap(type, linePath) {
      //线上图
      const polyLine = new AMap.Polyline({
        path: linePath,
        strokeWeight: 4, // 线条宽度
        strokeColor: this.lineStyle[type], // 线条颜色
      });
      polyLine.hide();
      this.pipeLines.push(polyLine);
      this.gaoMap.map.add(polyLine);
    },
    showLine() {
      this.lineShow = this.lineShow ? false : true;
      this.pipeLines.forEach((pipe) => {
        if (this.lineShow) {
          pipe.show();
          this.lineTipsShow = true;
        } else {
          pipe.hide();
          this.lineTipsShow = false;
        }
      });
    },
  },
  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>

<style scoped lang="scss">
.gaode-wrapper {
  width: 100%;
  height: 100%;
}
.gao-map {
  width: 100%;
  // height: calc(100vh - 84px);
  height: 100%;
}

.typelist-div {
  // width: 500px;
  width: 100%;
  height: 50px;
  z-index: 9999;
  position: absolute;
  bottom: 20px;
  justify-content: center;
  // margin-left: calc((100% - 755px) / 2);
}
.list {
  width: 90px;
  height: 40px;
  margin-right: 15px;
  align-items: center;

  color: #fff;
  line-height: auto;
  text-align: center;
  font-size: 14px;
  padding: 1px 10px;
  cursor: pointer;
  border-radius: 3px;

  // background: rgba(0, 218, 240, 0.3);
  // border: 1px solid;
  border-image: linear-gradient(180deg, rgba(10, 243, 255, 0) 0%, #0af3ff 100%);
  box-shadow: inset 0px 0px 10px 0px rgba(10, 243, 255, 0.7);
  img {
    margin-right: 5px;
    margin-left: 2px;
  }
}

.list.active {
  background: rgba(0, 218, 240, 0.3);

  // border: 1px solid;
  border-image: linear-gradient(180deg, rgba(10, 243, 255, 0) 0%, #0af3ff 100%);

  box-shadow: inset 0px 0px 10px 0px rgba(10, 243, 255, 0.7);
}
.list img {
  width: 20px;
}
</style>
