<template>
  <div
    class="main"
    :style="{
      backgroundImage:
        'linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2)), url(' +
        padBgImg +
        ')',
      'background-repeat': 'no-repeat',
    }"
  >
    <div class="main-left">
      <div
        class="left-top"
        @touchstart="gtouchstart($event)"
        @touchmove="gtouchmove()"
        @touchend="showDeleteButton"
      >
        <!--
        <div class="logo-box">
          <img class="logo-icon" v-if="logImg" :src="logImg" alt="" />
          <img
            class="logo-icon"
            v-else
            :src="parseImgUrl('ipdImages', 'shangeyun_logo.svg')"
            alt=""
          />
        </div>
        -->
        <div class="left-time">
          <span>{{ nowDate }} </span>
          <span>{{ nowWeek }}</span>
        </div>
        <div class="weather">
          <img
            v-show="outWeather.imgname"
            :src="outWeather.imgname"
            class="weather-icon"
            alt=""
          />
          <span>{{ outWeather.temperature ? outWeather.temperature : "--" }}℃</span>
        </div>
        <div class="weixiin" v-if="contantDetail" @click="showContact">
          <img :src="parseImgUrl('ipdImages', 'weixin.svg')" />
          <span> 联系客服</span>
        </div>
      </div>
      <div class="left-space">
        <div class="text">
          <div @click.stop="refreshSpace">
            {{ officeData.localName }}
          </div>
          <!-- <div
            v-if="
              officeData.isPassengerPass === true ||
              officeData.isPassengerPass === false
            "
          >
            <img
              :src="parseImgUrl('ipdImages', 'vector-active.svg')"
              v-if="officeData.isPassengerPass"
            />
            <img
              :src="parseImgUrl('ipdImages', 'vector.svg')"
              v-if="!officeData.isPassengerPass"
            />
            <span v-if="officeData.isPassengerPass">有人</span>
            <span v-if="!officeData.isPassengerPass">无人</span>
          </div> -->
        </div>
        <div class="space-info">
          <div class="space-temp">
            <img :src="parseImgUrl('ipdImages', 'template-icon.svg')" alt="" />
            <span class="temp-text">温度</span>
            <span class="temp-num" @click="handleDetail(envlist[3])"
              >{{ officeData.temperature ? officeData.temperature : "--"
              }}<sup>℃</sup></span
            >
          </div>
        </div>
        <div class="space-env">
          <div
            class="env-item"
            :style="[
              { background: item.bgColor ? item.bgColor : '' },
              { opacity: item.bgColor ? 0.8 : '' },
              { paddingLeft: index == 0 && item.bgColor ? '15px' : '' },
            ]"
            :class="[
              index == 1 ? 'env-color' : '',
              item.bgColor ? 'env-item-radius' : '',
            ]"
            :key="'env' + index"
            @click="handleDetail(item)"
            v-for="(item, index) in envlist"
          >
            <div>
              <img :src="parseImgUrl('ipdImages', item.img)" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div class="env-text">
              {{ item.num }} <sup>{{ item.unit }}</sup>
            </div>
          </div>
        </div>
      </div>
      <div class="fotter" v-if="spaceData && spaceData.length > 1">
        <template v-for="(item, index) in spaceData">
          <div
            class="fotter-item"
            :class="item.active ? 'fotter-item-active' : ''"
            :key="index + 'nav'"
            v-if="index < 3"
            @click.stop="changeSpace(item)"
          >
            <img
              v-if="item.active"
              :src="
                index == 0
                  ? parseImgUrl('ipdImages', 'rectangle1-active.svg')
                  : parseImgUrl('ipdImages', 'rectangle-active.svg')
              "
            />
            <img
              :src="
                index == 0
                  ? parseImgUrl('ipdImages', 'rectangle1.svg')
                  : parseImgUrl('ipdImages', 'rectangle2.svg')
              "
              v-else
            />

            <span>{{ item.spaceName }} </span>
          </div>
        </template>
        <div
          class="fotter-item-end"
          @click="moreSpace"
          v-if="spaceData && spaceData.length > 3"
        >
          <img :src="parseImgUrl('ipdImages', 'rectangle-fotter.svg')" />
          <span>…</span>
        </div>
      </div>
    </div>
    <div class="main-right">
      <!--加班start-->
      <div
        class="work-btn"
        v-if="
          (roomType === '开放' && isWork) ||
          (roomType === '会议室' && scenarioArr && scenarioArr.length)
        "
      >
        <!--自动控制的加班 start-->
        <WorkConfig
          v-if="roomType === '开放' && isWork && controlMode == 0"
          key="workCkey"
          :workkArr="workkArr"
          @closeWork="closeWork"
          @triggerWork="triggerWork"
          @setForceOverTimeFlag="setForceOverTimeFlag"
        ></WorkConfig>

        <!--手动控制的加班 start-->
        <template v-if="roomType === '开放' && isWork && controlMode == 1">
          <ManualConfig
            key="manualckey"
            :workkArr="workkArr"
            @closeWork="closeWork"
            @leaveWork="leaveWork"
            @triggerWork="triggerWork"
            @setForceOverTimeFlag="setForceOverTimeFlag"
          ></ManualConfig>
        </template>

        <scenario-config
          v-if="roomType === '会议室' && scenarioArr && scenarioArr.length"
          :activeType="activeType"
          :scenarioArr="scenarioArr"
          :spaceId="spaceInfo.spaceId"
          :projectId="projectId"
          @setHeadScene="setHeadScene"
        ></scenario-config>
      </div>
      <!--加班end-->
      <!--空调手动控制 start-->
      <manual-index
        v-if="controlMode == 1 && spaceExistenceDevice.airConditioner"
        key="manualKey"
        ref="manualAirRef"
        @triggerWork="triggerWork"
        :seviceEquipmentList="seviceEquipmentList"
        :forceOverTimeFlag="forceOverTimeFlag"
        @updateAirTemp="updateAirTemp"
        @showChildAirControl="showChildAirControl"
        :airVolumes="officeData.airVolumes"
        :temperature="officeData.temperature"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
        :disable="officeData.disable"
        :userIsControl="userIsControl"
      >
      </manual-index>
      <!--空调手动控制 end-->
      <!--空调自动控制 start-->
      <Air
        v-if="controlMode === 0 && spaceExistenceDevice.airConditioner"
        id="airId"
        key="airKey"
        @triggerWork="triggerWork"
        :forceOverTimeFlag="forceOverTimeFlag"
        @updateAirTemp="updateAirTemp"
        :hasAir="spaceExistenceDevice.airConditioner"
        :airVolumes="officeData.airVolumes"
        :temperature="officeData.temperature"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
        :isACATVA="isACATVA"
        :userIsControl="userIsControl"
        :disable="officeData.disable"
      />
      <!--空调自动控制 end-->

      <!--地暖 start-->
      <floor-heating
        v-if="spaceInfo.spaceId && spaceExistenceDevice.floorHeating"
        :forceOverTimeFlag="forceOverTimeFlag"
        :showFloorBox="spaceExistenceDevice.floorHeating"
        :seviceEquipmentList="seviceEquipmentList"
        @triggerWork="triggerWork"
        @showFloorHeating="showFloorHeating"
        id="floorHeatingId"
        key="floorHeatingKey"
        :userIsControl="userIsControl"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
      ></floor-heating>
      <!--地暖 end-->

      <!--出于性能的灯的显示和隐藏最好放在子组件里面判断,减少组件频繁重新加载的问题-->
      <Light
        v-if="spaceInfo.spaceId"
        ref="lightRef"
        :showLight="spaceExistenceDevice.light"
        :forceOverTimeFlag="forceOverTimeFlag"
        :controlMode="controlMode"
        :seviceEquipmentList="seviceEquipmentList"
        @triggerWork="triggerWork"
        @showLightColorCtrol="showLightColorCtrol"
        id="lightId"
        key="lightKey"
        :userIsControl="userIsControl"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
      />
      <Curtain
        :spaceId="spaceInfo.spaceId"
        id="curtainId"
        key="curtainKey"
        ref="curtainRef"
        @showCurtainOpening="showCurtainOpening"
        :userIsControl="userIsControl"
        v-if="spaceExistenceDevice.curtain && spaceInfo.spaceId"
        :projectId="projectId"
      />

      <!-- <Curtain
        :spaceId="spaceInfo.spaceId"
        id="curtainId"
        key="curtainKey"
        :userIsControl="userIsControl"
        v-if="spaceExistenceDevice.curtain && spaceInfo.spaceId"
        :projectId="projectId"
      /> -->

      <Socket
        v-if="spaceInfo.spaceId && spaceExistenceDevice.socket"
        :showSocket="spaceExistenceDevice.socket"
        :spaceId="spaceInfo.spaceId"
        :projectId="projectId"
      ></Socket>
    </div>
    <!--加班场景-->
    <van-popup
      v-model:show="isShowWork"
      position="right"
      :close-on-click-overlay="false"
      class="popup-content"
      teleport="#app"
    >
      <work-overtime
        v-if="isShowWork && controlMode === 0"
        :spaceInfo="spaceInfo"
        @closeWork="closeWork"
        :projectId="projectId"
        :workkArr="workkArr"
      ></work-overtime>

      <!--加班手动控制 start-->
      <manual-overtime
        v-if="isShowWork && controlMode == 1"
        :seviceEquipmentList="seviceEquipmentList"
        :enterType="enterType"
        :deviceItem="deviceItem"
        :spaceInfo="spaceInfo"
        @closeWork="closeWork"
        :projectId="projectId"
        :workkArr="workkArr"
      >
      </manual-overtime>
    </van-popup>
    <!--会议室场景-->
    <van-popup
      v-model:show="isShowMetting"
      position="right"
      :close-on-click-overlay="false"
      class="popup-content"
      teleport="#app"
    >
      <scenario-dailog :secenaroStatus="secenaroStatus" @closeDailog="closeDailog">
      </scenario-dailog>
    </van-popup>
    <!--环境数据详情-->
    <van-popup
      v-model:show="isShowDetail"
      position="right"
      :close-on-click-overlay="true"
      class="popup-content"
      teleport="#app"
    >
      <detail :query="detailQuery" v-if="isShowDetail"></detail>
    </van-popup>
    <!--地图数据列表-->
    <van-popup
      v-model:show="isShowMap"
      class="map-popup"
      position="bottom"
      style="width: 100%; height: 70%"
      :close-on-click-overlay="true"
      teleport="#app"
    >
      <com-map
        v-if="defaultSpace.spaceId && isShowMap"
        :spaceData="copySpaceData"
        :spaceInfo="defaultSpace"
        :projectId="projectId"
        :floorId="defaultSpace.floorId"
        :buildingId="defaultSpace.buildingId"
        @changeSpace="changeSpace"
      ></com-map>
    </van-popup>
    <!--联系方式-->
    <contact
      :isShowContact="isShowContact"
      :contantDetail="contantDetail"
      v-if="isShowContact"
      @closeDailog="closeContactDailog"
    ></contact>

    <!--灯灯调光和调色温-->
    <van-popup
      v-model:show="isLightColorFlag"
      position="right"
      :close-on-click-overlay="true"
      class="popup-content-small"
      teleport="#app"
    >
      <div>
        <light-temp :lightData="lightData" v-if="isLightColorFlag"></light-temp>
      </div>
    </van-popup>

    <!--地暖调光和调色温-->
    <van-popup
      v-model:show="isFloorHeatingTemp"
      position="right"
      :close-on-click-overlay="true"
      class="popup-content-small"
      teleport="#app"
    >
      <div>
        <ChildTempSet :floorData="floorData" v-if="isFloorHeatingTemp"></ChildTempSet>
      </div>
    </van-popup>

    <!--窗帘开度设置-->
    <van-popup
      v-model:show="isCurtainOpening"
      position="right"
      :close-on-click-overlay="true"
      @click-overlay="closeCurtainOpening"
      class="popup-content-small"
      teleport="#app"
    >
      <div v-if="isCurtainOpening">
        <curtain-opening
          v-if="isCurtainOpening"
          :curtainData="curtainData"
        ></curtain-opening>
      </div>
    </van-popup>

    <!--空调子设备控制功能-->
    <van-popup
      v-model:show="isChildAirControl"
      position="right"
      @click-overlay="closeChildAirControl"
      class="popup-content-small"
      teleport="#app"
    >
      <div v-if="isChildAirControl">
        <ChildAirControl :airData="airData" v-if="isChildAirControl"></ChildAirControl>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onBeforeMount,
  onMounted,
  nextTick,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import WorkOvertime from "./components/workOvertime/index.vue";
