<template>
  <div class="page">
    <!-- 搜索 -->
    <resource-search
      ref="search"
      mode="resource"
      @switchType="switchType"
      @searchCompany="onSearchCompany"
      @searchStation="onSearchStation"
      @searchEmployee="onSearchEmployee"
      @searchDevice="onSearchDevice"
      @searchRail="onSearchRail"
      @searchExam="onSearchExam"
      @clearMap="clearMap"
    ></resource-search>
    <!-- 工具 -->
    <map-toolbar
      :show-list="mapToolList"
      :disable-list="mapToolDisableList"
      @fence="setFence"
      @heatmap="setHeatmap"
      @clearMap="clearMap"
      @changeLayer="onChangeLayer"
    ></map-toolbar>
    <!-- 地图 -->
    <v-map
      class="map"
      ref="map"
      :view="view"
      :interactions="interactions"
      :controls="controls"
      @contextmenu.prevent
      @draw="onDraw"
    >
      <!-- 底图 -->
      <v-tile :tile-type="tileType" :z-index="0"></v-tile>
      <!-- 保安员 -->
      <!--      <v-vector
        ref="employeeLayer"
        layer-id="employeeLayer"
        :features="layers.employeeLayer.features"
        :cluster="layers.employeeLayer.cluster"
        :visible="!showHeatmap"
        :z-index="2"
        @singleclick="clickEmployee"
      ></v-vector>-->
      <v-super-cluster
        ref="employeeLayer"
        layer-id="employeeLayer"
        :features="layers.employeeLayer.features"
        :cluster="layers.employeeLayer.cluster"
        :visible="!showHeatmap"
        :z-index="2"
        @singleclick="clickEmployee"
      ></v-super-cluster>
      <!-- 热力图 -->
      <v-heatmap :features="layers.employeeLayer.features" :visible="showHeatmap" :z-index="2"></v-heatmap>
      <!-- 驻勤点 -->
      <v-super-cluster
        ref="stationLayer"
        layer-id="stationLayer"
        :features="layers.stationLayer.features"
        :cluster="layers.stationLayer.cluster"
        :z-index="2"
        @singleclick="clickStation"
      ></v-super-cluster>
      <!-- 驻勤点人员 -->
      <v-vector
        ref="stationEmployeesLayer"
        layer-id="stationEmployeesLayer"
        :features="layers.stationEmployeesLayer.features"
        :z-index="2"
        @singleclick="clickStationEmployees"
      ></v-vector>
      <!-- 内保单位驻勤点 -->
      <v-vector
        ref="companyStationsLayer"
        layer-id="companyStationsLayer"
        :features="layers.companyStationsLayer.features"
        :z-index="2"
        @singleclick="clickCompanyStations"
      ></v-vector>
      <!-- 企业 -->
      <v-vector
        ref="companyLayer"
        layer-id="companyLayer"
        :features="layers.companyLayer.features"
        :cluster="layers.companyLayer.cluster"
        :z-index="2"
        @singleclick="clickCompany"
      ></v-vector>
      <!-- 智能设备图层 -->
      <v-vector
        ref="deviceLayer"
        layer-id="deviceLayer"
        :feature-style="layers.deviceLayer.style"
        :features="layers.deviceLayer.features"
        :z-index="2"
      ></v-vector>
      <!-- 考场 -->
      <v-super-cluster
        ref="examLayer"
        layer-id="examLayer"
        :features="layers.examLayer.features"
        :cluster="layers.examLayer.cluster"
        :z-index="2"
        @singleclick="clickExam"
      ></v-super-cluster>
      <!-- 考试点 -->
      <v-vector
        ref="examSiteLayer"
        layer-id="examSiteLayer"
        :features="layers.examSiteLayer.features"
        :z-index="2"
        @singleclick="clickExamSite"
      ></v-vector>
      <!-- 电子围栏图层 -->
      <v-vector
        ref="railLayer"
        layer-id="railLayer"
        :feature-style="layers.railLayer.style"
        :features="layers.railLayer.features"
        :z-index="2"
        @singleclick="clickRail"
        @change="onRailLayerChange"
      ></v-vector>
      <!-- 绘制电子围栏 -->
      <v-draw
        ref="drawLayer"
        :type="drawType"
        :feature-style="layers.railLayer.style"
        :end-right="true"
        :clear="true"
        :z-index="3"
        draw-once
        editable
        @drawend="drawend"
      ></v-draw>
      <!-- 安保员弹框 -->
      <v-overlay
        :position="layers.employeeLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-employee-res']"
        positioning="bottom-center"
        :offset="layers.employeeLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeEmployeeInfo">×</a>
        <overlay-employee ref="employeeOverlay" :info="info"></overlay-employee>
      </v-overlay>
      <!-- 驻勤点弹框 -->
      <v-overlay
        :position="layers.stationLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-station']"
        positioning="bottom-center"
        :offset="layers.stationLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeStationInfo">×</a>
        <overlay-station :info="info" :return-win="returnWin"></overlay-station>
      </v-overlay>
      <!-- 驻勤点人员弹框 -->
      <v-overlay
        :position="layers.stationEmployeesLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-stationEmployees']"
        positioning="bottom-center"
        :offset="layers.stationEmployeesLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeStationEmployeesInfo">×</a>
        <overlay-stationEmployees :info="info" :return-win="returnWin"></overlay-stationEmployees>
      </v-overlay>
      <!-- 内保单位驻勤点弹框 -->
      <v-overlay
        :position="layers.companyStationsLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-companyStations']"
        positioning="bottom-center"
        :offset="layers.companyStationsLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeCompanyStationsInfo">×</a>
        <overlay-companyStations :info="info" :return-win="returnWin"></overlay-companyStations>
      </v-overlay>

      <!-- 企业详情弹框 -->
      <v-overlay
        :position="layers.companyLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-company']"
        positioning="bottom-center"
        :offset="layers.companyLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeCompanyInfo">×</a>
        <overlay-company :info="info" :return-win="returnWin"></overlay-company>
      </v-overlay>
      <!-- 智能设备详情弹框 -->
      <v-overlay
        :position="layers.deviceLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-device']"
        positioning="bottom-center"
        :offset="layers.deviceLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeDeviceInfo">×</a>
        <overlay-device :info="info" :return-win="returnWin"></overlay-device>
      </v-overlay>
      <!-- 电子围栏详情弹框 -->
      <v-overlay
        :position="layers.railLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-rail']"
        positioning="bottom-center"
        :offset="layers.railLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeRailInfo">×</a>
        <overlay-rail :info="info" :return-win="returnWin"></overlay-rail>
      </v-overlay>
      <!-- 考场弹框 -->
      <v-overlay
        :position="layers.examLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-exam']"
        positioning="bottom-center"
        :offset="layers.examLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeExamInfo">×</a>
        <overlay-exam :info="info" :return-win="returnWin"></overlay-exam>
      </v-overlay>
      <!-- 考试点弹框 -->
      <v-overlay
        :position="layers.examSiteLayer.overlay.position"
        :class-name="['info-window', 'info-window-common', 'info-window-examSite']"
        positioning="bottom-center"
        :offset="layers.examSiteLayer.overlay.offset"
      >
        <a class="close" @click.stop="closeExamSiteInfo">×</a>
        <overlay-exam :info="info" :return-win="returnWin"></overlay-exam>
      </v-overlay>
    </v-map>
    <!-- 电子围栏列表弹框 -->
    <electronic-fence-dialog
      ref="electronicFence"
      v-if="isElectronicFenceDialog"
      @cancel="electronicFenceCancel"
      @addElectronic="addElectronic"
      @electronicFenceEdit="electronicFenceEditFn"
      :info="info"
      @del="delElectronic"
    ></electronic-fence-dialog>
    <!-- 电子围栏增加修改弹框 -->
    <electronic-fence-edit-dialog
      ref="electronicFenceEdit"
      v-show="isElectronicFenceEditDialog"
      :info="info"
      :electronic-fence-info="electronicFenceInfo"
      @openPeopleNum="openPeopleNumFn"
      @relationStation="relationStationFn"
      @cancel="electronicFenceEditCancel"
      @cleanFigure="cleanDrawFigure"
      @draw="drawRail"
    >
    </electronic-fence-edit-dialog>
    <!-- 电子围栏驻勤点人员弹框 -->
    <electronic-fence-people
      v-if="isElectronicFencePeople"
      :list="electronicFencePeopleList"
      :station-name="peopleStationName"
      @cancel="electronicFencePeopleCancel"
    >
    </electronic-fence-people>
    <!-- 电子围栏关联驻勤点弹框 -->
    <electronic-fence-station-dialog
      ref="electronicFenceStation"
      v-show="isElectronicFenceStationDialog"
      :info="info"
      :electronic-fence-info="electronicFenceInfo"
      @relation="setRelatedStation"
      @cancel="electronicFenceStationCancel"
    >
    </electronic-fence-station-dialog>
  </div>
