<template>
  <div class="home">
    <div class="nav-bar">
      <van-nav-bar title="安全助手" left-text="返回" @click-left="onNavBack" left-arrow> </van-nav-bar>
    </div>
    <div class="map-con">
      <div class="top">
        <div class="notice-is-online" v-show="!!currentDevice.serialNo && currentDevice.deviceStatus.online == 0">
          <van-notice-bar
            text="智能定位卡当前未连接网络"
            left-icon="volume-o"
            mode="link"
            className="notice-bar"
            @click="onClickOnlineTips"
          >
          </van-notice-bar>
        </div>
        <div class="notice-is-online" v-show="false">
          <van-notice-bar text="设备当前位置只有基站信号，定位偏差会较大！" left-icon="volume-o" mode="link">
          </van-notice-bar>
        </div>
        <div style="position: relative; z-index: 11">
          <!-- <i :class="[{on: isClear},'news']" @click="newsClick" v-show="true"></i> -->
          <div
            :class="['imgArea', { cut: currentDevice.deviceStatus.online != 0 }]"
            @click="imgAreaClick"
            v-show="devicesList !== null && devicesList.length"
          >
            <img :src="currentDevice.imagePath" />
            <span
              style="font-weight: bolder"
              v-show="(currentDevice && currentDevice.nickName) || currentDevice.serialNo != ''"
              >{{
                currentDevice.nickName == null || currentDevice.nickName == ''
                  ? (currentDevice.serialNo || '').slice(-3)
                  : currentDevice.nickName
              }}</span
            >
            <span>切换</span>
          </div>
          <!-- 点击宝贝切换出现 -->
          <div :class="[{ active: conAreaShow }, 'conArea']" v-if="devicesList !== null">
            <div
              class="list"
              v-for="(item, index) in devicesList"
              :key="`list_index_${index}`"
              @click="imageListClick(item, index)"
            >
              <div
                :class="[
                  { active: item.deviceId == $store.getters.deviceId },
                  'imgA',
                  { online: item.deviceStatus.online && item.deviceStatus.online == 1 }
                ]"
              >
                <img :src="item.imagePath" />
              </div>
              <span :class="['Myname', { active: item.deviceId == $store.getters.deviceId }]">
                {{ item.nickName == null || item.nickName == '' ? item.serialNo.slice(-3) : item.nickName }}
              </span>
            </div>
          </div>
        </div>
        <!--<div class="noData"
                 v-show="devicesList.length == 0"
                 @click="$router.push({name: 'deviceBinding'})">请绑定设备
            </div>-->
        <!-- 右上角快捷方式 -->
        <!-- <transition name="fade"> -->
        <div class="shortcuts-container" v-show="isShowShortcuts">
          <div
            :class="['shortcuts', { hide: item.index === 0 }]"
            v-for="(item, index) in fastList"
            :key="index"
            @click="onGoRouter(item.index)"
          >
            <!--classs {on: isClear} -->
            <van-image :src="item.fastImgPath" :class="[item.className, 'news']" v-if="item.fastImgPath"></van-image>
            <div class="shortcuts-title">
              <p>{{ item.fastKey }}</p>
            </div>
          </div>
        </div>
        <!-- </transition> -->
        <!-- 右上角隐藏打开的快捷方式 -->
        <div class="shortcuts-hide" v-show="!isShowShortcuts" @click="isShowShortcuts = true">
          <p>展开</p>
          <i></i>
        </div>
      </div>
      <!-- lbs提示语 -->
      <div class="lbs_tips-container" v-show="isShowLbsTips">
        <div class="tips" v-show="isShowLbsTips">
          <img :src="lbsIcon" alt="" />
          <!-- <p>设备当前位置只有基站信号，定位偏差会较大</p> -->
          <p>当前位置采用基站定位方式，可以刷新定位</p>
        </div>
        <img class="close-icon" :src="closeIcon" alt="" @click="onColseLbsTips" />
      </div>
      <!-- 地图部分 -->
      <div id="index_map" class="index_map" style="width: 100%; height: 100vh"></div>
      <div class="bottom">
        <div class="conArea">
          <div class="con" v-show="currentDevice">
            <div class="title" v-show="currentDevice && currentDevice.address">{{ currentDevice.address }}(附近)</div>
            <div class="states">
              <span>
                <em
                  :class="{
                    red: currentDevice.deviceStatus.battery == 0,
                    warn: currentDevice.deviceStatus.battery <= 20
                  }"
                >
                  <i :style="{ width: currentDevice.deviceStatus.battery + '%' }"></i>
                </em>
                {{ currentDevice.deviceStatus.battery > 0 ? `${currentDevice.deviceStatus.battery}%` : '0%' }}
              </span>
              <span v-show="currentDevice && currentDevice.positionTime">{{
                this.timeToText(currentDevice.positionTime) || ''
              }}</span>
              <!--<span>{{ watch_time }}</span>-->
            </div>
            <div class="operate">
              <!-- <span class="phone">
                          <i></i>
                        </span> -->
              <span class="position" @click="getTrackingSendCommon">
                <i :class="isLocating ? 'on' : ''" v-if="!isLocating"></i>
                <!-- <em v-if="isLocating" class="interval-time">{{intervalTime}}</em> -->
                <em><van-loading v-if="isLocating" color="#fff" class="icon-loading" /></em>
              </span>
              <em>刷新定位</em>
            </div>
          </div>
          <!-- 左下角挂件 -->
          <!-- <div class="toggle">
                    <span @click="satelliteClick">
                     <i :class="{tole: satelliteFlag}"></i>
                    </span>
                    <van-icon v-show="isShow" name="phone-o" @click="phoneClick"/>
                </div> -->
        </div>
        <overlay-loading :showOverlay="showOverlay"></overlay-loading>
      </div>

      <div
        class="noData"
        v-show="devicesList !== null && devicesList.length == 0"
        @click="$router.push({ name: 'deviceBinding' })"
      >
        请点击，绑定设备
      </div>
      <van-dialog
        v-model="selectConfirm"
        :show-cancel-button="true"
        :close-on-click-overlay="true"
        overlay-class="mask_device"
        @confirm="phoneConfirm"
        @cancel="phoneCancel"
      >
        <div class="device_confirm">
          <div class="dialog-container phone">
            <!-- <div class="tit">聆听宝贝</div> -->
            <div class="tit">远程监听</div>
            <!-- <p>请确认号码已经添加到手表通讯录中</p> v-model.trim="longName" -->
            <input type="text" maxlength="11" v-model.trim="loginName" @blur="fixScroll" />
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
// MapLoader地图拼接地址
import MapLoader from '@/common/amap';
// NotifyService封装的提示方法
import NotifyService from '@/services/notify-service';
// DialogService封装的提示方法
import DialogService from '@/services/dialog-service';
import ToastService from '@/services/toast-service';
import overlayLoading from '@/components/overlay-loading/overlay-loading';
// Dialog Notify引入vant错误的提示
import { Notify } from 'vant';
import { DeviceCommandModel, LocationType } from '@/config/models';
// 引入 APIDevice
import APIDevice from '@/api/device';
import APIUser from '@/api/user';
import APICommand from '@/api/command';
import APIAlarm from '@/api/core';