import ManualOvertime from "./components/ManualWork/index.vue";
import Contact from "./components/Contact/index.vue";
import WorkConfig from "./components/workOvertime/WorkConfig.vue";
import ManualConfig from "./components/ManualWork/WorkConfig.vue";
import ScenarioConfig from "./components/Scenario/ScenarioConfig.vue";
import MapBox from "@/views/envmonitor/components/Map/MapBox.vue";
import Header from "@/components/header/Index.vue";
import Comheader from "@/components/header/Comheader.vue";
import Air from "@/views/envmonitor/components/Air/index.vue";
import FloorHeating from "@/views/envmonitor/components/FloorHeating/index.vue";
import ManualIndex from "@/views/envmonitor/components/Air/manualIndex.vue";
import Light from "@/views/envmonitor/components/Light/index.vue";
import Curtain from "@/views/envmonitor/components/Curtain/index.vue";
import CurtainOpening from "@/views/envmonitor/components/Curtain/CurtainOpening.vue";
import TimeBox from "@/views/envmonitor/TimeBox.vue";
import NavBar from "@/views/envmonitor/NavBar.vue";
import ScenarioDailog from "@/views/envmonitor/components/Scenario/scenarioDailog.vue";
import Detail from "@/views/envmonitor/detail.vue";
import ComMap from "@/views/envmonitor/components/Map/index.vue";
import LightTemp from "@/views/envmonitor/components/Light/LightTemp.vue";
import ChildTempSet from "@/views/envmonitor/components/FloorHeating/ChildTempSet.vue";
import ChildAirControl from "@/views/envmonitor/components/Air/ChildAirControl.vue";
import Socket from "@/views/envmonitor/components/Socket/index.vue";
import { Icon, Popup, Dialog, Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
import {
  getCompanyInfo,
  getWeather,
  getSpaceInfo,
  getMeetingSceneHttp,
  getSetTimeHttp,
  changeSetTimeHttp,
  getSpaceEquipType,
  getPermanentSpace,
  getUserControlAuth,
  getSpaceMode,
  getSpaceTemp,
  querySpaceSceneConfig,
  queryCustomAndScence,
  queryWorkSpace,
  getPadImg,
  getSpaceEquipList,
  queryCustomerservice,
} from "@/apis/envmonitor";
import Keys from "@/constant/key";
import {
  formatDate,
  formatDateStr,
  getHours,
  getLocalNewSpaceInfo,
  getNowWeek,
  getRelNowTime,
  getUserInfo,
  parseImgUrl,
  setQueryConfig,
} from "@/utils";
import { store } from "@/store";
import { SpaceInfoModel } from "@/model/userModel";
import { getWorkType } from "@/utils/mapIcon";
import { getCookieMac } from "@/utils/cookies";

export default defineComponent({
  components: {
    MapBox,
    ComMap,
    ScenarioDailog,
    LightTemp,
    Header,
    Comheader,
    NavBar,
    Air,
    FloorHeating,
    ManualIndex,
    ManualOvertime,
    ChildAirControl,
    Light,
    Curtain,
    TimeBox,
    WorkOvertime,
    WorkConfig,
    ManualConfig,
    ScenarioConfig,
    Detail,
    Contact,
    ChildTempSet,
    CurtainOpening,
    Socket,
    [Dialog.Component.name]: Dialog.Component,
    VanPopup: Popup,
    VanIcon: Icon,
  },
  beforeRouteEnter(to, from, next) {
    let mac: any = getCookieMac();
    if (mac && mac != "null") {
      next();
    } else {
      next("/error");
    }
  },
  setup() {
    const proxyGlobal: any = getCurrentInstance();
    const router: any = useRouter();
    const route: any = useRoute();
    const document: any = window.document;
    const screenHeight: any = document.body.clientHeight;
    const outWeather: any = {};
    const weatherTimer: any = null;
    const equimentsTimer: any = null;
    let curtainData: any = [];
    let secenaroStatus: any = {};
    // 空间数据（包括空间下的设备的状态）
    const officeData: any = {};
    let spaceEqFlagObj: SpaceInfoModel = {
      hasAir: true, // 有无空调
      hasBlowing: false, // 空调有无 变风量系统
      hasLamp: false, //有无灯具
    };
    const popList: any = [];
    const detailQuery: any = {};
    // 空间类型
    let spaceInfo: any = {};
    const projectId: string = store.state.user.projectId;
    const sceneDetail: any = {};
    const timeOutEvent: any = {};
    const touchInterval: any = {};
    const contantDetail: any = {};
    const cusServiceTimer: any = null;
    const headerInfo: {
      headImg: any;
      headScene: string;
      tipText: string;
      tipTextSwatch: boolean;
    } = {
      headImg: "",
      headScene: "",
      tipText: "选择工作结束时间",
      tipTextSwatch: false,
    };
    let spaceExistenceDevice: any = {
      curtain: false,
      light: false,
      airConditioner: false,
      bodySensor: false,
      floorHeating: false,
      socket: false,
    };
    let curtainRef: any = {};
    let manualAirRef: any = {};
    let lightRef: any = {};
    // let mapRef: any = {}
    let intervalTimer: any = null;
    const workInfo: any = {};
    const userInfo: any = getUserInfo();
    let lightData: any = {};
    let floorData: any = {};
    let spaceTimer: any = null;
    let listSen: any = [
      {
        id: 0,
        code: "DISCUSSING",
        name: "会议模式",
        img: "scene_work.svg",
        checked: true,
        textObj: [
          {
            text: "照明灯光已全部为您开启",
            status: "ok",
          },
          {
            text: "演示设备已为您准备",
            status: "ok",
          },
          {
            text: "空调已为您开启",
            type: "air",
            status: "ok",
          },
        ],
      },
      {
        id: 1,
        code: "PROJECTING",
        name: "投影模式",
        img: "scene_visitor.svg",
        checked: false,
        textObj: [
          {
            text: "主灯已为您关闭，氛围灯为您开启",
            status: "ok",
          },
          {
            text: "演示设备已为您开启",
            status: "ok",
          },
          {
            text: "空调已为您开启",
            type: "air",
            status: "ok",
          },
          {
            text: "窗帘已为您关闭",
            status: "ok",
          },
        ],
      },
      {
        id: 2,
        code: "ADJOURNMENT",
        name: "全关模式",
        img: "scene_rest.svg",
        checked: false,
        textObj: [
          {
            text: "照明灯光2min后将全部关闭",
            status: "ok",
          },
          {
            text: "演示设备已为您关闭",
            status: "ok",
          },
          {
            text: "空调全部关闭",
            type: "air",
            status: "ok",
          },
          {
            text: "窗帘已为您关闭",
            status: "ok",
          },
        ],
      },
    ];
    let userSpaceInfo: any = [];
    let spaceModelTimer: any = null;
    let spaceTempTimer: any = null;
    let dateInter: any = null;
    let envlist: any = [
      {
        id: 2,
        name: "甲醛",
        num: "",
        level: "",
        bgColor: "",
        img: "jiaquan.svg",
        funcid: "HCHO",
        code: "jiaquan",
        unit: "mg/m³",
      },
      {
        id: 0,
        name: "CO₂",
        bgColor: "",
        num: "",
        level: "",
        img: "co2.svg",
        funcid: "CO2",
        code: "co2",
        unit: "ppm",
      },
      {
        id: 1,
        name: "PM2.5",
        bgColor: "",
        num: "",
        level: "",
        funcid: "PM2d5",
        img: "pm2.5.svg",
        code: "pm25",
        unit: "ug/m³",
      },
      {
        id: 3,
        name: "湿度",
        bgColor: "",
        img: "humidity.svg",
        num: "",
        level: "",
        funcid: "Tdb,RH",
        code: "shidu",
        unit: "%",
      },
    ];
    let scenarioArr: any = [];
    let sceneConfigTimer: any = [];
    let realEevList: any = []; // 解决v-if报错的问题临时使用
    let workkArr: any = [];
    let spaceData: any = [];
    let secenTimer: any = {};
    let nowDate: any = formatDate("YYYY.MM.DD HH:mm");
    let nowWeek: any = getNowWeek();
    let padImgData: any = [];
    let controlMode: any = null;
    let deviceItem: any = null;
    let allDevice: any = [];
    let spaceEquipList: any = [];
    let equipTimer: any = null;
    let airData: any = {};
    const proxyData = reactive({
      equipTimer: equipTimer,
      seviceEquipmentList: allDevice, // 所有的设备
      spaceEquipList: spaceEquipList,
      enterType: 1,
      deviceItem: deviceItem,
      parseImgUrl: parseImgUrl,
      fileUrl: proxyGlobal.proxy.$fileUrl,
      nowDate: nowDate,
      nowWeek: nowWeek,
      isShowWork: false,
      isShowMetting: false,
      localName: "",
      airTemp: "",
      userIsControl: true,
      spaceModelTimer: spaceModelTimer,
      spaceTempTimer: spaceTempTimer,
      userSpaceInfo: userSpaceInfo,
      spaceTimer: spaceTimer,
      workInfo: workInfo,
      intervalTimer: intervalTimer,
      roomType: "",
      showSpaceTip: false,
      mapOpacity: 0,
      opacityV: 1,
      curtainRef: curtainRef,
      manualAirRef: manualAirRef,
      lightRef: lightRef,
      hideTopImg: false,
      isBottom: false,
      isScrool: false,
      officeData: officeData,
      popList: popList,
      popupType: "scenario",
      showSecenDetailDalig: false,
      sceneDetail: sceneDetail,
      showScenario: false,
      projectId: projectId,
      spaceInfo: spaceInfo,
      headerInfo: headerInfo,
      topbgimg: "",
      userInfo: userInfo,
      deviceIcon: "arrow",
      visible: false,
      outWeather: outWeather,
      vanPopupIndex: "",
      spaceEqFlagObj: spaceEqFlagObj,
      spaceExistenceDevice: spaceExistenceDevice,
      listOffice: [
        {
          id: 0,
          name: "工作",
          code: "work",
          img: "scene_work.svg",
          checked: true,
          textObj: [
            {
              text: "办公区灯光已全部为您开启",
              status: "ok",
            },
            {
              text: "正在将温度调至 26℃",
              status: "ok",
            },
            {
              text: "窗帘已为您全部打开",
              status: "ok",
            },
            {
              text: "饮用水已为您准备",
              status: "ok",
            },
          ],
        },
        {
          id: 1,
          name: "会客",
          code: "guest",
          img: "scene_visitor.svg",
          checked: false,
          textObj: [
            {
              text: "会客区照明已为您开启",
              status: "ok",
            },
            {
              text: "空调已为您切换至会客温度，目标温度24℃",
              status: "ok",
            },
            {
              text: "窗帘已为您全部开启",
              status: "ok",
            },
            {
              text: "演示设备已为您准备",
              status: "ok",
            },
            {
              text: "饮用水已为您准备",
              status: "ok",
            },
          ],
        },
        {
          id: 2,
          name: "休息",
          code: "rest",
          img: "scene_rest.svg",
          checked: false,
          textObj: [
            {
              text: "主灯已关闭，氛围灯将为您开启",
              status: "ok",
            },
            {
              text: "空调将为您调节至适宜休息的温度，目标温度26℃",
              status: "ok",
            },
            {
              text: "窗帘已为您全部关闭",
              status: "ok",
            },
          ],
        },
      ],
      listSen: listSen,
      isACATVA: false,
      showWorkOff: false, // 开放办公室的 提前关闭是否展示
      envlist: envlist,
      realEevList: realEevList,
      navList: [
        {
          top: 0,
          id: "airId",
          code: "air",
          name: "温度/湿度",
          noShow: true,
          img: parseImgUrl("page-officehome", "temp.png"),
          activeImg: parseImgUrl("page-officehome", "temp_active.svg"),
        },
        {
          top: 0,
          id: "lightId",
          code: "lamp",
          name: "光照",
          noShow: false,
          img: parseImgUrl("page-officehome", "lamp.png"),
          activeImg: parseImgUrl("page-officehome", "lamp_active.svg"),
        },
        {
          top: 0,
          id: "curtainId",
          code: "curtain",
          name: "窗帘",
          noShow: false,
          img: parseImgUrl("page-officehome", "curtain-nav.svg"),
          activeImg: parseImgUrl("page-officehome", "curtain-nav-active.svg"),
        },
        {
          top: 0,
          id: 4,
          code: "mySpace",
          name: "常驻空间",
          noShow: false,
          activeImg: parseImgUrl("page-officehome", "mySpaceIcon.svg"),
          img: parseImgUrl("page-officehome", "mySpaceIcon.svg"),
        },
        {
          top: 0,
          id: 5,
          code: "switchSpace",
          name: "我的",
          noShow: true,
          activeImg: parseImgUrl("page-officehome", "mapIcon.png"),
          img: parseImgUrl("page-officehome", "mapIcon.png"),
        },
      ],
      // 上班=ATWORK 讨论=DISCUSSING 投影=PROJECTING 散会=ADJOURNMENT 下班=OFFWORK
      meetingRoomSence: [
        {
          code: "DISCUSSING",
          name: "讨论",
        },
        {
          code: "PROJECTING",
          name: "演示",
        },
        {
          code: "ADJOURNMENT",
          name: "散会",
        },
      ],
      nextCusStartTime: 0, // 第二天服务定制开始时间
      cusEndTime: 0,
      cusStartTime: 0, // 当天服务定制-开始时间
      isShowContact: false,
      showContact() {
        proxyData.isShowContact = true;
      },
      isFloorHeatingTemp: false,
      floorData: floorData,
      showFloorHeating(floorData: any) {
        proxyData.isFloorHeatingTemp = true;
        proxyData.floorData = floorData;
      },
      isLightColorFlag: false,
      lightData: lightData,
      //  展示调光,调温弹窗
      showLightColorCtrol(lightData: any) {
        proxyData.isLightColorFlag = true;
        proxyData.lightData = lightData;
      },
      curtainData: curtainData,
      isCurtainOpening: false, // 窗帘开度
      // 展示开度调节按钮
      showCurtainOpening(curtainData: any) {
        // 是否展示窗帘
        proxyData.curtainData = curtainData;
        proxyData.isCurtainOpening = true;
      },
      // 展开子设备控制
      airData: airData,
      isChildAirControl: false,
      showChildAirControl(item: any) {
        proxyData.airData = item;
        proxyData.isChildAirControl = true;
      },
      // 关闭空调控制弹窗
      closeChildAirControl() {
        proxyData.manualAirRef.getAirInfo(1);
      },
      closeCurtainOpening() {
        console.log("被点击了");
        proxyData.curtainRef.updateGroupPeing();
      },
      closeContactDailog() {
        proxyData.isShowContact = false;
      },
      padBgImg: "",
      // 设置平板背景图
      // reviewBaseUrl: `/image-service/common/file_get?systemId=dataPlatform`,
      setPadBgImg() {
        if (
          proxyData.padImgData.isBgDefault === 0 &&
          proxyData.padImgData.bgImage &&
          proxyData.padImgData.bgImage.fileId
        ) {
          proxyData.padBgImg =
            proxyData.fileUrl + `&key=${proxyData.padImgData.bgImage.fileId}`;
        } else {
          // debugger;
          if (proxyData.roomType == "个人") {
            proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img2.png");
          } else if (proxyData.roomType === "会议室") {
            proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img3.png");
          } else if (proxyData.roomType === "开放") {
            proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img1.png");
          } else {
            proxyData.padBgImg = parseImgUrl("ipdImages", "pad_img1.png");
          }
        }
      },
      logImg: "",
      // 设置平板logo
      setPadLogo() {
        if (
          proxyData.padImgData.isLogoDefault === 0 &&
          proxyData.padImgData.logoImage &&
          proxyData.padImgData.logoImage.fileId
        ) {
          // 公司提供的
          proxyData.logImg =
            proxyData.fileUrl + `&key=${proxyData.padImgData.logoImage.fileId}`;
        } else {
          proxyData.logImg = "";
        }
      },
      padImgData: padImgData,
      padNumber: 0,
      // 获取pad的背景图
      getPadImg() {
        let params: any = {
          funcType: proxyData.officeData.roomFuncType,
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        // debugger;
        if (proxyData.padNumber < 1) {
          proxyData.padNumber = 1;
          getPadImg(str).then((res) => {
            if (res.result === "success") {
              proxyData.padImgData = res.data;
              proxyData.setPadBgImg(); // 设置平板背景
              proxyData.setPadLogo(); // 设置平板logo
            }
          });
        }
      },
      /**
       * 加班
       */
      triggerWork(type: any = 1, deviceItem: any = null) {
        // console.log(type);
        // debugger
        proxyData.enterType = type;
        proxyData.deviceItem = deviceItem || null;
        proxyData.isShowWork = true;
        // proxyData.queryCustomAndScenceTimer(0);
        proxyData.queryCustomAndScence(2); // 打开弹窗立即调用刷新加班数据
      },
      // 关于手动控制是否展示加班弹窗的问题处理
      checkDeviceShowWork() {
        proxyData.spaceEquipList.map((item: any) => {
          item.id = item.equipmentId;
        });
        proxyData.seviceEquipmentList = proxyData.spaceEquipList;
      },
      leaveWork() {
        proxyData.manualAirRef && proxyData.manualAirRef.updateCloseSwitchFromWork();
        proxyData.lightRef && proxyData.lightRef.updateSwitchFromWork();
      },
      /**
       * 关闭加班
       */
      closeWork(type: any = "confirm") {
        proxyData.isShowWork = false;
        proxyData.queryCustomAndScence(2); // 关闭弹窗立即调用刷新加班数据
        if (type == "confirm") {
          let lightRefTimer: any = setTimeout(() => {
            proxyData.manualAirRef && proxyData.manualAirRef.updateCloseSwitchFromWork();
            proxyData.lightRef && proxyData.lightRef.updateSwitchFromWork();
            clearTimeout(lightRefTimer);
            lightRefTimer = null;
          }, 1000);
        }
      },
      forceOverTimeFlag: false,
      setForceOverTimeFlag(flag: any) {
        // debugger
        if (proxyData.roomType === "开放" && flag) {
          proxyData.forceOverTimeFlag = true;
        } else {
          proxyData.forceOverTimeFlag = false;
        }
      },
      // 获取公司信息
      async getCompanyInfo() {
        const res: any = await getCompanyInfo({ companyId: Keys.companyKey });
        const data = res.data;
        // store.commit(UserMutationTypes.SET_PROJECT_ID, 'Pj1101080259')
        // const location: any = data.sagaCareCoords.split(',')
        // const targetLocationInfo: any = {
        //   longitude: location[0],
        //   latitude: location[1]
        // }
        // console.log(targetLocationInfo)
      },
      weatherTimer: weatherTimer,
      getWeatherTimer(timer: any = 3600000) {
        proxyData.weatherTimer = setTimeout(() => {
          clearTimeout(proxyData.weatherTimer);
          proxyData.getWeather();
        }, timer);
      },
      // 获取天气信息
      getWeather() {
        const params: any = {
          openid: proxyData.userInfo.openid,
          pubname: proxyData.userInfo.pubname,
          projectId: store.state.user.projectId,
        };
        const str: string = setQueryConfig(params);
        getWeather(str)
          .then((res) => {
            const content: any = res?.content ?? {};
            proxyData.outWeather = content;
            const text: string = content.text;
            proxyData.getWeatherIcon(text);
            proxyData.getnowTime(text);
            proxyData.getWeatherTimer();
          })
          .catch(() => {
            proxyData.getWeatherTimer(5000);
          });
      },
      // 设置当前背景图
      getnowTime(text: string) {
        // 头部背景图片
        const now = getHours();
        if (text.indexOf("霾") > -1) {
          proxyData.topbgimg = parseImgUrl("weather", "office_smog.jpg");
        } else {
          if (now >= 6 && now < 19) {
            // 白天
            proxyData.topbgimg = parseImgUrl("weather", "office_bright.jpg");
          } else {
            // 夜晚
            proxyData.topbgimg = parseImgUrl("weather", "office_night.jpg");
          }
        }
      },
      // 设置天气icon
      getWeatherIcon(text: string) {
        if (text) {
          if (text && text.indexOf("晴") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "sun.png");
          } else if (text && text.indexOf("雨") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "rain.png");
          } else if ((text && text.indexOf("阴") > -1) || text.indexOf("云") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "cloudy.png");
          } else if (text && text.indexOf("霾") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "mai.png");
          } else if (text && text.indexOf("雾") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "fog.png");
          } else if (text && text.indexOf("风") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "wind.png");
          } else if (text && text.indexOf("雷") > -1) {
            proxyData.outWeather.imgname = parseImgUrl("weather", "thunder.png");
          } else {
            proxyData.outWeather.imgname = parseImgUrl("weather", "sun.png");
          }
        } else {
          proxyData.outWeather.imgname = parseImgUrl("weather", "sun.png");
        }
      },
      // 判断空间类型
      checkSpaceType(roomFuncType: string) {
        let roomType: any = getWorkType(roomFuncType);
        if (roomType === "个人") {
          proxyData.roomType = "个人";
          proxyData.headerInfo.headImg = parseImgUrl(
            "page-officehome",
            "office_person_2.png"
          );
          proxyData.headerInfo.headScene = "工作";
          proxyData.popList = proxyData.listOffice;
        } else if (roomType === "会议室") {
          proxyData.roomType = "会议室";
          proxyData.popList = JSON.parse(JSON.stringify(proxyData.listSen));
          proxyData.headerInfo.headImg = parseImgUrl(
            "page-officehome",
            "office_normal_2.png"
          );
          // 获取会议室场
          proxyData.getPageMeetingSceneHttp();
        } else if (roomType === "开放") {
          // debugger
          proxyData.roomType = "开放";
          proxyData.headerInfo.headImg = parseImgUrl(
            "page-officehome",
            "office_publi_2.png"
          );
        } else {
          proxyData.roomType = "其它";
          proxyData.headerInfo.headImg = parseImgUrl(
            "page-officehome",
            "office_publi_2.png"
          );
        }
        if (roomType !== "会议室") {
          proxyData.timerSpaceInfo();
        }
      },
      /**
       * 检查用户可使用的权限
       */
      checkUserSpace() {
        let flag: any = false;
        // let flag: any = true
        for (let i = 0; i < proxyData.userSpaceInfo.length; i++) {
          if (proxyData.spaceInfo.spaceId === proxyData.userSpaceInfo[i].sp_id) {
            flag = true;
            break;
          }
        }
        proxyData.userIsControl = flag;
      },
      /**
       * 获取用户控制权限
       */
      getUserControlAuth() {
        getUserControlAuth()
          .then((res) => {
            let resData: any = res;
            if (resData.result === "success") {
              proxyData.userSpaceInfo = resData.data;
            } else {
              proxyData.userSpaceInfo = [];
            }
            proxyData.checkUserSpace();
          })
          .catch(() => {
            proxyData.userSpaceInfo = [];
            proxyData.checkUserSpace();
          });
      },
      controlMode: controlMode, // 当前空间的模式 0:自动控制 1:手动控制
      // 获取空间信息
      getSpaceInfo() {
        // const userInfo =
        const data: any = {
          criteria: {
            spaceId: proxyData.spaceInfo.spaceId,
            projectId: proxyData.userInfo.projectId,
          },
          pubname: proxyData.userInfo.pubname,
          openid: proxyData.userInfo.openid,
        };
        getSpaceInfo(data)
          .then((res) => {
            const content: any = res?.content ?? [];
            console.log("timer===", 1);
            if (content[0]) {
              proxyData.officeData = content[0];
            }
            proxyData.officeData = proxyData.officeData ? proxyData.officeData : {};
            if (proxyData.officeData.localName) {
              proxyData.localName = proxyData.officeData.localName;
            }
            if (proxyData.officeData.temperature) {
              proxyData.officeData.temperature =
                proxyData.officeData.temperature.toFixed(1) * 1;
            }
            // proxyData.controlMode = proxyData.officeData.controlMode || 1;
            proxyData.controlMode = proxyData.officeData.controlMode || 0;
            // 环境数据
            proxyData.checkSpaceType(proxyData.officeData.roomFuncType);
            proxyData.formatSpaceInfo(content);
            proxyData.getPadImg();
            // proxyData.setPageheight()
            proxyData.loadinngEnd();
            // 获取pad的背景图
          })
          .catch(() => {
            proxyData.loadinngEnd();
            proxyData.timerSpaceInfo(2000);
          });
      },
      // 定时调获取空调接口
      getSpaceModeTimer() {
        proxyData.spaceModelTimer = setTimeout(() => {
          proxyData.getSpaceMode();
          clearTimeout(proxyData.spaceModelTimer);
          proxyData.spaceModelTimer = null;
        }, 1000);
      },
      // 获取运行模式
      getSpaceMode() {
        getSpaceMode()
          .then((res) => {
            proxyData.getSpaceModeTimer();
          })
          .catch(() => {
            proxyData.getSpaceModeTimer();
          });
      },
      // 定时调用获取温度
      getSpaceTempTimer() {
        proxyData.spaceTempTimer = setTimeout(() => {
          clearTimeout(proxyData.spaceTempTimer);
          proxyData.spaceTempTimer = null;
          proxyData.getSpaceTemp();
        });
      },
      // 获取空间空调设备温度
      getSpaceTemp() {
        getSpaceTemp()
          .then((res) => {
            proxyData.getSpaceTempTimer();
          })
          .catch(() => {
            proxyData.getSpaceTempTimer();
          });
      },
      // 设置环境参数的背景颜色
      setEnvBg(key: any, text: any) {
        let bgColor: any = "";
        if (key === "humidity") {
          // 湿度
          if (text === "干燥" || text === "潮湿") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "hcho") {
          // 甲醛
          if (text === "超标") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "co2") {
          if (text === "略高") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0.5) 0%, #CD0B00 100%)";
          } else if (text === "超标") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        } else if (key === "pm25") {
          if (text === "良") {
            // bgColor =
            //   "linear-gradient(180deg, rgba(205, 11, 0, 0.2) 0%, #CD0B00 100%)";
            bgColor = "";
          } else if (text === "轻度污染") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0.2) 0%, #CD0B00 100%)";
          } else if (text === "中度污染") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0.5) 0%, #CD0B00 100%)";
          } else if (text === "重度污染") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 0.8) 0%, #CD0B00 100%)";
          } else if (text === "严重污染") {
            bgColor = "linear-gradient(180deg, rgba(205, 11, 0, 1) 0%, #CD0B00 100%)";
          } else {
            bgColor = "";
          }
        }
        return bgColor;
      },
      // 格式化环境数据(处理环境数据展示的级别)
      checkLevel(value: string, name: string) {
        let levelTxt: any = "";
        let valueNum: any = parseFloat(value);
        if (valueNum) {
          if (name == "humidity") {
            if (valueNum < 30) {
              levelTxt = "干燥";
            } else if (valueNum > 70) {
              levelTxt = "潮湿";
            } else {
              levelTxt = "健康";
            }
          } else if (name == "co2") {
            if (valueNum <= 800) {
              levelTxt = "健康";
            } else if (valueNum > 800 && valueNum <= 1000) {
              levelTxt = "达标";
            } else if (valueNum > 1000 && valueNum <= 1500) {
              levelTxt = "略高";
            } else if (valueNum > 1500) {
              levelTxt = "超标";
            }
          }
        } else if (name == "pm25") {
          if (valueNum >= 0 && valueNum < 35) {
            levelTxt = "健康";
          } else if (valueNum >= 35 && valueNum <= 75) {
            levelTxt = "良";
          } else if (valueNum > 75 && valueNum <= 115) {
            levelTxt = "轻度污染";
          } else if (valueNum > 115 && valueNum <= 150) {
            levelTxt = "中度污染";
          } else if (valueNum > 150 && valueNum <= 250) {
            levelTxt = "重度污染";
          } else if (valueNum > 250) {
            levelTxt = "严重污染";
          }
        } else if (name == "hcho") {
          if (valueNum <= 0.1) {
            levelTxt = "健康";
          } else {
            levelTxt = "超标";
          }
        }

        // let level = sortArr.findIndex((item) => item === value);
        // let levelTxt = objList[name].text[level];
        // console.log("sortArr==", sortArr);

        let bgColor: any = proxyData.setEnvBg(name, levelTxt);
        return {
          levelTxt,
          bgColor,
        };
      },
      /**
       *设置当前页面的高度
       */
      setPageheight() {
        nextTick(() => {
          document.getElementById("envBox").style.height =
            document.getElementById("envBox").offsetHeight + "px";
        });
      },
      // 修改环境数据
      changeEnvValue(item: any) {
        if (item.co2 > 1000) {
          item.co2 = 1000;
        } else if (item.pm25 > 75) {
          item.pm25 = 75;
        } else if (item.hcho > 0.1) {
          item.hcho = 0.1;
        } else if (item.humidity < 30) {
          item.humidity = 30;
        } else if (item.humidity > 70) {
          item.humidity = 70;
        }
      },
      // 空间信息数据格式化
      formatSpaceInfo(content: any = []) {
        for (let i = 0; i < content.length; i++) {
          let item = content[i];
          // 四川大厦暂时把超标值修改为正确值
          if (proxyData.userInfo.projectId === "Pj1101020007") {
            proxyData.changeEnvValue(item);
          }
          if (item.co2 || item.co2 == 0) {
            let obj: any = proxyData.checkLevel(item.co2, "co2");
            // proxyData.envlist[1].level = obj.levelTxt;
            proxyData.envlist[1].bgColor = obj.bgColor;
            proxyData.envlist[1].num = item.co2;
          } else {
            // proxyData.envlist[1].level = "--";
            proxyData.envlist[1].num = "--";
            proxyData.envlist[1].bgColor = "";
          }
          if (item.pm25 || item.pm25 === 0) {
            let obj: any = proxyData.checkLevel(item.pm25, "pm25");
            // proxyData.envlist[2].level = obj.levelTxt;
            proxyData.envlist[2].bgColor = obj.bgColor;
            proxyData.envlist[2].num = item.pm25;
          } else {
            // proxyData.envlist[2].level = "--";
            proxyData.envlist[2].num = "--";
            proxyData.envlist[2].bgColor = "";
          }
          if (item.hcho || item.hcho == 0) {
            let obj: any = proxyData.checkLevel(item.hcho, "hcho");
            // proxyData.envlist[0].level = obj.levelTxt;
            proxyData.envlist[0].bgColor = obj.bgColor;
            proxyData.envlist[0].num = item.hcho.toFixed(2);
          } else {
            // proxyData.envlist[0].level = "--";
            proxyData.envlist[0].num = "--";
            proxyData.envlist[0].bgColor = "";
          }
          if (item.humidity || item.humidity == 0) {
            let obj: any = proxyData.checkLevel(item.humidity, "humidity");
            // proxyData.envlist[3].level = obj.levelTxt;
            proxyData.envlist[3].bgColor = obj.bgColor;
            proxyData.envlist[3].num = item.humidity.toFixed(0);
          } else {
            // proxyData.envlist[3].level = "--";
            proxyData.envlist[3].num = "--";
            proxyData.envlist[3].bgColor = "";
          }
        }
      },
      activeType: "", // 当前会议室场景
      // 获取会议室场景（如果是会议室的才调此接口）
      getPageMeetingSceneHttp() {
        const params: { spaceId: string } = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        getMeetingSceneHttp(params)
          .then((res) => {
            let resSen: string = res?.content ?? "";
            if (resSen === "OFFWORK") {
              resSen = "ADJOURNMENT";
            }
            proxyData.activeType = resSen;
            // 定时调空间数据
            proxyData.timerSpaceInfo();
          })
          .catch(() => {
            proxyData.timerSpaceInfo(2000);
          });
      },
      // 切换场景的状态
      secenaroStatus: secenaroStatus,
      // 设置场景名称
      setHeadScene(item: any, flag: any) {
        proxyData.activeType = item.sceneType;
        if (flag == 1) {
          proxyData.isShowMetting = true;
        }
        proxyData.secenaroStatus = {
          localName: proxyData.officeData.localName,
          loading: item.loading,
          lodingText: item.lodingText,
          sceneName: item.sceneName,
        };
      },
      closeDailog() {
        proxyData.isShowMetting = false;
      },
      isShowDetail: false,
      detailQuery: detailQuery,
      handleDetail(item: any) {
        proxyData.isShowDetail = true;
        proxyData.detailQuery.funcid = item.funcid;
        proxyData.detailQuery.spaceId = proxyData.spaceInfo.spaceId;
        // router.push({
        //   path: '/envmonitor-detail',
        //   query: {
        //     funcid: item.funcid,
        //     spaceId: proxyData.spaceInfo.spaceId
        //   }
        // })
      },
      // 获取空调设备温度
      updateAirTemp(airTemp: any) {
        proxyData.airTemp = airTemp;
        proxyData.setHeadSceneAirTemp();
      },
      // 设置场景切换时候的温度
      setHeadSceneAirTemp() {
        if (
          proxyData.sceneDetail &&
          proxyData.sceneDetail.textObj &&
          proxyData.sceneDetail.textObj.length
        ) {
          if (
            proxyData.airTemp &&
            (proxyData.sceneDetail.code == "DISCUSSING" ||
              proxyData.sceneDetail.code == "PROJECTING")
          ) {
            for (let i = 0; i < proxyData.sceneDetail.textObj.length; i++) {
              let item: any = proxyData.sceneDetail.textObj;
              if (item.type === "air") {
                item.text = item.text + "，目标温度" + proxyData.airTemp;
              }
            }
          }
        }
      },
      // 提前关闭
      handlePreClose() {
        let endDate: any = formatDate();
        let endTime: any = getHours();
        if (endTime < 10) {
          endTime = `0${endTime}`;
        }
        const params = {
          projectId: proxyData.projectId,
          objectId: proxyData.spaceInfo.spaceId, // 空间ID
          endDate: endDate, // 结束日期  "20210310",
          endTime: endTime + "0000", // 结束时间 "090000"
          type: 3, // 0 预约加班，1 取消，2 我来了/确定, 3 我走了
        };
        changeSetTimeHttp(params).then((res) => {
          const resData: any = res;
          if (resData.result == "success") {
            proxyData.changeLampStatus();
          }
        });
      },
      // 提前关闭更改状态
      changeLampStatus() {
        proxyData.showWorkOff = false;
        proxyData.headerInfo.tipText = "选择工作结束时间";
        proxyData.headerInfo.tipTextSwatch = true;
      },
      clearTimeoutValEquiment() {
        clearTimeout(proxyData.equimentsTimer);
        proxyData.equimentsTimer = null;
      },
      equimentsTimer: equimentsTimer,
      // 定时查空间下面的展示设备
      setEquimentsTimer(len: any = 3600000) {
        proxyData.equimentsTimer = setTimeout(() => {
          proxyData.getEquipments();
          proxyData.clearTimeoutValEquiment();
        }, len);
      },
      // 获取空间下的设备信息
      getEquipments() {
        let params: { spaceId: string } = {
          spaceId: proxyData.spaceInfo.spaceId,
          // projectId: proxyData.projectId,
        };
        let queryParams: any = setQueryConfig(params);
        getSpaceEquipType(queryParams)
          .then((res) => {
            let resData: any = res;
            if (resData.result === "success") {
              let data: any = resData?.data ?? [];
              for (let key in proxyData.spaceExistenceDevice) {
                let flag: any = false;
                for (let i = 0; i < data.length; i++) {
                  if (key == data[i]) {
                    flag = true;
                  }
                }
                proxyData.spaceExistenceDevice[key] = flag;
              }
              // app端底部的导航判断
              if (proxyData.spaceExistenceDevice.light) {
                proxyData.navList[1].noShow = true;
              } else {
                proxyData.navList[1].noShow = false;
              }
              if (proxyData.spaceExistenceDevice.curtain) {
                proxyData.navList[2].noShow = true;
              } else {
                proxyData.navList[2].noShow = false;
              }
            }
            proxyData.setEquimentsTimer();
          })
          .catch(() => {
            // if (!proxyData.equimentsTimer) {
            //   proxyData.setEquimentsTimer();
            // }
            proxyData.setEquimentsTimer(2000);
          });
      },
      // 时间格式转换
      hourMiChange(tempStr: number) {
        // 转为时间 19.3 - 19:30 19.41-19:41 19-19:00
        let str = tempStr.toString();
        let newStr = "";
        let dLen = str.length > 2 ? str.split(".")[1].length : str;
        if (dLen === 1) {
          str = str.replace(".", "") + "0";
          newStr = str.slice(0, 2) + ":" + str.slice(2);
        } else if (dLen === 2) {
          str = str.replace(".", "");
          newStr = str.slice(0, 2) + ":" + str.slice(2);
        } else {
          newStr = str + ":00";
        }
        return newStr;
      },
      // 点击切换会议室场景
      handlePopup(type: string = "scenario") {
        if (proxyData.userIsControl) {
          proxyData.showScenario = !proxyData.showScenario;
          if (proxyData.showScenario) {
            proxyData.deviceIcon = "arrow-down";
          } else {
            proxyData.deviceIcon = "arrow";
          }
          proxyData.popupType = type;
        } else {
          Toast("您没有当前空间的控制权限！");
        }
      },
      // 切换空间
      triggerCheckSpace() {
        let ele: any = document.getElementById("envContent");
        let houseEle: any = document.getElementById("houseDes");
        let houseHeight: any = houseEle.offsetHeight;
        proxyData.opacityV = 0;
        proxyData.mapOpacity = 1;
        ele.scrollTop = 0;
        let top: any = 0;
        let interval: any = setInterval(() => {
          top = top + 15;
          if (top < screenHeight - houseHeight) {
            ele.style.top = top + "px";
          } else {
            ele.style.top = screenHeight - houseHeight + "px";
            clearInterval(interval);
          }
        }, 10);
        proxyData.hideTopImg = true;
        proxyData.isBottom = true;
      },
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中...",
        });
      },
      /**
       * 结束
       */
      loadinngEnd() {
        Toast.clear();
      },
      // 清除定时器
      clearTimerSpaceInfo() {
        clearTimeout(proxyData.spaceTimer);
        proxyData.spaceTimer = null;
      },
      // 定时调空间
      timerSpaceInfo(timer: any = 15000) {
        proxyData.spaceTimer = setTimeout(() => {
          proxyData.clearTimerSpaceInfo();
          proxyData.getSpaceInfo();
        }, timer);
      },
      isWork: false,
      isMetting: false,
      // 判断对应的办公室的场景展示
      checkIsSpaceScene() {
        let flag: any = false;
        proxyData.scenarioArr.map((item: any) => {
          if (item.sceneType === "OVERTIME") {
            proxyData.isWork = true;
            flag = true;
          }
        });
        if (!flag) {
          proxyData.isWork = false;
        }
        if (
          (proxyData.scenarioArr && proxyData.scenarioArr.length == 0) ||
          !proxyData.scenarioArr
        ) {
          proxyData.isWork = false;
        }
        if (!proxyData.isWork) {
          proxyData.forceOverTimeFlag = false;
        }
      },
      /**
       * 获取场景列表
       */
      scenarioArr: scenarioArr,
      sceneConfigTimer: sceneConfigTimer,
      clearSceneConfigTimer() {
        clearTimeout(proxyData.sceneConfigTimer);
      },
      // 定时获取场景的配置
      querySpaceSceneConfigTimer(timer: any = 600000) {
        proxyData.clearSceneConfigTimer();
        proxyData.sceneConfigTimer = setTimeout(() => {
          proxyData.querySpaceSceneConfig();
          proxyData.clearSceneConfigTimer();
        }, timer);
      },
      // 场景数据
      querySpaceSceneConfig() {
        let params: any = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        // debugger;
        querySpaceSceneConfig(str)
          .then((res) => {
            let resData: any = res;
            let data: any = resData?.data ?? [];
            proxyData.scenarioArr = data;
            proxyData.checkIsSpaceScene();
            proxyData.querySpaceSceneConfigTimer();
          })
          .catch((error: any) => {
            proxyData.querySpaceSceneConfigTimer(2000);
          });
      },
      /**
       *查询空间加班记录
       */
      workkArr: workkArr,
      secenTimer: secenTimer,
      // 清除查询加班记录的定时器
      clearSecenTimer() {
        clearTimeout(proxyData.secenTimer);
        proxyData.secenTimer = null;
      },
      // 清除定时器
      clearEquipTimer() {
        clearTimeout(proxyData.equipTimer);
        proxyData.equipTimer = null;
      },
      // 定时器
      getSpaceEquipListTimer(timerLen: any = 15000) {
        proxyData.clearEquipTimer();
        proxyData.equipTimer = setTimeout(() => {
          proxyData.getSpaceEquipList();
          proxyData.clearEquipTimer();
        }, timerLen);
      },
      // 查询空间下面受控的设备
      getSpaceEquipList() {
        let params: any = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        getSpaceEquipList(str)
          .then((res: any) => {
            let data: any = res.data || [];
            proxyData.spaceEquipList = data;
            proxyData.checkDeviceShowWork(); // 判断手动控制的设备是否要开启手动控制功能
            proxyData.getSpaceEquipListTimer();
          })
          .catch((error: any) => {
            proxyData.getSpaceEquipListTimer(2000);
          });
      },
      // 定时查空间的加班记录
      queryCustomAndScenceTimer(timer: any = 15000) {
        let nowTime: any = getRelNowTime();
        if (timer == 15000 && nowTime < "070000" && nowTime > "200000") {
          timer = 300000;
        }
        proxyData.clearSecenTimer();
        proxyData.secenTimer = setTimeout(() => {
          proxyData.queryCustomAndScence();
          proxyData.clearSecenTimer();
        }, timer);
      },
      // 定时查空间的加班记录
      queryCustomAndScence(type: any = 1) {
        let params: any = {
          spaceId: proxyData.spaceInfo.spaceId,
        };
        let str: any = setQueryConfig(params);
        queryCustomAndScence(str)
          .then((res) => {
            let resData: any = res?.data ?? [];

            for (let i = 0; i < resData.length; i++) {
              let customSceneList: any = resData[i]?.customSceneList ?? [];
              customSceneList = customSceneList.sort(proxyData.compare);
            }
            // 手动控制的情况下走新的服务定制
            proxyData.formateManualWorkTime(resData);
            proxyData.workkArr = resData || [];
            if (type == 1) {
              // 需要定时调用
              proxyData.queryCustomAndScenceTimer();
            }
          })
          .catch(() => {
            if (type == 1) {
              // 需要定时调用
              proxyData.queryCustomAndScenceTimer(2000);
            }
          });
      },
      // 数组排序
      compare(obj1: any, obj2: any) {
        var val1 = obj1.startTime;
        var val2 = obj2.startTime;
        if (val1 < val2) {
          return -1;
        } else if (val1 > val2) {
          return 1;
        } else {
          return 0;
        }
      },
      // 格式化当前页面展示的时间
      // 手动控制加班处理时间段拼接的逻辑
      formateManualWorkTime(paramsData: any = []) {
        // debugger
        let data: any = paramsData || [];
        for (let i = 0; i < data.length; i++) {
          let item: any = data[i];
          let spaceCustomContentList: any = data[i].spaceCustomContentList || [];
          if (spaceCustomContentList && spaceCustomContentList.length) {
            spaceCustomContentList = spaceCustomContentList.sort(proxyData.compare);
            item.spaceCustomContentList = spaceCustomContentList;
            let nowTime: any = getRelNowTime();
            let nowDate: any = formatDate("YYYY-MM-DD");
            let date: any = formatDateStr(data[i].date);
            item.cusStartTime = spaceCustomContentList[0]
              ? spaceCustomContentList[0].startTime
              : "";
            item.cusEndTime = spaceCustomContentList[0]
              ? spaceCustomContentList[0].endTime
              : "";
            if (nowDate == date) {
              // 当前时间
              item.cusStartTime = "";
              item.cusEndTime = "";
            }
            for (let j = 0; j < spaceCustomContentList.length; j++) {
              if (item.cusStartTime && item.cusEndTime) {
                if (item.cusEndTime + 1 === spaceCustomContentList[j].startTime) {
                  item.cusEndTime = spaceCustomContentList[j].endTime;
                }
              } else {
                if (
                  nowTime >= spaceCustomContentList[j].startTime &&
                  nowTime <= spaceCustomContentList[j].endTime
                ) {
                  item.cusStartTime = spaceCustomContentList[j].startTime;
                  item.cusEndTime = spaceCustomContentList[j].endTime;
                }
              }
            }
            if (!item.cusStartTime) {
              item.cusStartTime = spaceCustomContentList[0]
                ? spaceCustomContentList[0].startTime
                : "";
              item.cusEndTime = spaceCustomContentList[0]
                ? spaceCustomContentList[0].endTime
                : "";
            }
          }
        }
      },
      /**
       * 空间相关的接口
       */
      init() {
        proxyData.padNumber = 0;
        // proxyData.roomType = "";
        // 获取场景配置
        // 获取空间下展示的那些设备类(窗帘,灯,空调))
        proxyData.getEquipments();
        // 动态获取场景配置
        proxyData.querySpaceSceneConfig();
        // 获取空间下受控设备
        proxyData.getSpaceEquipList();
        proxyData.getSpaceInfo();
        // 查询加班记录
        proxyData.queryCustomAndScenceTimer(0);
      },
      /**
       *删除参数
       */
      updatePageUrl() {
        let history: any = window.history;
        let url: any = window.location.origin + window.location.pathname;
        history.replaceState("", "", url);
      },
      // 平板当前空间
      spaceData: spaceData,
      copySpaceData: spaceData,
      floorId: "",
      buildingId: "",
      // 获取pad当前绑定的空间
      queryWorkSpace() {
        let params: any = {
          criteria: {
            //类型：Object  必有字段  备注：无
            projectId: proxyData.userInfo.projectId,
            spaceName: "",
            macAddress: proxyData.userInfo.mac, //类型：String  必有字段  备注：mac地址
          },
          orders: [
            //类型：Array  必有字段  备注：无
            {
              //类型：Object  必有字段  备注：无
              column: "isMajorSpace", //类型：String  必有字段  备注：无
              asc: false, //类型：Boolean  必有字段  备注：无
            },
          ],
        };
        queryWorkSpace(params).then((res) => {
          // debugger
          let resData: any = res;
          if (resData.result == "success") {
            proxyData.spaceData = resData?.content ?? [];
            // proxyData.copySpaceData = resData?.content ?? [];
          } else {
            proxyData.spaceData = [];
          }
          proxyData.spaceData.map((item: any) => {
            if (proxyData.spaceInfo.spaceId === item.spaceId) {
              item.active = true;
              proxyData.spaceInfo = item;
            } else {
              item.active = false;
            }
            // if (item.isMajorSpace) {
            //   item.active = true;
            //   proxyData.spaceInfo = item;
            // }
          });
          proxyData.copySpaceData = JSON.parse(JSON.stringify(proxyData.spaceData));
        });
      },
      // 重置空间状态
      resetSpaceStatus() {
        /**
         *重新获取设备的时候，先初始化数据
         */
        proxyData.spaceExistenceDevice = {
          curtain: false,
          light: true,
          airConditioner: false,
          bodySensor: false,
          socket: false,
          floorHeating: false,
        };
        proxyData.spaceData.map((item: any) => {
          item.active = false;
        });
        // proxyData.controlMode = ''; // 模式变成自动的
        proxyData.controlMode = "";
        proxyData.isWork = false;
        proxyData.roomType = "";
        proxyData.officeData.temperature = "";
        proxyData.seviceEquipmentList = [];
        proxyData.workkArr = [];
        //  切换空间的时候把加班按钮平板
        proxyData.setForceOverTimeFlag(false);
      },
      // 更多空间
      isShowMap: false,
      defaultSpace: spaceInfo,
      moreSpace() {
        proxyData.isShowMap = true;
        proxyData.defaultSpace = proxyData.spaceInfo;
      },
      // 数组元素更换位置
      elChangeExForArray(item: any) {
        let index1: any = 1;
        let index2: any = 0;
        for (let i = 0; i < proxyData.spaceData.length; i++) {
          if (item.spaceId === proxyData.spaceData[i].spaceId) {
            proxyData.spaceData[i].active = true;
            if (i > 2) {
              index2 = i;
              break;
            }
          }
        }
        if (index2) {
          let temp = proxyData.spaceData[index1];
          proxyData.spaceData[index1] = proxyData.spaceData[index2];
          proxyData.spaceData[index2] = temp;
        }
      },
      refreshSpace() {
        console.log("被点击了--");
        let space: any = {};
        proxyData.spaceData.map((item: any) => {
          if (item.spaceId === proxyData.spaceInfo.spaceId) {
            space = item;
          }
        });
        proxyData.changeSpace(space, 2);
      },
      // 切换空间
      changeSpace(item: any, type: any = 0) {
        if (proxyData.spaceInfo.spaceId == item.spaceId && type !== 2) {
          return;
        }
        //清除空间下所有的定时器
        proxyData.clearAll();
        // 重置当前选中空间的状态
        proxyData.resetSpaceStatus();
        proxyData.spaceInfo = item;
        if (type === 1) {
          proxyData.defaultSpace = item;
          proxyData.elChangeExForArray(item);
        }
        item.active = true;
        proxyData.init();
      },
      timeOutEvent: timeOutEvent,
      touchNumber: 0,
      gtouchstart(e: any) {
        proxyData.touchNumber = 0;
        proxyData.timeOutEvent = setTimeout(function () {
          proxyData.touchNumber = 1;
          proxyData.longPress();
        }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
        return false;
      },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
      showDeleteButton() {
        console.log("dddd-");
        clearInterval(proxyData.touchInterval);
        proxyData.touchInterval = null;
        clearTimeout(proxyData.timeOutEvent); //清除定时器
        if (proxyData.timeOutEvent != 0) {
        }
        return false;
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gtouchmove() {
        clearTimeout(this.timeOutEvent); //清除定时器
        proxyData.timeOutEvent = 0;
      },
      touchInterval: touchInterval,
      //真正长按后应该执行的内容
      longPress() {
        proxyData.timeOutEvent = 0;
        proxyData.touchInterval = setInterval(() => {
          proxyData.touchNumber++;
          if (proxyData.touchNumber === 6) {
            clearInterval(proxyData.touchInterval);
            proxyData.touchInterval = null;
            router.push({
              name: "home",
              query: { mac: proxyData.userInfo.mac, type: "logoOut" },
            });
          }
        }, 1000);
        //执行长按要执行的内容，如弹出菜单
        // console.log("长按");
      },
      // 定时器清除
      clearAll() {
        proxyData.clearTimerSpaceInfo();
        proxyData.clearSceneConfigTimer();
        proxyData.clearSecenTimer();
        proxyData.clearEquipTimer();
        proxyData.clearTimeoutValEquiment();
      },
      contantDetail: contantDetail,
      cusServiceTimer: cusServiceTimer,
      queryCustomerserviceTimer(timer: any = 3600000) {
        proxyData.cusServiceTimer = setTimeout(() => {
          clearTimeout(proxyData.cusServiceTimer);
          proxyData.queryCustomerservice();
        }, timer);
      },
      // 查询联系方式
      queryCustomerservice() {
        let params: any = {
          criteria: { projectId: proxyData.userInfo.projectId },
        };
        queryCustomerservice(params)
          .then((res) => {
            let resData: any = res;
            let content: any = resData?.content ?? [];
            proxyData.contantDetail = content[0];
            proxyData.queryCustomerserviceTimer();
          })
          .catch(() => {
            proxyData.queryCustomerserviceTimer();
          });
      },
      dateInter: dateInter,
      setDateTime() {
        proxyData.dateInter = setInterval(() => {
          proxyData.nowDate = formatDate("YYYY.MM.DD HH:mm");
          proxyData.nowWeek = getNowWeek();
        }, 60000);
      },
    });
    onBeforeUnmount(() => {
      proxyData.clearAll();
      clearInterval(proxyData.dateInter);
      clearTimeout(proxyData.cusServiceTimer);
      clearTimeout(proxyData.weatherTimer);
    });
    onMounted(() => {
      let spaceId: any = route.query.spaceId;
      proxyData.spaceInfo = {
        spaceId: spaceId,
      };
      proxyData.defaultSpace = {
        spaceId: spaceId,
      };
      proxyData.setDateTime();
      proxyData.init();
      // 获取当前平板绑定的空间
      proxyData.queryWorkSpace();
      proxyData.getWeather();
      proxyData.queryCustomerservice();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.5vh 25px 0 25px;
  font-size: 0;
  background-image: linear-gradient(0deg, rgba(69, 33, 0, 0.2), rgba(69, 33, 0, 0.2));
  background-size: 100% 100%;
  overflow: hidden;

  .main-left {
    // padding-left: 20px;
    display: inline-block;
    //width: 54%;

    .left-top {
      width: 98%;
      // margin-top: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      .logo-box {
        display: inline-block;
        vertical-align: middle;
        // width: 60px;
        height: 20px;
      }
      .left-time {
        span {
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 20px;
          color: #ffffff;
        }
      }
      .logo-icon {
        display: inline-block;
        vertical-align: middle;
        // width: 60px;
        max-width: 60px;
        height: 20px;
        margin-right: 5px;
      }
      div {
        vertical-align: middle;
        display: inline-block;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #ffffff;
        span {
          display: inline-block;
          vertical-align: middle;
          &:nth-child(1) {
            padding: 10px;
          }
        }
      }
      .weather {
        padding-left: 22px;
        line-height: 24px;
        // font-size: 0;
        // padding-right: 5px;
        .weather-icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          padding-top: 2px;
        }
      }
      .weixiin {
        margin-left: 20px;
        img {
          margin-right: 5px;
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .left-space {
      padding-top: 12vh;
      padding-right: 30px;
      .text {
        position: relative;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        div {
          display: inline-block;
          vertical-align: middle;
          &:nth-child(1) {
            font-style: normal;
            font-weight: 500;
            font-size: 40px;
            line-height: 58px;
            color: #ffffff;
          }
          &:nth-child(2) {
            position: absolute;
            bottom: 12px;
            width: 70px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            margin-left: 10px;
            background: #edf1f5;
            border-radius: 10px;
            img {
              display: inline-block;
              vertical-align: middle;
              width: 15px;
              height: 15px;
              // margin-top: 4px;
            }
            span {
              display: inline-block;
              vertical-align: middle;
              margin-left: 4px;
              font-weight: 400;
              font-size: 12px;
              line-height: 15px;
              color: #8b949e;
            }
          }
        }
      }
    }
    .space-info {
      // padding-top: 48px;
      padding-top: 6vh;
      .space-temp {
        padding-bottom: 13px;
        // border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        img {
          display: inline-block;
          vertical-align: middle;
          width: 22px;
          height: 40px;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          padding-left: 14px;
        }
        .temp-text {
          font-family: "Noto Sans SC";
          font-style: normal;
          font-weight: 500;
          font-size: 32px;
          line-height: 46px;
          text-align: center;
          color: #ffffff;
          padding-left: 13px;
        }
        .temp-num {
          position: relative;
          padding-left: 24px;
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 60px;
          line-height: 73px;
          color: #ffffff;
          sup {
            position: absolute;
            top: 0;
            font-family: "Noto Sans SC";
            font-style: normal;
            font-weight: 500;
            font-size: 13px;
            line-height: 19px;
            color: #ffffff;
          }
        }
      }
    }
    .space-env {
      display: flex;
      // padding-top: 20px;
      padding-top: 5vh;
      justify-content: space-between;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      .env-item {
        padding-top: 8px;
        height: 88px;
        &:nth-child(1) {
          text-align: left;
          width: 129px;
        }
        &:nth-child(2) {
          // text-align: center;
          padding-left: 20px;
          width: 129px;
        }
        &:nth-child(3) {
          // text-align: center;
          padding-left: 20px;
          width: 125px;
        }
        &:nth-child(4) {
          // text-align: center;
          padding-left: 20px;
          width: 100px;
        }
        div {
          img {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
          span {
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            line-height: 23px;
            text-align: center;
            color: #ffffff;
          }
          &:nth-child(2) {
            padding-top: 10px;
            font-family: "Persagy";
            font-style: normal;
            font-weight: 400;
            font-size: 32px;
            line-height: 39px;
            color: #ffffff;
            sup {
              font-family: "Noto Sans SC";
              font-style: normal;
              font-weight: 500;
              font-size: 13px;
              line-height: 19px;
            }
          }
        }
        .env-text {
          position: relative;
          width: 100%;
          // text-align: left;
          sup {
            position: absolute;
            // right: -5px;
            top: 10px;
          }
        }
      }
      .env-item-radius {
        border-radius: 25px;
      }
      // 暂时去掉,不然直接能看到超标
      .env-color {
        // background: linear-gradient(
        //   180deg,
        //   rgba(205, 11, 0, 0) 0%,
        //   #cd0b00 100%
        // );
        // opacity: 0.8;
        // border-radius: 25px;
      }
    }
  }

  .main-right {
    //width: 45%;
    // width: 330px;
    padding-bottom: 20px;
    display: inline-block;
    overflow: auto;

    .work-btn {
      width: 100%;
      height: 98px;
      font-size: 14px;
      text-align: left;
    }
  }

  .fotter {
    position: fixed;
    font-size: 0;
    left: 0;
    bottom: 0;
    z-index: 666;
    .fotter-item {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      // width: 195px;
      width: 193px;
      height: 40px;
      font-size: 0;
      img {
        width: 100%;
        // height: 100%;
        height: 40px;
      }
      span {
        position: absolute;
        display: inline-block;
        width: 128px;
        height: 18px;
        top: 12px;
        // top: 50%;
        // transform: translateY(-48%);
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #c3c7cb;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      &:nth-child(1) {
        left: 0;
        width: 160px;
        z-index: 333;
        span {
          left: 16px;
        }
      }
      &:nth-child(2) {
        margin-left: -33px;
        z-index: 222;
        span {
          right: 16px;
        }
      }
      &:nth-child(3) {
        margin-left: -33px;
        z-index: 111;
        span {
          right: 16px;
        }
      }
    }
    .fotter-item-end {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 93px;
      height: 40px;
      margin-left: -30px;
      text-align: center;
      z-index: 1;
      img {
        width: 100%;
        height: 40px;
      }
      span {
        position: absolute;
        // left: 50%;
        top: 50%;
        right: 28px;
        transform: translateY(-50%);
        font-family: "Noto Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #c3c7cb;
      }
    }
    .fotter-item-active {
      z-index: 999;
      span {
        color: #1f2429;
      }
    }
  }
}
</style>
<style lang="scss">
.map-popup {
  background: $elBg;
}
</style>