</template>

<script>
import { utils, VDraw, VHeatmap, VMap, VOverlay, VTile, VVector, VSuperCluster } from "v-ol-map";
import "v-ol-map/lib/v-ol-map.css";
import resourceSearch from "@/components/resourceSearch/index.vue";
import mapToolbar from "@/components/mapToolbar/index.vue";
import { getStationDetail, getStations } from "@/api/security-station-controller";
import { getCompanyDetail } from "@/api/company-controller";
import { getEmployeeDetail, getEmployees } from "@/api/employee-controller";
import { getExamSiteRoomDetail, getExamSiteDetail } from "@/api/exam-site-room-controller";
import OverlayEmployee from "@/components/mapOverlay/employee";
import OverlayStation from "@/components/mapOverlay/station";
import OverlayStationEmployees from "@/components/mapOverlay/stationEmployees";
import OverlayCompanyStations from "@/components/mapOverlay/companyStations";
import OverlayCompany from "@/components/mapOverlay/company";
import OverlayDevice from "@/components/mapOverlay/device";
import OverlayRail from "@/components/mapOverlay/rail";
import OverlayExam from "@/components/mapOverlay/exam";
import electronicFenceDialog from "./components/electronicFence.vue";
import electronicFenceEditDialog from "./components/electronicFenceEdit.vue";
import electronicFencePeople from "./components/electronicFencePeople.vue";
import electronicFenceStationDialog from "./components/electronicFenceStation.vue";
import { deleteRail, getRailDetail } from "@/api/security-station-rails-controller";
import { textSlice } from "@/api/common";
import { getIpLocation } from "@pikaz/location";
import { mapGetters } from "vuex";
// import _ from "lodash";
import { getCurrentUser } from "@/api/tenant-user-controller";
export default {
  name: "resources",
  components: {
    VMap,
    VTile,
    VVector,
    VOverlay,
    VDraw,
    VHeatmap,
    VSuperCluster,
    OverlayEmployee,
    OverlayStation,
    OverlayCompany,
    OverlayStationEmployees,
    OverlayCompanyStations,
    OverlayDevice,
    OverlayRail,
    OverlayExam,
    resourceSearch,
    mapToolbar,
    electronicFenceDialog,
    electronicFenceEditDialog,
    electronicFenceStationDialog,
    electronicFencePeople,
  },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      deskTypes: localStorage.getItem("platform") === "1" ? ["Normal"] : ["Proprietor"],
      isCompany: false,
      centerPoint: [],
      isElectronicFencePeople: false,
      electronicFencePeopleList: [],
      peopleStationName: "",
      isElectronicFenceEditDialog: false,
      isElectronicFenceStationDialog: false,
      isElectronicFenceDialog: false,
      delElectronicIndex: null,
      electronicFenceInfo: {},
      view: {
        city: "厦门",
        zoom: 12,
        maxZoom: 19,
      },
      tileType: "GD",
      interactions: {
        DragRotateAndZoom: true,
        doubleClickZoom: false,
      },
      controls: {
        zoom: true,
        zoomOptions: {
          className: "ol-zoom-custom",
        },
        // rotate: true,
        // rotateOptions: {
        //   className: "ol-rotate-custom",
        // },
      },
      type: 1,
      resTypeList: [
        { name: "企业", value: 0 },
        { name: "保安员", value: 1 },
        { name: "驻勤点", value: 2 },
        { name: "智能设备", value: 3 },
        { name: "电子围栏", value: 4 },
      ],
      // mapToolList: ["tile", "fence"],
      activeType: "",
      featuresStation: [],
      layers: {
        // 保安员
        employeeLayer: {
          features: [],
          cluster: {
            maxZoom: 18,
            radius: 150,
            style: {
              circle: {
                radius: 50,
                fill: {
                  color: "#0E71FF",
                },
              },
              text: {
                font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
                fill: {
                  color: "#FFFFFF",
                },
              },
            },
          },
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 驻勤点
        stationLayer: {
          features: [],
          cluster: {
            maxZoom: 18,
            radius: 150,
            style: {
              circle: {
                radius: 50,
                fill: {
                  color: "#0E71FF",
                },
              },
              text: {
                font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
                fill: {
                  color: "#FFFFFF",
                },
              },
            },
          },
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 驻勤点人员
        stationEmployeesLayer: {
          features: [],
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 内保单位驻勤点
        companyStationsLayer: {
          features: [],
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 企业
        companyLayer: {
          features: [],
          cluster: {
            distance: 110,
            style: {
              circle: {
                radius: 50,
                fill: {
                  color: "#0E71FF",
                },
              },
              text: {
                font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
                fill: {
                  color: "#FFFFFF",
                },
              },
            },
          },
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 电子围栏
        railLayer: {
          features: [],
          cluster: {
            distance: 110,
            style: {
              circle: {
                radius: 50,
                fill: {
                  color: "#0E71FF",
                },
              },
              text: {
                font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
                fill: {
                  color: "#FFFFFF",
                },
              },
            },
          },
          style: {
            fill: {
              color: "rgba(230,162,60,0.2)",
            },
            stroke: {
              color: "#E6A23C",
              width: 2,
            },
          },
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 智能设备
        deviceLayer: {
          features: [],
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 考场
        examLayer: {
          features: [],
          cluster: {
            maxZoom: 18,
            radius: 150,
            style: {
              circle: {
                radius: 50,
                fill: {
                  color: "#0E71FF",
                },
              },
              text: {
                font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
                fill: {
                  color: "#FFFFFF",
                },
              },
            },
          },
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
        // 考试点
        examSiteLayer: {
          features: [],
          overlay: {
            position: undefined,
            offset: [0, -36],
          },
        },
      },
      info: {},
      returnWin: {},
      drawType: "",
      // showHeatmap: false,
      mapToolList: ["tile", "resource", "fence"],
      mapToolDisableList: [],
      showRailInfoFromList: false,
      stationTypes: [],
    };
  },
  computed: {
    ...mapGetters(["showHeatmap"]),
    // mapToolDisableList() {
    //   if (this.activeType === "2") {
    //     return ["resource"];
    //   } else {
    //     return [];
    //   }
    // },
  },
  methods: {
    async init() {
      const userInfo = localStorage.getItem("userInfo");
      let userInfoJson;
      if (userInfo) {
        userInfoJson = JSON.parse(userInfo);
      } else {
        getCurrentUser().then(async (response) => {
          userInfoJson = JSON.stringify(response);
        });
      }
      if (userInfoJson) {
        if (userInfoJson.role === "Company" || userInfoJson.role === "Proprietor") {
          this.isCompany = true;
        }

        //如果是企业账户，不显示电子围栏图标
        if (!userInfoJson.superviseDesk) {
          //判断身份 ture:监管账户；false:企业账户
          this.mapToolList = ["tile", "resource"];
        }
        let orgLongitude = userInfoJson.orgLongitude;
        let orgLatitude = userInfoJson.orgLatitude;
        if (orgLongitude && orgLatitude) {
          //判断是否有经纬度
          this.centerPoint = [Number(orgLongitude), Number(orgLatitude)];
          this.$refs.map.panTo({
            center: this.centerPoint,
          });
        } else {
          const company = await getCompanyDetail(userInfoJson.organizationId);
          if (company) {
            if (company.longitude && company.latitude) {
              this.centerPoint = [company.longitude, company.latitude];
              this.$refs.map.panTo({
                center: this.centerPoint,
              });
            }
          }
        }
      }
    },
    onDraw(evt) {
      console.log("onDraw", evt);
    },
    hideFenceTable() {
      this.isElectronicFenceEditDialog = false;
      this.isElectronicFenceStationDialog = false;
      this.isElectronicFenceDialog = false;
    },
    /**
     * @搜索框保安员搜索结果回调
     * @param data
     */
    onSearchEmployee(data) {
      console.log("onSearchEmployee", data);
      // console.time("tiemopera")
      // let dataArr = [];
      // for(var i=0;i<6000;i++){
      //   dataArr = [...dataArr, ...data];
      // }
      // console.timeEnd("tiemopera")
      this.layers.employeeLayer.features = [];
      this.clearMap();
      this.hideFenceTable();
      let onDuty = 0; //在岗人数
      let noDuty = 0; //离岗人数
      let noActivation = 0; //未激活数

      if (data) {
        data.forEach((item) => {
          let feature;
          let employeeIcon = require("@/assets/images/mapSearch/在岗_保安员.png");
          if (item.dutyStatus === "None") {
            noActivation++;
          }
          if (item.dutyStatus === "SignOut") {
            noDuty++;
          }
          if (item.dutyStatus === "SignIn") {
            onDuty++; //在岗
            if (item.rts.includes("Security")) {
              employeeIcon = require("@/assets/images/mapSearch/在岗_保安员.png");
            } else if (item.rts.includes("Proprietor")) {
              employeeIcon = require("@/assets/images/mapSearch/保卫管理员.png");
            } else {
              employeeIcon = require("@/assets/images/mapSearch/社会力量.png");
            }
            feature = {
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: employeeIcon,
                  // scale: 0.5,
                },
              },
              props: item,
            };
          } else {
            feature = {
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: require("@/assets/images/mapSearch/离岗_保安员.png"),
                  // scale: 0.5,
                },
              },
              props: item,
            };
          }
          if (item.dutyStatus !== "None" && item.longitude && item.latitude) {
            this.layers.employeeLayer.features.push(feature);
          }
        });
      }
      this.setCenterAfterSearch();
      console.log(this.layers.employeeLayer.features);
      this.$refs.search.setEmployeeNum(onDuty, noDuty, noActivation);
    },
    /**
     * @安保员图层点击事件
     * @param evt
     * @param feature
     */
    clickEmployee(evt, feature) {
      if (feature) {
        console.log(feature);
        const isCluster = feature.get("cluster");
        // const employees = feature.get("features");
        if (!isCluster) {
          // const employee = employees[0];
          const info = feature.get("props");
          this.showEmployeeInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @安保员详情
     * @param info
     * @param infoType
     */
    showEmployeeInfo({ info, infoType }) {
      getEmployeeDetail(info.id)
        .then((res) => {
          res["nameSlice"] = res.name.slice(-2);
          res["companyNameSlice"] = textSlice(res.companyName); //多出部分省略号显示
          res["securityStationNameSlice"] = textSlice(res.securityStationName); //多出部分省略号显示
          console.log("employee", res);
          console.log("employee", info);
          this.info = { ...{}, ...res };
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();
            this.returnWin = { info, infoType };
            console.log(info);
            var iconUrl = "";
            if (info.dutyStatus === "SignIn") {
              if (info.resourceTypes.includes("Security")) {
                iconUrl = require("@/assets/images/mapSearch/在岗_保安员.png");
              } else if (info.resourceTypes.includes("Proprietor")) {
                iconUrl = require("@/assets/images/mapSearch/保卫管理员.png");
              } else {
                iconUrl = require("@/assets/images/mapSearch/社会力量.png");
              }
            } else {
              iconUrl = require("@/assets/images/mapSearch/离岗_保安员.png");
            }
            this.layers.employeeLayer.features = [
              {
                coordinates: [Number(info.longitude), Number(info.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: iconUrl,
                    // scale: 0.5,
                  },
                },
                props: info,
              },
            ];
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.employeeLayer.overlay.position = utils.convertCoordinate(
            [Number(res.longitude), Number(res.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.employeeLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @搜索框驻勤点搜索结果回调
     * @param data
     */
    onSearchStation(data) {
      console.log("onSearchStation", data);
      this.layers.stationLayer.features = [];
      this.clearMap();
      this.hideFenceTable();
      let noLonLat = 0; //无坐标数
      let stationIcon = "";

      if (data) {
        let stationTypes = data.stationTypes;
        data.forEach((item) => {
          if (item.longitude && item.latitude) {
            let scaleNum = 0.5;
            if (item.stationTypes && item.stationTypes.length > 0) {
              //如果有驻勤点类型
              const stationType = stationTypes.find((t) => t.code === item.stationTypes[0]);

              if (item.rts.includes("Security")) {
                //[Population,Security] 这种情况默认显示驻勤点
                if (stationType && stationType.mapIcon) {
                  stationIcon = stationType.mapIcon;
                } else {
                  stationIcon = require("@/assets/images/mapSearch/驻勤点.png");
                }
              } else {
                stationIcon = require("@/assets/images/mapSearch/社区警务.png");
                scaleNum = 1;
              }
            } else {
              //没有驻勤点类型，当成是社区警务
              stationIcon = require("@/assets/images/mapSearch/社区警务.png");
              scaleNum = 1;
            }
            this.layers.stationLayer.features.push({
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: stationIcon,
                  scale: scaleNum,
                },
              },
              props: item,
            });
          } else {
            noLonLat++;
          }
        });
        console.log(this.layers.stationLayer.features);
        this.$refs.search.setStationNum(data.length, noLonLat);
      }
      this.setCenterAfterSearch();
    },
    /**
     * @驻勤点图层点击事件
     * 1、先判断点击位置是否有驻勤点
     * 2、获取点属性id
     * 3、通过id查找驻勤点详情
     * 4、把详情放到info变量用来展现详情（showStationInfo）
     * 5、把经纬度赋值给position属性展示弹框
     * @param evt
     * @param feature
     */
    clickStation(evt, feature) {
      if (feature) {
        const isCluster = feature.get("cluster");
        if (!isCluster) {
          const info = feature.get("props");
          console.log("clickStationInfo", info);
          this.showStationInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @驻勤点详情
     * @param info
     * @param infoType
     */
    showStationInfo({ info, infoType }) {
      console.log("showStationInfo-" + infoType, info);
      console.log("showStationInfo-returnWin", this.returnWin);
      var stationId = info.id;
      if (info.securityStationId) {
        stationId = info.securityStationId;
      }
      getStationDetail(stationId)
        .then((res) => {
          console.log("station", res);
          res["superviseDepartNameSlice"] = textSlice(res.superviseDepartName); //多出部分省略号显示
          res["addressSlice"] = textSlice(res.address); //多出部分省略号显示
          this.info = { ...{}, ...res };
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();
            this.returnWin = { info, infoType };
            console.log("returnWin", this.returnWin);
            let stationIcon = "";
            //如果有驻勤点类型
            let scaleNum = 0.5;
            if (res.resourceTypes && res.resourceTypes.length > 0) {
              if (res.resourceTypes.includes("Security")) {
                //[Population,Security] 这种情况默认显示驻勤点
                if (res.stationTypes && res.stationTypes.length > 0) {
                  stationIcon = res.stationTypes[0].mapIcon;
                } else {
                  stationIcon = require("@/assets/images/mapSearch/驻勤点.png");
                  scaleNum = 1;
                }
              } else {
                stationIcon = require("@/assets/images/mapSearch/社区警务.png");
                scaleNum = 1;
              }
            } else {
              stationIcon = require("@/assets/images/mapSearch/社区警务.png");
              scaleNum = 1;
            }

            this.layers.stationLayer.features = [
              {
                coordinates: [Number(res.longitude), Number(res.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: stationIcon,
                    scale: scaleNum,
                  },
                },
                props: info,
              },
            ];
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.stationLayer.overlay.position = utils.convertCoordinate(
            [Number(res.longitude), Number(res.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.stationLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @驻勤点人员图层点击事件
     * @param evt
     * @param feature
     */
    clickStationEmployees(evt, feature) {
      if (feature) {
        console.log("clickStationEmployees-feature", feature);
        const stations = feature.get("features");
        if (stations && stations.length === 1) {
          const station = stations[0];
          const info = station.get("props");
          this.showStationEmployeesInfo({ info });
        } else {
          if (feature.get("props")) {
            const info = feature.get("props");
            this.showStationEmployeesInfo({ info });
          } else {
            // 如果是聚合点就下钻一级
            const zoom = this.$refs.map.map.getView().getZoom() + 1;
            const center = evt.coordinate;
            this.$refs.map.panTo({ zoom, center });
          }
        }
      }
    },
    /**
     * @内保单位驻勤点图层点击事件
     * @param evt
     * @param feature
     */
    clickCompanyStations(evt, feature) {
      if (feature) {
        console.log("clickCompanyStations-feature", feature);
        const companys = feature.get("features");
        if (companys && companys.length === 1) {
          const company = companys[0];
          const info = company.get("props");
          this.showCompanyStationsInfo({ info });
        } else {
          if (feature.get("props")) {
            const info = feature.get("props");
            this.showCompanyStationsInfo({ info });
          } else {
            // 如果是聚合点就下钻一级
            const zoom = this.$refs.map.map.getView().getZoom() + 1;
            const center = evt.coordinate;
            this.$refs.map.panTo({ zoom, center });
          }
        }
      }
    },
    /**
     * @驻勤点人员详情
     * @param info
     * @param infoType
     */
    showStationEmployeesInfo({ info, infoType, employeeInfo }) {
      console.log("showStationEmployeesInfo-" + infoType, info);
      console.log("===employeeInfo===", employeeInfo);
      let stationId = info.id;
      if (infoType === "rail") {
        stationId = info.stationId;
      }
      let params = {
        pageIndex: 1,
        pageSize: 5000,
        securityStationIds: [stationId + ""],
        searchModel: "SecurityStation",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      };
      if (infoType === "station" && info.resourceTypes.length === 1 && info.resourceTypes[0] === "Population") {
        //如果是社会力量，传一个resourceType = Population
        params = {
          pageIndex: 1,
          pageSize: 5000,
          securityStationIds: [stationId + ""],
          resourceType: "Population",
          searchModel: "SecurityStation",
          deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        };
      }
      getEmployees(params)
        .then((res) => {
          console.log("stationEmployees", res);
          console.log("station", info);
          const stationEmployees = [...res].sort(function (x, y) {
            // true values first
            return x.stationResponsible === y.stationResponsible ? 0 : x.stationResponsible ? -1 : 1;
          });

          info["stationEmployees"] = stationEmployees.map((x) => {
            return {
              ...x,
              isPhone: false,
              isIdCardNo: false,
            };
          });
          if (!info.employee && employeeInfo) {
            info["employee"] = employeeInfo;
          }
          this.info = { ...{}, ...info };
          console.log("info", this.info);
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();

            this.returnWin = { info, infoType };
            this.layers.stationEmployeesLayer.features = [
              {
                coordinates: [Number(info.longitude), Number(info.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: require("@/assets/images/mapSearch/在岗_保安员.png"),
                  },
                },
                props: info,
              },
            ];
            if (infoType === "rail") {
              info["name"] = info.stationName;
            }
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.stationEmployeesLayer.overlay.position = utils.convertCoordinate(
            [Number(info.longitude), Number(info.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.stationEmployeesLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @内保单位驻勤点详情
     * @param info
     * @param infoType
     */
    showCompanyStationsInfo({ info, infoType }) {
      console.log("showCompanyStationsInfo-" + infoType, info);
      let companyId = info.id;
      if (infoType === "station") {
        companyId = info.proprietorCompanyId;
        info["companyName"] = info.proprietorCompanyName;
      } else {
        info["companyName"] = info.name;
      }
      getStations({
        pageIndex: 1,
        pageSize: 1000,
        searchModel: "Organization",
        organizationId: companyId,
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      })
        .then((res) => {
          console.log("companyStations", res);
          console.log("company", info);

          info["companyStations"] = res.map((x) => {
            return {
              ...x,
              isPhone: false,
            };
          });
          this.info = { ...{}, ...info };
          console.log("info", this.info);
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();

            this.returnWin = { info, infoType };
            this.layers.companyStationsLayer.features = [
              {
                coordinates: [Number(info.longitude), Number(info.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: require("@/assets/images/mapSearch/内保单位公司.png"),
                  },
                },
                props: info,
              },
            ];
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.companyStationsLayer.overlay.position = utils.convertCoordinate(
            [Number(info.longitude), Number(info.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.companyStationsLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    switchType(type) {
      this.activeType = type;
      if (this.activeType !== "2") {
        this.mapToolDisableList = ["resource"];
      } else {
        this.mapToolDisableList = [];
      }
      console.log("mapToolDisableList", this.mapToolDisableList);
      this.hideFenceTable();
    },
    /**
     * @搜索框企业搜索结果回调
     * @param data
     */
    onSearchCompany(data, isProprietor) {
      console.log("onSearchCompany", data);
      this.layers.companyLayer.features = [];
      this.clearMap();
      this.hideFenceTable();
      let noLonLat = 0; //无坐标数
      if (data) {
        let companyIcon = require("@/assets/images/mapSearch/公司.png");
        if (isProprietor && isProprietor === "Proprietor") {
          companyIcon = require("@/assets/images/mapSearch/内保单位公司.png");
        }
        data.forEach((item) => {
          if (item.longitude && item.latitude) {
            this.layers.companyLayer.features.push({
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: companyIcon,
                },
              },
              props: item,
            });
          } else {
            noLonLat++;
          }
        });
        console.log(this.layers.companyLayer.features);
        this.$refs.search.setCompanyNum(data.length, noLonLat);
      }
      this.setCenterAfterSearch();
    },

    /**
     * @企业图层点击事件
     * @param evt
     * @param feature
     */
    clickCompany(evt, feature) {
      if (feature) {
        console.log(feature);
        const features = feature.get("features");
        if (features && features.length === 1) {
          const company = features[0];
          const info = company.get("props");
          console.log(info);
          this.showCompanyInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @企业详情
     * @param info
     * @param infoType
     */
    showCompanyInfo({ info, infoType, employeeInfo }) {
      console.log("showCompanyInfo-" + infoType, info);
      let companyId = info.id;
      if (infoType === "companyStations") {
        if (info.proprietorCompanyId) {
          companyId = info.proprietorCompanyId;
        } else {
          companyId = info.id;
        }
      } else if (infoType === "station" || infoType === "employee") {
        companyId = info.organizationId;
      }
      getCompanyDetail(companyId)
        .then((company) => {
          company["registerAddressSlice"] = textSlice(company.registerAddress);
          company["platform"] = this.platform;
          console.log("company", company);
          console.log("employeeInfo", employeeInfo);
          if (!info.employee && employeeInfo) {
            info["employee"] = employeeInfo;
          }
          this.info = { ...{}, ...company };
          let companyIcon = require("@/assets/images/mapSearch/公司.png");
          if (company.resourceTypes.includes("Proprietor")) {
            companyIcon = require("@/assets/images/mapSearch/内保单位公司.png");
          }
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();
            this.returnWin = { info, infoType };
            this.layers.companyLayer.features = [
              {
                coordinates: [Number(company.longitude), Number(company.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: companyIcon,
                  },
                },
                props: company,
              },
            ];
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.companyLayer.overlay.position = utils.convertCoordinate(
            [Number(company.longitude), Number(company.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.companyLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @搜索框智能设备搜索结果回调
     * @param data
     */
    onSearchDevice(data) {
      console.log("onSearchDevice", data);
      this.clearMap();
      this.hideFenceTable();
      this.layers.deviceLayer.features = data.map((feature) => {
        return {
          coordinates: [Number(feature.longitude), Number(feature.latitude)],
          convert: "gd-84",
          style: {
            icon: {
              src: require("@/assets/images/mapSearch/智能设备.png"),
            },
          },
          props: feature,
        };
      });
      console.log(this.layers.deviceLayer.features);
    },
    /**
     * @智能设备图层点击事件
     * @param evt
     * @param feature
     */
    clickDevice(evt, feature) {
      if (feature) {
        console.log(feature);
        const features = feature.get("features");
        if (features && features.length === 1) {
          const device = features[0];
          const info = device.get("props");
          console.log(info);
          this.showDeviceInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @智能设备详情
     * @param info
     * @param infoType
     */
    showDeviceInfo({ info, infoType }) {
      console.log(info, infoType);
    },
    /**
     * @搜索框电子围栏搜索结果回调
     * @param data
     */
    onSearchRail(data) {
      console.log("onSearchRail", data);
      this.clearMap();
      this.hideFenceTable();
      this.layers.railLayer.cluster = {
        distance: 110,
        style: {
          circle: {
            radius: 50,
            fill: {
              color: "#0E71FF",
            },
          },
          text: {
            font: "22px Source Han Sans CN-Medium, Source Han Sans CN",
            fill: {
              color: "#FFFFFF",
            },
          },
        },
      };
      this.layers.railLayer.features = data.map((feature) => {
        console.log("railFeature", feature);
        if (feature.shapeType === "Circle") {
          //圆形
        } else if (feature.shapeType === "Crib") {
          //方形
        }
        return {
          coordinates: [Number(feature.shapedLocation.geos[0].lon), Number(feature.shapedLocation.geos[0].lat)],
          convert: "gd-84",
          style: {
            icon: {
              src: require("@/assets/images/mapSearch/电子围栏map.png"),
            },
          },
          props: feature,
        };
      });
      console.log(this.layers.railLayer.features);
      this.setCenterAfterSearch();
    },
    /**
     * @电子围栏图层点击事件
     * @param evt
     * @param feature
     */
    clickRail(evt, feature) {
      if (feature) {
        console.log(feature);
        const rails = feature.get("features");
        if (rails && rails.length === 1) {
          this.showRailInfoFromList = false;
          const rail = rails[0];
          const info = rail.get("props");
          console.log("clickRailInfo", info);
          this.showRailInfo({ info });
        } else {
          if (feature.get("props")) {
            this.showRailInfoFromList = false;
            const info = feature.get("props");
            console.log("clickRailInfo", info);
            this.showRailInfo({ info });
          } else {
            // 如果是聚合点就下钻一级
            const zoom = this.$refs.map.map.getView().getZoom() + 1;
            const center = evt.coordinate;
            this.$refs.map.panTo({ zoom, center });
          }
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @电子围栏详情
     * @param info
     * @param infoType
     */
    showRailInfo({ info, infoType }) {
      // this.layers.railLayer.features = [];
      getRailDetail(info.id)
        .then((res) => {
          console.log("railres", res);
          console.log("railinfo", info);
          res["id"] = info.id; //后端传值有问题
          // res["name"] = info.name; //后端传值有问题
          res["shapedLocation"] = info.shapedLocation; //后端传值有问题
          res["companyNameSlice"] = textSlice(res.companyName); //多出部分省略号显示
          this.info = { ...{}, ...res };
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();
            this.returnWin = { info, infoType };
          }
          if (res.railShapeType === "Circle") {
            console.log("Circle", res.shapedLocation);
            const feature = {
              type: "circle",
              // center: [118.051876, 24.607453],
              // radius: 272,
              convert: "gd-84",
              center: [res.shapedLocation.geos[0].lon, res.shapedLocation.geos[0].lat],
              radius: res.shapedLocation.radius,
              props: info,
            };
            console.log(feature);
            this.layers.railLayer.cluster = false;
            this.layers.railLayer.features = [feature];
          } else if (res.railShapeType === "Crib" || res.railShapeType === "Polygon") {
            const coordinates = res.shapedLocation.geos.map((x) => {
              return [x.lon, x.lat];
            });
            this.layers.railLayer.cluster = false;
            this.layers.railLayer.features = [
              {
                type: "polygon",
                convert: "gd-84",
                coordinates,
                props: info,
              },
            ];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onRailLayerChange(features) {
      console.log(features);
      if (features && features.length === 1) {
        const feature = features[0];
        const type = feature.get("type");
        if (type && !this.showRailInfoFromList) {
          console.log(type);
          if (type === "polygon" || type === "Polygon") {
            const geometry = feature.get("geometry");
            // const view = this.$refs.map.map.getView();
            // view.fit(geometry, {
            //   duration: 1000,
            // });
            const result = this.$refs.map.calculateCenter(geometry);
            const { center } = result;
            // console.log(coordinates)
            /**
             * @弹框位置转高德转84
             */
            this.layers.railLayer.overlay.position = center;
          } else if (type === "circle" || type === "Circle") {
            const geometry = feature.get("geometry");
            // const view = this.$refs.map.map.getView();
            // view.fit(geometry, {
            //   duration: 1000,
            // });
            this.layers.railLayer.overlay.position = geometry.getCenter();
          }
        }
      }
    },

    /**
     * @搜索框考场搜索结果回调
     * @param data
     */
    onSearchExam(data) {
      console.log("onSearchExam", data);
      this.layers.examLayer.features = [];
      this.clearMap();
      this.hideFenceTable();
      let onExam = 0; //启用总数
      let noExam = 0; //禁用总数
      if (data) {
        data.forEach((item) => {
          let feature;

          if (item.status === true) {
            onExam++; //启用
            feature = {
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: require("@/assets/images/mapSearch/在岗_保安员.png"),
                  // scale: 0.5,
                },
              },
              props: item,
            };
          } else {
            noExam++;
            feature = {
              coordinates: [Number(item.longitude), Number(item.latitude)],
              convert: "gd-84",
              style: {
                icon: {
                  src: require("@/assets/images/mapSearch/离岗_保安员.png"),
                  // scale: 0.5,
                },
              },
              props: item,
            };
          }
          if (item.longitude && item.latitude) {
            this.layers.examLayer.features.push(feature);
          }
        });
      }
      this.setCenterAfterSearch();
      console.log(this.layers.examLayer.features);
      this.$refs.search.setExamNum(onExam, noExam);
    },
    /**
     * @考场图层点击事件
     * @param evt
     * @param feature
     */
    clickExam(evt, feature) {
      if (feature) {
        console.log(feature);
        const isCluster = feature.get("cluster");
        if (!isCluster) {
          const info = feature.get("props");
          this.showExamInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @考场详情
     * @param info
     * @param infoType
     */
    showExamInfo({ info, infoType }) {
      getExamSiteRoomDetail(info.id)
        .then((res) => {
          res["companyNameSlice"] = textSlice(res.companyName); //多出部分省略号显示
          console.log("exam", res);
          console.log("exam", info);
          this.info = { ...{}, ...res };
          if (infoType) {
            this.clearMap();
            this.hideFenceTable();
            this.returnWin = { info, infoType };
            console.log(info);
            var statusStr = "禁用";
            if (info.status === true) {
              statusStr = "启用";
            }
            this.layers.examLayer.features = [
              {
                coordinates: [Number(info.longitude), Number(info.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: require("@/assets/images/mapSearch/" + statusStr + "_保安员.png"),
                    // scale: 0.5,
                  },
                },
                props: info,
              },
            ];
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.examLayer.overlay.position = utils.convertCoordinate(
            [Number(res.longitude), Number(res.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.examLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /**
     * @考试点图层点击事件
     * @param evt
     * @param feature
     */
    clickExamSite(evt, feature) {
      if (feature) {
        console.log(feature);
        const features = feature.get("features");
        if (features && features.length === 1) {
          const examSite = features[0];
          const info = examSite.get("props");
          console.log(info);
          this.showExamSiteInfo({ info });
        } else {
          // 如果是聚合点就下钻一级
          const zoom = this.$refs.map.map.getView().getZoom() + 1;
          const center = evt.coordinate;
          this.$refs.map.panTo({ zoom, center });
        }
        this.$refs.search.hideFilter();
      }
    },
    /**
     * @考试点信息
     * @param info
     * @param infoType
     */
    showExamSiteInfo({ info, infoType }) {
      getExamSiteDetail({
        siteId: info.id,
      })
        .then((res) => {
          console.log("examSite", res);

          if (infoType) {
            this.clearMap();
            this.hideFenceTable();

            this.returnWin = { info, infoType };
            this.layers.stationEmployeesLayer.features = [
              {
                coordinates: [Number(info.longitude), Number(info.latitude)],
                convert: "gd-84",
                style: {
                  icon: {
                    src: require("@/assets/images/mapSearch/在岗_保安员.png"),
                  },
                },
                props: info,
              },
            ];
            if (infoType === "rail") {
              info["name"] = info.stationName;
            }
          }
          /**
           * @弹框位置转高德转84
           */
          this.layers.stationEmployeesLayer.overlay.position = utils.convertCoordinate(
            [Number(info.longitude), Number(info.latitude)],
            "gd-84"
          );
          this.$refs.map.panTo({
            // zoom: 13,
            // flyZoom: 8,
            center: this.layers.stationEmployeesLayer.overlay.position,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /**
     * @安保员弹框点击关闭
     */
    closeEmployeeInfo() {
      this.returnWin = {};
      this.layers.employeeLayer.overlay.position = undefined;
      this.$refs.employeeOverlay.resetVisible();
    },
    /**
     * @驻勤点弹框点击关闭
     */
    closeStationInfo() {
      this.returnWin = {};
      this.layers.stationLayer.overlay.position = undefined;
    },
    /**
     * @内保单位弹框点击关闭
     */
    closeCompanyStationsInfo() {
      this.returnWin = {};
      this.layers.companyStationsLayer.overlay.position = undefined;
    },
    /**
     * @驻勤点人数弹框点击关闭
     */
    closeStationEmployeesInfo() {
      this.returnWin = {};
      this.layers.stationEmployeesLayer.overlay.position = undefined;
    },
    /**
     * @企业弹框点击关闭
     */
    closeCompanyInfo() {
      this.returnWin = {};
      this.layers.companyLayer.overlay.position = undefined;
    },
    /**
     * @智能设备弹框点击关闭
     */
    closeDeviceInfo() {
      this.returnWin = {};
      this.layers.deviceLayer.overlay.position = undefined;
    },
    /**
     * @考场弹框点击关闭
     */
    closeExamInfo() {
      this.returnWin = {};
      this.layers.examLayer.overlay.position = undefined;
    },
    /**
     * @考试点弹框点击关闭
     */
    closeExamSiteInfo() {
      this.returnWin = {};
      this.layers.examSiteLayer.overlay.position = undefined;
    },
    /**
     * @电子围栏弹框点击关闭
     */
    closeRailInfo() {
      this.returnWin = {};
      this.layers.railLayer.overlay.position = undefined;
      // this.clearMap();
    },
    /**
     * @搜索后定位中心点
     */
    setCenterAfterSearch() {
      if (this.centerPoint && this.centerPoint.length != 0) {
        this.$refs.map.panTo({
          zoom: 9,
          center: this.centerPoint,
        });
      }
    },
    /**
     * @注册显示弹框类事件
     */
    eventBusBinding() {
      this.$bus.$on("click-employee", this.showEmployeeInfo); // 显示保安员弹框
      this.$bus.$on("click-company", this.showCompanyInfo); // 显示公司弹框
      this.$bus.$on("click-station", this.showStationInfo); // 显示驻勤点弹框
      this.$bus.$on("click-stationEmployees", this.showStationEmployeesInfo); // 显示驻勤点人员
      this.$bus.$on("click-companyStations", this.showCompanyStationsInfo); // 显示驻勤点
      this.$bus.$on("click-rail", this.showRailInfo); // 显示电子围栏
      this.$bus.$on("click-exam", this.showExamInfo); // 显示考场信息
      this.$bus.$on("click-examSite", this.showExamSiteInfo); // 显示考试点信息
    },
    /**
     * @清空地图
     */
    clearMap(exclude = []) {
      for (let layersKey in this.layers) {
        if (!exclude.includes(layersKey)) {
          this.layers[layersKey].features = [];
        }
      }
      this.$refs.map.closeOverlays();
    },
    onChangeLayer(type) {
      // console.log("onChangeLayer", type);
      if (type.indexOf("default") > -1) {
        this.tileType = "GD";
      } else {
        this.tileType = "GD_IMG";
      }
    },
    /**
     * @电子围栏列表
     */
    setFence() {
      this.isElectronicFenceDialog = true;
    },
    /**
     * @生成安保员热力图
     */
    setHeatmap() {
      this.$store.commit("TOGGLE_SHOW_HEATMAP");
      this.$refs.search.searchEmployee();
    },
    electronicFenceCancel() {
      this.isElectronicFenceDialog = false;
    },
    /**
     * @关闭驻勤点人员
     */
    electronicFencePeopleCancel() {
      this.isElectronicFencePeople = false;
    },
    /**
     * @关联驻勤点
     */
    relationStationFn(info) {
      this.isElectronicFenceStationDialog = true;
      this.info = { ...this.info, ...info };
    },
    electronicFenceStationCancel() {
      this.isElectronicFenceStationDialog = false;
      this.cleanDrawFigure();
    },
    async setRelatedStation(val) {
      this.isElectronicFenceStationDialog = false;
      console.log(val);
      this.$refs.electronicFenceEdit.updateStation(val);
      // 显示关联的驻勤点
      const situation = await getStationDetail(val.stationId);
      console.log("situation", situation);
      this.layers.stationLayer.features = [situation].map((feature) => {
        return {
          coordinates: [Number(feature.longitude), Number(feature.latitude)],
          convert: "gd-84",
          style: {
            icon: {
              src: feature.stationTypes[0].mapIcon,
              scale: 0.5,
            },
          },
          props: feature,
        };
      });
      this.$refs.map.panTo({
        // zoom: 13,
        // flyZoom: 8,
        center: [Number(situation.longitude), Number(situation.latitude)],
      });
    },
    /**
     * @新增电子围栏
     */
    addElectronic() {
      this.isElectronicFenceEditDialog = true;
      this.isElectronicFenceDialog = false;
      this.electronicFenceInfo = JSON.parse(JSON.stringify(this.info));
      this.electronicFenceInfo = {};
    },
    delElectronic(data) {
      console.log(data);
      let params = {
        id: data.data.id,
      };
      deleteRail(params)
        .then((res) => {
          console.log("deleteRail", res);
          this.$refs["electronicFence"].getRails();
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * @编辑某条电子围栏
     * @param data
     */
    async electronicFenceEditFn({ data }) {
      console.log("编辑某条电子围栏", data);
      this.showRailInfoFromList = true;
      // 显示关联的驻勤点
      const situation = await getStationDetail(data.stationId);
      console.log(situation);
      this.layers.stationLayer.features = [situation].map((feature) => {
        return {
          coordinates: [Number(feature.longitude), Number(feature.latitude)],
          convert: "gd-84",
          style: {
            icon: {
              src: feature.stationTypes[0].mapIcon,
              scale: 0.5,
            },
          },
          props: feature,
        };
      });
      // this.map.clearMap();
      this.isElectronicFenceDialog = false;
      this.electronicFenceInfo = JSON.parse(JSON.stringify(data));
      this.electronicFenceInfo.time = [this.electronicFenceInfo.beginTime, this.electronicFenceInfo.endTime];
      this.electronicFenceInfo.countOfSecurityMan = situation.countOfSecurityMan;
      const rail = await getRailDetail(data.id);
      this.info = { ...rail, ...this.electronicFenceInfo }; // 弹框信息
      console.log(this.info);
      this.isElectronicFenceEditDialog = true;
      // 显示可编辑围栏区域
      this.showMapEditor(data);
    },
    showMapEditor({ shapeType, shapedLocation }) {
      switch (shapeType) {
        case "Circle": // 圆
          this.showCircleEditor(shapedLocation);
          break;
        case "Polygon":
          this.showPolygonEditor(shapedLocation);
          break;
        case "Crib":
          this.showCribEditor(shapedLocation);
          break;
      }
    },
    showPolygonEditor({ geos }) {
      let list = geos.map((item) => [item.lon, item.lat]);
      console.log(list);
      this.layers.railLayer.features = [
        {
          type: "polygon",
          coordinates: list,
          style: this.layers.railLayer.style,
          convert: "gd-84",
        },
      ];
      this.$refs.map.flyTo({
        zoom: 13,
        flyZoom: 8,
        center: list[0],
      });
      console.log(this.layers.railLayer.features);
    },
    showCribEditor({ geos }) {
      let list = geos.map((item) => [item.lon, item.lat]);
      console.log(list);
      this.layers.railLayer.features = [
        {
          type: "polygon",
          coordinates: list,
          style: this.layers.railLayer.style,
          convert: "gd-84",
        },
      ];
      this.$refs.map.flyTo({
        zoom: 13,
        flyZoom: 8,
        center: list[0],
      });
      console.log(this.layers.railLayer.features);
    },
    showCircleEditor({ geos, radius }) {
      const [center] = geos.map((item) => [item.lon, item.lat]);
      console.log(center);
      this.layers.railLayer.features = [
        {
          type: "Circle",
          center,
          radius,
          style: this.layers.railLayer.style,
          convert: "gd-84",
        },
      ];
      this.$refs.map.flyTo({
        zoom: 13,
        // flyZoom: 8,
        center,
      });
    },
    electronicFenceEditCancel() {
      this.isElectronicFenceEditDialog = false;
      this.cleanDrawFigure();
    },
    openPeopleNumFn(id, stationName) {
      this.electronicFencePeopleList = [];
      this.isElectronicFencePeople = true;
      this.peopleStationName = stationName;
      getEmployees({
        pageIndex: 1,
        pageSize: 5000,
        securityStationIds: [id + ""],
        searchModel: "SecurityStation",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
      }).then((res) => {
        this.electronicFencePeopleList = res;
      });
    },
    cleanDrawFigure() {
      this.drawType = "";
    },
    drawRail(type) {
      console.log("drawRail", type);
      // this.layers.railLayer.features = []
      this.drawType = type;
    },
    drawend(evt, map) {
      const { feature } = evt;
      console.log(this.drawType);
      this.layers.railLayer.features = []; // 清空上一个电子围栏
      const geometry = feature.getGeometry();
      if (this.drawType === "Rectangle" || this.drawType === "Polygon") {
        const [coordinates] = geometry.getCoordinates();
        const convertCoordinates = coordinates.map((coordinate) => {
          return utils.convertCoordinate(coordinate, "84-gd");
        });
        console.log(coordinates);
        console.log(convertCoordinates);
        const params = {
          geos: convertCoordinates.map((item) => {
            return {
              lon: item[0],
              lat: item[1],
            };
          }),
        };
        console.log(params);
        this.$refs.electronicFenceEdit.updateGeometry(params);
      } else if (this.drawType === "Circle") {
        const center = geometry.getCenter();
        console.log(center);
        const geoRadius = geometry.getRadius(); // 半径
        const metersPerUnit = map.getView().getProjection().getMetersPerUnit(); // 半径以米为单位
        const radius = (geoRadius * metersPerUnit).toFixed(2);
        console.log(radius);
        const convertCoordinates = utils.convertCoordinate(center, "84-gd");
        const params = {
          geos: [
            {
              lon: convertCoordinates[0],
              lat: convertCoordinates[1],
            },
          ],
          radius,
        };
        console.log(params);
        this.$refs.electronicFenceEdit.updateGeometry(params);
      }
    },
  },
  mounted() {
    this.eventBusBinding();
    // ip定位
    getIpLocation()
      .then((res) => {
        console.log(res);
        const { city } = res;
        this.view.city = city;
      })
      .catch((err) => {
        console.log(err);
      });
    this.init();
  },
};
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  height: 100%;
  position: relative;
  .map {
    z-index: 1;
  }
  .map-search {
    z-index: 2;
  }
}
::v-deep .ol-zoom-custom {
  width: 45px;
  height: 90px;
  //box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2);
  //border-radius: 4px 4px 4px 4px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  //padding: 24px 0;
  bottom: 120px;
  left: 40px;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  //position: relative;
  button {
    margin: 0;
    width: 45px;
    height: 45px;
    //color: transparent;
    &.ol-zoom-custom-in {
      font-size: 30px;
    }
    &.ol-zoom-custom-out {
      font-size: 30px;
    }
    &:hover {
      outline: none;
    }
  }
  &:after {
    content: " ";
    width: 30px;
    height: 0;
    border: 1px solid #bdcfde;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
::v-deep .ol-rotate-custom {
  bottom: 20px;
  left: 10px;
  background: transparent;
  button {
    width: 92px;
    height: 92px;
    background: transparent;
    //background: url("~@/assets/images/mapToolbar/旋转视角.png") no-repeat;
    //background-size: 100% 100%;
    //user-select: none;
    span {
      width: 100%;
      height: 100%;
      background: url("~@/assets/images/mapToolbar/旋转视角.png") no-repeat;
      background-size: 100% 100%;
      user-select: none;
      color: transparent;
    }
    &:hover {
      outline: none;
    }
  }
}
</style>