export default {
  components: { overlayLoading },
  data() {
    return {
      showOverlay: true, // 遮罩层，需要等待数据加载完毕才hide
      map: null,
      satelliteLayer: null, // 卫星图AMap.TileLayer.Satellite
      //      circleMarker: null,
      defaultLngLat: [116.397477, 39.908692], // 天安门，没定位上来时默认
      mapCenter: [], //中心
      mapLocattion: [], //我的位置
      markers: null,
      allMarkers: null,
      mapZoom: 12, //zoom的值
      conAreaShow: false,
      satelliteFlag: false, //卫星图切换
      theFirstHeadImg: '', //:src="devicesList[0].imagePath"
      theFirstHeadName: '',
      devicesList: null, //设备列表
      phone: '', //当前设备的手机号码
      selectConfirm: false, //电话弹出窗口
      imageListActive: -1,
      isLocating: false, //是否转圈圈
      isTimerExist: false, // 定位时定时器是否还存在
      neighborhood: '', //
      address: '', //地址
      batteryStatus: 100, //电量
      pastTime: '', //多少时间前
      loactionPosition: null,
      listenPhone: '',
      serialNo: '',
      longName: '',
      loginName: '', //用户登录信息
      isClear: false, //是否有新的报警消息
      isNews: false,
      isNewRequest: false, // 是否有新的绑定申请（控制 "我的" 的红点）
      //                oldMarkers: [], // 为了不让画面跳动，接口刷新时用newMarkers添加到地图以后再删除oldMarkers
      newMarkers: [],
      timerInterval: null, // 全局定时器：每n秒拉取一次接口 更新 devicesList
      isOnline: true,
      watch_time: '',
      currentDevice: {
        // 当前设备对象，用于存储接口返回的list的当前对象
        deviceId: '',
        deviceName: '',
        phoneNumber: '',
        personName: '',
        binType: '',
        nickName: '',
        imagePath: '',
        serialNo: '',
        positionTime: '',
        deviceVersion: '',
        locationType: '',
        lat: '',
        lng: '',
        deviceStatus: {
          battery: '',
          online: '',
          step: ''
        },
        address: '',
        radius: 0
      },
      radius: 15,
      circle: null,
      intervalTime: 90,
      intervalTimer: null,
      locationTypes: LocationType,
      isShow: false,
      fastList: [
        {
          index: 5,
          fastKey: '地图',
          fastImgPath: require('../../assets/myself/home/layer.png'),
          className: 'layer'
        },
        {
          index: 2,
          fastKey: '轨迹',
          fastImgPath: require('../../assets/myself/home/trajectory.png'),
          className: 'trajectory'
        },
        {
          index: 1,
          fastKey: '告警',
          fastImgPath: require('../../assets/myself/home/warning.png'),
          className: 'warning'
        },
        {
          index: 6,
          fastKey: '留言',
          fastImgPath: require('../../assets/myself/home/message.png'),
          className: 'message'
        },
        /* {
          index: 7,
          fastKey: '拨打',
          fastImgPath: require('../../assets/myself/home/phone.png'),
          className: 'phone'
        }, */
        {
          index: 0,
          fastKey: '隐藏',
          fastImgPath: require('../../assets/myself/home/spread_right.png'),
          className: 'spread_right'
        }
      ], //快捷键
      isOpenInfoShow: false, //信息窗体是否关闭状态
      infoWindow: null, //初始化信息窗体
      whiteLiveDevices: [{ imei: '863776050140764', iccid: '8986092176002844631' }], //直播基地未支付设备白名单
      websocket: null, //存储websocket
      wsUrl:
        process.env.NODE_ENV === 'production'
          ? 'ws://ai.ssjlai.com/webapi/api/WebSocket/Acceptor'
          : 'ws://id.ssjlai.com/webapi/api/WebSocket/Acceptor' /* 'ws://id.ssjlai.com/realtime_pos/api/WebSocket/Acceptor' */, //websocket连接url
      spMarker: '', //扩散动画的marker
      deviceSportsStatus: null, //设备运动状态
      isCloseSportStatus: null, //是否可以关闭设备运动状态, 跑步中/静止中
      lbsIcon: require('../../assets/myself/home/lbs_icon.png'),
      closeIcon: require('../../assets/myself/home/md-highlight_off.svg'),
      isShowLbsTips: false,
      isShowShortcuts: true //是否显示快捷方式
    };
  },
  computed: {
    // 首页访问次数，当from路由为空时。次数设置未0，即认为用户是首次进入，否则表示已经进入
    indexVisitCounts() {
      return this.$store.getters.fromRuoter !== null ? 2 : 0;
    },
    isBinding() {
      return this.$route.query.isBinding;
    }
  },
  watch: {
    currentDevice: {
      handler: function () {
        if (this.map && this.currentDevice) {
          try {
            this.isOnline = !!this.currentDevice.deviceStatus.online;
            this.watch_time = this.currentDevice.positionTime;
            this.lbs = this.currentDevice.locationType;
            this.isShowLbsTips = this.currentDevice.locationType === this.locationTypes.LBS;
          } catch (e) {
            console.log(e);
          }
        }
      },
      deep: true
    }
  },
  methods: {
    onNavBack() {
      this.$router.push({
        name: 'Myself'
      });
    },
    onClickOnlineTips() {
      DialogService.confirm({
        title: '智能定位卡设备网络环境差',
        message:
          '智能定位卡设备可能关机、欠费或者处于弱信号环境，打电话联系试试吧。（若频繁出现“无网络”，建议咨询电话卡运营商）'
      });
    },
    // 将接口的数据组装成页面显示的数据
    assembelList(deviceList) {
      if (deviceList.length > 0) {
        return deviceList.map(device => {
          device.positionTime = device.positionTime
            ? /* that.$own.getDateDiff(that.$own.formatTime(device.positionTime)) */ device.positionTime
            : '';
          return device;
        });
      }
      return deviceList;
    },
    // 更新当前设备对象
    updateCurrentDevice(deviceList, currentDevice) {
      //                let deviceId = this.$store.getters.deviceId;
      let serialNo = this.$store.getters.serialNo;
      let bindSerialNo = this.$store.getters.bindSerialNo;
      if (deviceList.length > 0) {
        //                    const d = this.devicesList.find(device => deviceId == device.deviceId);
        const d = this.devicesList.find(device => serialNo == device.serialNo);
        const bind = this.devicesList.find(device => bindSerialNo == device.serialNo);
        if (this.isBinding ? bindSerialNo : serialNo) {
          if (this.$own.isNull(this.isBinding ? bind : d)) {
            Object.assign(this.currentDevice, this.devicesList[0]);
          }
          //                            Object.assign(this.currentDevice, this.devicesList.find(device => deviceId == device.deviceId));
          else
            Object.assign(
              this.currentDevice,
              this.isBinding ? bind : d /* this.devicesList.find(device => serialNo == device.serialNo */
            );
        } else {
          Object.assign(this.currentDevice, this.devicesList[0]);
        }
      } else {
        Object.assign(this.currentDevice, currentDevice);
      }
      this.updateStore();
      //this.initSignalr();
    },
    updateStore() {
      this.$store.commit('deviceId', this.currentDevice.deviceId);
      this.$store.commit('serialNo', this.currentDevice.serialNo);
      this.$store.commit('roleUser', this.currentDevice.roleUser);
      this.$store.commit('deviceType', this.currentDevice.deviceType);
    },
    createCircle() {
      if (this.$own.isNotNull(this.currentDevice.radius)) {
        let center = [this.currentDevice.lng, this.currentDevice.lat];
        this.isShowLbsTips = this.currentDevice.locationType === this.locationTypes.LBS;
        if (center.indexOf(0) >= 0) {
          console.log('this.currentDevice 经纬度为0:::');
          return;
        }
        if (this.$own.isNotNull(this.circle)) {
          this.map.remove(this.circle);
        }
        // eslint-disable-next-line
        this.circle = new AMap.Circle({
          center,
          radius: this.currentDevice.radius || this.radius, //半径
          borderWeight: 3,
          strokeColor: '#38a2fa',
          strokeWeight: 4,
          strokeOpacity: 0.5,
          fillOpacity: 0.2,
          fillColor: '#2599ff',
          zIndex: 101
        });
        this.circle.setMap(this.map);
      }
    },
    // 使用设备列表来生成marker
    createMarkers(sportStatus) {
      let that = this;
      let offset;
      try {
        // eslint-disable-next-line no-undef
        offset = new AMap.Pixel(-20, -90);
        //                    offset = new AMap.Pixel(-58, -152);
      } catch (e) {
        console.log('error::::', e);
      }
      this.devicesList.forEach(device => {
        if (this.$own.isNull(device)) {
          return;
        }
        let lngLat =
          this.$own.isNull(device.lng) || this.$own.isNull(device.lat) || device.lng === 0 || device.lat === 0
            ? this.defaultLngLat
            : [device.lng, device.lat];
        let markerContent =
          this.currentDevice.locationType === this.locationTypes.LBS
            ? `<div class="device_sports_status ${
                this.deviceSportsStatus ? 'show' : 'hidden'
              }" id="device_sports_status"><div class="nick_name"><span>${
                device.nickName ? device.nickName : device.serialNo.slice(-3)
              }</span></div><span>${sportStatus}</span></div>
                        <div class="circel ${device.locationType == 2 ? 'isLbs' : 'notLbs'}"></div></div>`
            : `<div class="device_sports_status ${
                this.deviceSportsStatus ? 'show' : 'hidden'
              }" id="device_sports_status"><div class="nick_name"><span>${
                device.nickName ? device.nickName : device.serialNo.slice(-3)
              }</span></div><span>${sportStatus}</span></div>
                        <div class="img ${
                          device.deviceStatus.online == 0 || !device.deviceStatus.online ? 'unline' : 'online'
                        }"><div class="image_area"><img src="${device.imagePath}" /><i></i></div><div class="circel ${
                device.locationType == 2 ? 'isLbs' : 'notLbs'
              }"></div></div>`;
        // eslint-disable-next-line no-undef
        let marker = new AMap.Marker({
          // 2022.11.29 新需求，增加一个设备实时定位运动状态提示，运动中/静止
          //                        position: this.$own.isNull(device.lng) || this.$own.isNull(device.lat) || device.lng === 0 || device.lat === 0 ? this.defaultLngLat : [device.lng, device.lat],
          position: lngLat,
          /*  content: `<div class="device_sports_status ${this.deviceSportsStatus ? "show" : "hidden"}" id="device_sports_status"><div class="nick_name"><span>${device.nickName ? device.nickName : device.serialNo.slice(-3)}</span></div><span>${sportStatus}</span></div>
                        <div class="img ${
                            device.deviceStatus.online == 0 || !device.deviceStatus.online
                                ? "unline"
                                : "online"
                            }"><div class="image_area"><img src="${
                            device.imagePath
                            }" /><i></i></div><div class="circel ${device.locationType == 2 ? "isLbs" : "notLbs"}"></div></div>`, */
          //                        offset: new AMap.Pixel(-46, -134),
          content: markerContent,
          offset: offset,
          name: device.name,
          deviceId: device.deviceId,
          phoneNumber: device.phoneNumber,
          serialNo: device.serialNo,
          nickName: device.nickName,
          batteryStatus: device.deviceStatus.battery,
          positionTime: device.positionTime,
          imagePath: device.imagePath,
          isOnline: device.deviceStatus.online,
          lngLat: [device.lng, device.lat]
        });
        // 覆盖物点击事件
        if (this.currentDevice.locationType === this.locationTypes.LBS) {
          // 如果是lbs,则给circle添加点击事件
          this.circle.on('click', e => {
            // 2022.11.17 取消打开定位窗口前更新当前设备信息
            that.map.setZoomAndCenter(17, e.target.w.lngLat);
            //  2023.06.20 取消打开定位窗口前更新当前设备信息
            //this.getDeviceData();
            this.showInfoOpen();
            this.openInfo(); //打开信息窗口
          });
        } else {
          // 否则给marker添加点击事件
          marker.on('click', e => {
            // 2022.11.17 取消打开定位窗口前更新当前设备信息
            //that.updateCurrentDevice([], tempDevice);
            that.map.setZoomAndCenter(17, e.target.w.lngLat);
            //  2023.06.20 取消打开定位窗口前更新当前设备信息
            //this.getDeviceData();
            this.showInfoOpen();
            this.openInfo(); //打开信息窗口
          });
        }
        that.newMarkers.push(marker);
        // start
        if (that.newMarkers.length > that.devicesList.length) {
          // 防止一直创建多余的marker, 截取最新的数据
          that.newMarkers = that.newMarkers.slice(that.newMarkers[1].index - 1, that.newMarkers.length + 1);
        }
        // end
        if (device.serialNo == this.$store.getters.serialNo) {
          // 暂存定位
          /* tempCurrentMarkerPosition = [device.lng, device.lat]; */
        }
      });
      this.map.add(this.newMarkers);
      this.onChangeMarker();
      /*  this.isCloseSportStatus = false; */
      //                this.map.setZoomAndCenter(17, tempCurrentMarkerPosition);
    },
    // 全部marker hide，当前marker show
    onChangeMarker() {
      let that = this;
      if (this.newMarkers.length > 0) {
        this.newMarkers.forEach(marker => {
          marker.hide();
          //                        const markerLngLat = [ marker.getPosition().lng, marker.getPosition().lat ];
          const markerLngLat = marker.getPosition();
          if (marker.w.serialNo == that.$store.getters.serialNo) {
            if (marker.w.lngLat[0] === 0 && marker.w.lngLat[1] === 0) {
              that.map.setZoomAndCenter(17, this.defaultLngLat);
              NotifyService.notify({
                message: '您的设备当前位置有误，请检查设备网络',
                type: 'warning'
              });
            } else {
              marker.show();
              //                                that.map.setZoomAndCenter(17, marker.w.lngLat);
              that.map.setZoomAndCenter(17, markerLngLat);
              /* if(markerLngLat) {
                                    this.circle.setCenter(markerLngLat);
                                } */
              let radius = this.currentDevice.radius > 200 ? 280 : this.currentDevice.radius;
              this.circle.setRadius(radius); //切换设备时重新创建圆圈
              /* 如果信息窗口是打开状态的话重新打开一次更新状态 */
              if (this.isOpenInfoShow === true) {
                this.openInfo();
              } /* else if(that.deviceSportsStatus && this.isCloseSportStatus) {
                                    this.getDeviceData();
                                    this.showInfoOpen(false);
                                } */
            }
          }
        });
      }
    },
    getAmap() {
      let that = this;
      MapLoader().then(
        AMap => {
          //地图实例
          that.map = new AMap.Map('index_map', {
            center: that.defaultLngLat,
            resizeEnable: true,
            zoom: that.mapZoom
          });

          that.map.on('click', () => {
            that.conAreaShow = false;
          });

          //定义卫星图
          that.satelliteLayer = new AMap.TileLayer.Satellite();

          this.createCircle();
          this.createMarkers();
        },
        () => {
          console.log('加载地图失败');
        }
      );
    },
    // TODO 该接口参数已经是设备id，获取数据后循环判断设备列表与当前缓存的设备id是否一致，一致则store起来，
    // TODO 但为什么还要做：假如不存在当前设备id，就store起来第一个设备id呢？因为用户退出登录别人账号的情况？
    //获取设备列表
    getDeviceData(deviceId) {
      /* let url = `/api/Location/DeviceList`;
                let jsonData = {
                    userId: this.$store.getters.userId,
                    mapType: "gaode",
                    timeOffset: -new Date().getTimezoneOffset() / 60
                }; */
      let that = this;
      /* this.$axios
                    .post(url, jsonData) */
      APIDevice.deviceList({
        userId: this.$store.getters.userId,
        mapType: 'gaode',
        timeOffset: -new Date().getTimezoneOffset() / 60,
        deviceId: deviceId ? deviceId : this.$store.getters.deviceId || ''
      })
        .then(res => {
          let data = res.data;
          let bindSerialNo = this.$store.getters.bindSerialNo;
          if (data.stateCode === 1 && this.$own.isNotNull(data.devicesList)) {
            that.isClear = data.isClear;
            that.isNewRequest = data.isNewRequest;
            that.longName = data.longName;
            if (data.devicesList != null && data.devicesList.length > 0) {
              that.devicesList = that.assembelList(data.devicesList);
              const bind = that.devicesList.find(device => device.serialNo === bindSerialNo);
              that.updateCurrentDevice(that.devicesList, bind);
              // TODO 增加设备角色是老人角色自动跳到健康？设备？页面？,需要再开启
              if (this.$store.getters.roleUser === 2 && this.indexVisitCounts === 0) {
                this.$router.push({
                  name: 'health'
                });
              }
            } else {
              this.devicesList = [];
            }
            if (!that.map) {
              // 循环拉取接口时需要判断是否只刷新数据不load地图
              that.getAmap(); // map start loading
            } else {
              that.map.remove(that.newMarkers);
              that.newMarkers = [];
              this.createCircle();
              that.createMarkers();
            }
          } else {
            // 数据为空
            that.getAmap(); // map start loading
            this.devicesList = [];
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.showOverlay = false;
        });
    },
    // 获取用户信息
    getUserInfos() {
      let that = this;
      APIUser.getUserInfos({
        userId: this.$store.getters.userId
      })
        .then(res => {
          let item = res.data;
          that.loginName = item.loginName;
          console.log();
        })
        .catch(err => {
          console.log(err);
        });
    },
    //右上角图标
    newsClick() {
      this.$router.push({ name: 'news' });
    },
    //左上角图片
    imgAreaClick() {
      this.conAreaShow = !this.conAreaShow;
    },
    //点击宝贝切换展开图片
    imageListClick(item) {
      this.onCloseSpread();
      if (item.lng == 0 || item.lat == 0) {
        this.conAreaShow = false;
      }
      // 2022.11.17，打开信息窗体前再调用一次 getDeviceData 接口获取到最新的定位信息
      this.getDeviceData(item.deviceId);
      this.updateCurrentDevice([], item);
      /* this.onChangeMarker(); */
      if (this.intervalTimer) {
        clearInterval(this.intervalTimer);
        this.intervalTime = 90;
        this.isLocating = false;
      }
      //this.checkImei();
      // 如果不再调用getDeviceData后，重新创建marker 和圆
      /*  this.map.remove(this.newMarkers);
                this.newMarkers = [];
                this.createCircle();
                this.createMarkers(); */
    },
    // 新建一个marker专门来实现实时定位扩散动画
    onSpreadAnimation() {
      let lngLat = [this.currentDevice.lng, this.currentDevice.lat];
      if (this.spMarker) {
        this.map.remove(this.spMarker);
      }
      // eslint-disable-next-line no-undef
      this.spMarker = new AMap.Marker({
        position: lngLat,
        content: `
                    <div  class="spread-container">
                        <div class="spread-item"></div>
                    </div>
                    `
      });
      this.map.add(this.spMarker);
    },
    // 关闭扩散动画
    onCloseSpread() {
      if (this.spMarker) {
        this.map.remove(this.spMarker);
      }
    },
    // 冒泡提示打开/关闭
    setDeviceSportsStatus(state, sportStatus) {
      // todo 需要判断接口返回的步数来确认设备运动状态，0 = 静止，否则运动中
      // todo 待需求确认再把代码打开
      this.deviceSportsStatus = Boolean(state);
      this.createMarkers(sportStatus);
    },
    //实时位置
    getTrackingSendCommon() {
      if (this.isLocating) {
        return;
        // eslint-disable-next-line no-dupe-else-if
      } else if (this.isLocating && this.deviceSportsStatus) {
        //this.setDeviceSportsStatus(false)
        return;
      } /* else if (this.infoWindow) {
                    this.onClose();
                }
                // start, 不管是否有设备运动状态提示，都清空提示
                this.getDeviceData();
                this.showInfoOpen(false); */
      // end
      this.onSpreadAnimation();
      this.isLocating = true;
      this.intervalTimer = setInterval(() => {
        if (this.intervalTime) {
          this.intervalTime--;
        } else {
          this.intervalTime = 90;
          this.isLocating = false;
          clearInterval(this.intervalTimer);
        }
      }, 1000);
      let that = this;
      APIDevice.locateInstance({
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        serialNo: this.$store.getters.serialNo,
        cmdCode: DeviceCommandModel.locate,
        cmdValue: ''
      })
        .then(res => {
          // 当路由已经跳转了，不再进行 || 超时，超时提示已经出现，此时接口再成功也不能显示
          if (that.$route.fullPath.indexOf('index') < 0 || !that.isLocating) {
            return;
          }
          let item = res.data;
          if (item.stateCode == 1 || item.stateCode == 2) {
            // TODO 1：成功；2：指令下发成功，无最新数据
            if (item.stateCode == 1) {
              // 2022 07 22 时使用websocket来获取或数据
              // 2022 09 02 因locateInstance接口恢复轮询定位方式 故前端取消websoket方式
              //this.initWebsocket();
              let position = [item.lng, item.lat];
              this.currentDevice.address = item.address;
              this.currentDevice.lng = item.lng;
              this.currentDevice.lat = item.lat;
              this.currentDevice.radius = item.radius || this.radius;
              this.currentDevice.positionTime = item.lastTime;
              this.currentDevice.locationType = item.locationType;
              if (position) {
                this.circle.setCenter(position);
              }
              let radius = this.currentDevice.radius > 200 ? 280 : this.currentDevice.radius;
              this.circle.setRadius(radius);
              // todo 接口有时不会返回最新的定位信息
              setTimeout(() => {
                //that.getDeviceData();
                if (that.isOpenInfoShow === true) {
                  console.log('已经打开');
                  that.openInfo();
                }
              }, 300);
              that.newMarkers.forEach(val => {
                if (val.w.serialNo == that.$store.getters.serialNo) {
                  val.setPosition(position);
                  that.map.setZoomAndCenter(17, position);
                  NotifyService.notify({ message: '定位成功', type: 'success' });
                  this.currentDevice.positionTime = '刚刚';
                  that.onCloseSpread();
                  // todo 需要实时定位接口返回一个步数参数，根据这个步数来确认设备运动状态，0 = 静止中，否则都是运动中
                  // const sportStatus =  item.sportStep === 0 ? '静止中' : '运动中'
                  if (this.isOpenInfoShow) {
                    this.onClose();
                    /* this.isCloseSportStatus = true;
                                            this.setDeviceSportsStatus(true, '运动中'); */
                  }
                  /* this.setDeviceSportsStatus(true, '运动中');
                                        this.isCloseSportStatus = true; */
                }
              });
            } else {
              NotifyService.notify({ message: `${item.message || '定位超时'}`, type: 'warning' });
              this.onCloseSpread();
            }
          } else {
            NotifyService.notify({ message: '智能定位卡当前未连接网络', type: 'warning' }); //
            this.isLocating = false;
            if (this.intervalTime < 90) {
              this.intervalTime = 90;
            }
            this.onCloseSpread();
          }
          that.isLocating = false;
        })
        .catch(err => {
          // 2023 4 23 增加 定位接口超时容错，现在发现定位接口会超过1.5分钟没返回导致网关超时
          this.isLocating = false;
          if (this.intervalTime < 90) {
            this.intervalTime = 90;
          }
          this.onCloseSpread();
          this.isLocating = false;
          console.log(err);
        })
        .finally(() => {
          clearInterval(this.intervalTimer);
          if (this.intervalTime < 90) {
            this.intervalTime = 90;
          }
          this.onCloseSpread();
        });
    },
    //   初始化websocket连接
    initWebsocket() {
      this.onSpreadAnimation();
      if (typeof WebSocket === 'undefined') {
        DialogService.confirm({
          title: '温馨提示',
          message: '出错了，请联系管理员'
        });
      } else {
        // 实例化socket
        this.websocket = new WebSocket(this.wsUrl);
        // 用于指定连接成功后的回调函数
        this.websocket.onopen = this.websocketOnOpen;
        // 用于指定连接失败后的回调函数
        this.websocket.onerror = this.websocketOnError;
        // 用于指定连接关闭后的回调函数
        this.websocket.onclose = this.websocketClose;
        // 用于指定当从服务器接受到信息时的回调函数
        this.websocket.onmessage = this.websocketOnMessage;
      }
    },
    // 用于指定连接成功后的回调函数
    websocketOnOpen() {
      let actions = this.$store.getters.serialNo;
      this.websocketsend(actions);
      /*  if (this.isLocating) {
                    return;
                }
                this.isLocating = true;
                this.intervalTimer = setInterval(() => {
                    if (this.intervalTime) {
                        this.intervalTime--;
                    } else {
                        this.intervalTime = 90;
                        this.isLocating = false;
                        clearInterval(this.intervalTimer);
                    }
                }, 1000); */
    },
    // 用于指定连接失败后的回调函数
    websocketOnError(e) {
      console.log('websocket连接出错了:;', e);
      NotifyService.notify({ message: `${'定位超时'}`, type: 'warning' });
    },
    // 用于指定连接关闭后的回调函数
    websocketClose() {
      clearInterval(this.intervalTimer);
      if (this.intervalTime < 90) {
        this.intervalTime = 90;
      }
      this.isLocating = false;
      this.onCloseSpread();
      console.log('关闭连接');
    },
    //用于指定当从服务器接受到信息时的回调函数
    websocketOnMessage(e) {
      let that = this;
      const redata = JSON.parse(e.data);
      console.log('获取到的数据:;', redata);
      let position = [redata.Lng, redata.Lat];
      this.currentDevice.address = redata.Address;
      this.currentDevice.lng = redata.Lng;
      this.currentDevice.lat = redata.Lat;
      this.currentDevice.radius = redata.Radius || this.radius;
      this.circle.setCenter(position);
      this.circle.setRadius(this.currentDevice.radius);
      setTimeout(() => {
        // 2022 7 .30 取消实时定位完成调用该接口，防止定位数据入库过慢导致界面的刚刚文字迅速消失的问题
        //that.getDeviceData();
        if (that.isOpenInfoShow === true) {
          that.openInfo();
        }
      }, 300);
      that.newMarkers.forEach(val => {
        if (val.w.serialNo == that.$store.getters.serialNo) {
          val.setPosition(position);
          that.map.setZoomAndCenter(17, position);
          NotifyService.notify({ message: '定位成功', type: 'success' });
          this.currentDevice.positionTime = '刚刚';
        }
      });
      this.websocketClose();
    },
    //   发送数据
    websocketsend(data) {
      //数据发送
      this.websocket.send(data);
    },
    //卫星图切换
    satelliteClick() {
      this.satelliteFlag = !this.satelliteFlag;
      if (this.satelliteFlag) {
        this.map.add(this.satelliteLayer);
      } else {
        this.map.remove(this.satelliteLayer);
      }
    },
    //打电话
    phoneClick() {
      this.selectConfirm = true;
    },
    //确定打电话 聆听电话不能为空=> 手机
    phoneConfirm() {
      let reg = /^1[3456789]\d{9}$/;
      if (this.loginName == '') {
        DialogService.confirm({ title: '手机电话不能为空' }).then(() => {
          this.selectConfirm = true;
        });
      } else if (!reg.test(this.loginName)) {
        DialogService.confirm({ title: '手机电话格式不正确' }).then(() => {
          this.selectConfirm = true;
        });
      } else {
        /* let cmdCode = DeviceCommandModel.remoteListening;
                    let cmdValue = this.loginName; */
        this.sendTap();
      }
    },
    //取消打电话
    phoneCancel() {},
    sendTap() {
      let url = `/api/Device/TAP`;
      let jsonData = {
        device_id: this.$store.getters.deviceId,
        /* userId: this.$store.getters.userId,
                    serialNo: this.serialNo,
                    cmdCode,
                    cmdValue */
        phone: this.loginName
      };
      this.$axios
        .post(url, jsonData)
        /*  APIDevice.sendCommand({
                        deviceId: this.$store.getters.deviceId,
                        userId: this.$store.getters.userId,
                        serialNo: this.serialNo,
                        cmdCode,
                        cmdValue
                     }) */ .then(res => {
          let item = res.data;
          if (item.stateCode == 1) {
            DialogService.confirm({ title: '监听成功' }).then(() => {
              this.selectConfirm = true;
            });
          } else {
            DialogService.confirm({ title: '监听失败', message: item.message }).then(() => {
              this.selectConfirm = true;
            });
          }
        })
        .catch(() => {});
    },
    /*  dialog(message, flag, isAsyncClose, closeFn) {
                Dialog.confirm({
                    title: message,
                    className: "device_confirm",
                    showCancelButton: false,
                    asyncClose: isAsyncClose,
                }).then(() => {
                    if (flag) {
                        this.selectConfirm = true;
                    }
                    isAsyncClose && closeFn();
                });
            }, */
    // type: primary | success | warning | danger
    notify(message, type) {
      Notify({
        message: message,
        type: type || 'success'
      });
    },
    fixScroll() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.scrollTo(0, 0);
      }
    },
    // 判断是否从检测页面跳转过来的
    isBind() {
      this.isBinding = this.$route.query.isBinding || false;
      /* console.log(this.isBinding); */
    },
    // 判断是否是正式环境
    isPro() {
      if (process.env.NODE_ENV === 'production') {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    // 创建信息窗体
    openInfo() {
      //拼接首页定位数据
      let infoCon = `
                    <div class='infoWindow'>
                        <div class="close" onclick='onClose()'><span>关闭</span></div>
                        <p>昵称: ${this.checkNickName(this.currentDevice.nickName)} </p>
                        <p>IMEI: ${this.currentDevice.serialNo} </p>
                        <p>上报时间: ${this.currentDevice.positionTime} </p>
                        <p>定位类型: ${this.checkLocationType(this.currentDevice.locationType)} </p>
                        <p>定位精度: ${this.currentDevice.radius} </p>
                        <p>定位地址: ${this.currentDevice.address} </p>
                        <div class="bottom-square"></div>
                    </div>
                    `;
      let infoConForGps = `
                    <div class='infoWindow'>
                        <div class="close" onclick='onClose()'><span>关闭</span></div>
                        <p>昵称: ${this.checkNickName(this.currentDevice.nickName)} </p>
                        <p>IMEI: ${this.currentDevice.serialNo} </p>
                        <p>上报时间: ${this.currentDevice.positionTime} </p>
                        <p>定位类型: ${this.checkLocationType(this.currentDevice.locationType)} </p>
                        <p>定位地址: ${this.currentDevice.address} </p>
                        <div class="bottom-square"></div>
                    </div>
                    `;
      let infoConForWifi = `
                    <div class='infoWindow'>
                        <div class="close" onclick='onClose()'><span>关闭</span></div>
                        <p>昵称: ${this.checkNickName(this.currentDevice.nickName)} </p>
                        <p>IMEI: ${this.currentDevice.serialNo} </p>
                        <p>上报时间: ${this.currentDevice.positionTime} </p>
                        <p>定位类型: ${this.checkLocationType(this.currentDevice.locationType)} </p>
                        <p>定位精度: ${this.currentDevice.radius} </p>
                        <p>定位地址: ${this.currentDevice.address} </p>
                        <input type='button' class="locationBtn" onclick='onLocation()' value='定位校准'/>
                        <div class="bottom-square"></div>
                    </div>
                    `;
      // eslint-disable-next-line no-undef
      this.infoWindow = new AMap.InfoWindow({
        //2023.12.7 gps定位不显示定位精度
        content:
          this.currentDevice.locationType === 3
            ? infoConForWifi
            : this.currentDevice.locationType === 1
            ? infoConForGps
            : infoCon, //使用默认信息窗体框样式，显示信息内容
        isCustom: true
      });
      this.infoWindow.open(this.map, this.map.getCenter());
    },
    // 关闭信息窗体
    onClose() {
      this.infoWindow.close();
      this.isOpenInfoShow = false;
      //this.setDeviceSportsStatus(false);
    },
    // 定位校准
    onLocation() {
      ToastService.loading();
      let reqBody = {
        imei: this.currentDevice.serialNo,
        locationId: this.currentDevice.meaaageId,
        requestData: this.currentDevice.requestPosition
      };
      APIAlarm.CheckWzLocation(reqBody)
        .then(res => {
          console.log('定位校准结果', res);
          let data = res.data;
          if (data.code === 0) {
            // 校准完成
            ToastService.success({
              message: '校准完成'
            });
          } else {
            DialogService.confirm({
              message: `提交失败，数据不全。`
            });
          }
        })
        .catch(() => {})
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    },
    // 打开信息窗体
    showInfoOpen(state) {
      // 设定打开信息窗体的状态，防止实时定位时重复打开
      this.isOpenInfoShow = state ? false : true;
      //this.setDeviceSportsStatus(false);
    },
    // 判断定位类型
    checkLocationType(type) {
      if (type == 0) {
        return '未知定位';
      }
      if (type == 1) {
        return 'GPS';
      }
      if (type == 2) {
        return 'LBS';
      } else if (type == 3) {
        return 'WIFI';
      }
      return type;
    },
    // 判断昵称是否为空,为空则用imei后3位
    checkNickName(name) {
      return (name = name ? name : this.currentDevice.serialNo.slice(-3));
    },
    //定位时间转成文字说明
    timeToText(time) {
      return this.$own.getDateDiff(this.$own.formatTime(time));
    },
    //快捷方式跳转
    onGoRouter(routes) {
      // 轨迹
      /* if(routes == 1) {
                    this.$router.push({ name: 'trajectory' });
                } */
      switch (Number(routes)) {
        case 1:
          this.$router.push({ name: 'news' });
          break;
        case 2:
          this.$router.push({ name: 'trajectory' });
          break;
        case 3:
          this.$router.push({ name: 'safeAreaList' });
          break;
        case 4:
          this.$router.push({ name: 'familyNumber' });
          break;
        case 5:
          this.satelliteFlag = !this.satelliteFlag;
          if (this.satelliteFlag) {
            this.map.add(this.satelliteLayer);
          } else {
            this.map.remove(this.satelliteLayer);
          }
          break;
        case 6:
          this.$router.push({
            name: 'sendMessage',
            query: {
              from: 'location'
            }
          });
          break;
        case 7:
          this.onCallPhone();
          break;
        case 0:
          this.isShowShortcuts = false;
          break;
        default:
          break;
      }
    },
    // 在页面创建并且调用拨打电话的方法
    onCallPhone() {
      if (this.currentDevice.phoneNumber) {
        window.location.href = `tel: ${this.currentDevice.phoneNumber}`;
      } else {
        DialogService.confirm({
          message: '抱歉，您还未给该设备设置手机号码，\n请前往【设备】-佩戴者信息菜单设置'
        });
      }
    },
    // 生命周期mounted中赋值方法给window对象
    assigWindow() {
      window.onClose = this.onClose;
      window.onLocation = this.onLocation;
    },
    // checkImei 检查是否是直播基地未支付的设备
    checkImei() {
      let that = this;
      let isNeedPay = this.whiteLiveDevices.some(item => {
        return that.$store.getters.serialNo === item.imei;
      });
      if (isNeedPay) {
        // 需要充值
        let deviceItem = this.whiteLiveDevices.filter(item => {
          return that.$store.getters.serialNo === item.imei;
        });
        let reqBody = {
          imei: deviceItem[0].imei,
          iccid: deviceItem[0].iccid
        };
        APICommand.CheckImei(reqBody)
          .then(res => {
            let data = res.data;
            if (data.stateCode === 1 && data.rule === 1 && data.isRecharge === false) {
              // 2022.06.27
              // 属于直播基地已激活但未支付需要跳转到套餐购买界面
              this.$router.push({
                name: 'topup',
                query: {
                  isCanTopup: true,
                  iccid: data.iccid,
                  isAdmin: false,
                  serialNo: data.imei
                }
              });
            }
          })
          .catch(() => {});
      }
    },
    // 关闭lbs弹窗
    onColseLbsTips() {
      this.isShowLbsTips = false;
    },
    //初始化 signalr链接
    initSignalr() {
      // 判断设备版本，大于某个版本才使用 signalr 链接，否则照旧
      if (this.currentDevice.deviceVersion) {
        // 当前设备版本
        const curDeviceVersion = this.currentDevice.deviceVersion;
        // 截取元素
        const element = 'watch.';
        // 指定版本
        /* const openVersoion = ''; */
        // 将当前设备版本转换成数字方便比较
        const deviceVersion = curDeviceVersion
          ? curDeviceVersion
              .substring(curDeviceVersion.indexOf(element) + element.length)
              .split('.')
              .map(num => {
                return Number(num) < 10 ? '0' + num : num;
              })
              .join('')
              .replace(/^0+/, '')
          : '';
        console.log('版本号', deviceVersion);
        this.startSignalr();
      }
      // 1.开始建立链接
      // 2.连接中
      // 3.获取到数据后，再通过这些数据调取 经纬度接口，把接口数据显示到页面上，
      // 如果链接其中用户点击了实时定位接口，定位数据还是使用tcp返回解析的数据
    },
    // 登陆websock，告诉后端tcp链接已经登陆
    startSignalr() {
      this.$signalr.start().then(() => {
        console.log('开始连接通讯...');
        this.connectionSignalr();
      });
    },
    // 开始建立链接
    connectionSignalr() {
      //根据参数先调用指定方法
      /*  this.$signalr.invoke("Login2","864144050568123").then((data) => {
                    console.log("登陆", data);
                }); */
      console.log('开始建立连接流...');
      this.$signalr.stream('GetPostionStream', '864144050568123').subscribe({
        next: data => {
          console.log(`Received data: ${data}`);

          // var li = document.createElement("positionData");
          // li.textContent = "定数数据:"+number;
          // document.getElementById("numbersList").appendChild(li);
        },
        complete: () => {
          console.log('Streaming completed');
          // var li = document.createElement("li");
          // li.textContent = "Stream completed";
          // document.getElementById("numbersList").appendChild(li);
          // connection.invoke('Send3');
        },
        error: err => {
          console.error(err);
          // var li = document.createElement("li");
          // li.textContent = err;
          // document.getElementById("numbersList").appendChild(li);
        }
      });
    },
    // 通过经纬度拿到的接口数据将定位地址信息展示在页面上
    /**
     *
     * @param {String 经度} lng
     * @param {String 纬度} lat
     */
    /* getAddressByLngAndLat(lng, lat) {

            }, */
    // 停止通讯
    stopSignalr() {
      // 根据需要取消所有已订阅的流
      if (this.$signalr) {
        setTimeout(() => {
          this.$signalr.stop();
        }, 800);
      }
    },
    // 初始化监听方法
    initListeners() {
      /* window.addEventListener('visibilitychange', this.onVisibilityChange); */
    },
    // 监听页面切换状态,最小化，切换应用或者熄屏
    onVisibilityChange() {
      if (document.hidden) {
        console.log('用户熄屏，离开页面或者切换到后台，关闭通讯');
        this.stopSignalr();
      } else {
        console.log('用户回到页面1.5秒后自动再进行实时通讯');
        setTimeout(() => {
          /* this.initSignalr(); */
        }, 1500);
      }
    }
  },
  created() {},
  beforeDestroy() {},
  mounted() {
    this.getDeviceData();
    this.getUserInfos();
    this.assigWindow();
    this.initListeners();
  }
};
</script>

<style lang="scss">
@import './location.scss';
.home {
  .noData {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 70%;
    height: 75px;
    @include center();
    @include colorAndFont(#ff9625, 36);
    background-color: #ffe9d2;
    border-radius: 12px;
    box-shadow: 0 0 10px 10px rgba(185, 185, 185, 0.7);
    z-index: 12;
    transform: translateX(-50%);
  }
  .lbs_tips-container {
    position: absolute;
    top: 27%;
    left: 12%;
    height: 75px;
    @include center();
    opacity: 1;
    border-radius: 80px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    box-shadow: 9px 8px 19px -5px rgba(0, 0, 0, 0.27);
    z-index: 99;
    .tips {
      @include center();
      padding: 0 8px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      p {
        font-size: 24px;
      }
      img {
        height: 30px;
        height: 30px;
      }
    }
    .close-icon {
      position: absolute;
      bottom: 60px;
      right: 5px;
      img {
        height: 35px;
        height: 35px;
      }
    }
  }
}
.list {
  .Myname {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
$designWidth: 750;
@function px2rem($px) {
  @return $px * 320 / $designWidth/20 + rem;
}
.device_sports_status {
  position: absolute;
  top: -45px;
  left: -90px;
  height: 80px;
  width: 280px;
  background-color: #8f8888;
  border-radius: 30px;
  @include center();
  .nick_name {
    margin-right: 10px;
    @include center();
  }
  span {
    font-size: 26px;
    color: #fff;
  }
  &.hidden {
    display: none;
  }
  &.show {
  }
}
.img {
  position: relative;
  height: 168px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 50%;
  z-index: 3;
}

.img .circel {
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 90px;
  /*background: rgba(255, 150, 37, 0.2);*/
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img .circel:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  /* background: #fff; */
  border-radius: 50%;
  z-index: 3;
}
.img .circel.notLbs:after {
  content: ' ';
  position: absolute;
  width: 24px;
  height: 24px;
  /* background: #ff9625; */ //2022 7 5 需求变更 定位点不需要显示中心点
  border-radius: 50%;
  z-index: 4;
  opacity: 0;
}
.img .circel.isLbs:after {
  content: ' ';
  position: absolute;
  width: 24px;
  height: 24px;
  /* background: #ff9625; */
  border-radius: 50%;
}
.img .image_area {
  position: relative;
  width: 92px;
  height: 92px;
  margin-top: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}
// 扩散动画
@keyframes spread {
  0% {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(30, 144, 255, 0.2);
    z-index: -1;
  }
  100% {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(30, 144, 255, 0.2);
    z-index: -1;
  }
}
.spread-container {
  position: absolute;
  left: 8px;
  top: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -999;
  .spread-item {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: rgba(30, 144, 255, 0.5);
    margin: 0 auto;
    z-index: -1;
    animation: spread 2s infinite;
  }
}
.img .image_area:after {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 12px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.img .image_area img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.img.online .image_area:after {
  border-top-color: #5fcc0e;
}

.img.online .image_area {
  background: #5fcc0e;
}

.img.unline .image_area:after {
  border-top-color: #b5b5b5;
}

.img.unline .image_area {
  background: #b5b5b5;
}

.getLocation {
  width: 80px;
  height: 80px;
  background: rgba(37, 153, 255, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.getLocation em {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
}

.getLocation em:after {
  content: ' ';
  width: 24px;
  height: 24px;
  background: #2599ff;
  border-radius: 50%;
}

.amap-marker-label {
  font-weight: 300;
  border: 0;
  max-width: 20px;
}
.marker-labels {
  min-width: 150px;
  max-width: 200px;
  min-height: 20px;
  line-height: 20px;
  color: #4f4f4f;
  font-size: 20px;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 0.29867rem 0.04267rem rgba(130, 130, 130, 0.4);
  -moz-box-shadow: 0 0 0.29867rem 0.04267rem rgba(130, 130, 130, 0.4);
  box-shadow: 0 0 0.29867rem 0.04267rem rgba(130, 130, 130, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cut {
  border: 2px solid #41ba83;
}
// 信息窗口
.amap-info-content {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  .amap-info-close {
    font-size: 48px;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #c3c3c3;
    text-decoration: none;
    font: bold 32px / 28px Tahoma, Verdana, sans-serif;
    width: 28px;
    height: 28px;
  }
}
// 信息窗体
.infoWindow {
  height: auto;
  width: 420px;
  min-height: 200px;
  font-size: 28px;
  padding: 20px;
  z-index: 999;
  background-color: white;
  p {
    font-size: 28px;
  }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 60px;
    background-color: red;
    border-bottom-left-radius: 20px;
    color: white;
    span {
      font-size: 28px;
    }
  }
  .bottom-square {
    position: absolute;
    bottom: -20px;
    left: 45%;
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: white transparent transparent transparent;
  }
  .locationBtn {
    margin: 10px 0;
    padding: 10px;
    background: #fff;
    border-radius: 25px;
    color: $blue;
    border: $blue solid 2px;
    &.show {
      display: none;
    }
  }
}
</style>
