<style lang="less">
.page-intelligent-control {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.page-intelligent-control .map-contanier {
  height: 100%;
  width: 100%;
  padding-bottom: 176rpx;
  background: #ebeef5;
  box-sizing: border-box;
}

.page-intelligent-control .location-wrapper {
  position: absolute;
  bottom: 36rpx;
  right: 32rpx;
}

.page-intelligent-control .location-wrapper .search-btn {
  margin-bottom: 16rpx;
  width: 96rpx;
  height: 96rpx;
  display: block;
  background: #ffffff;
  border-radius: 16rpx;
}

.page-intelligent-control .location-wrapper.expand {
  bottom: 658rpx;
}

movable-area {
  width: 100%;
  height: 100%;
  position: relative;
}

movable-view {
  color: #fff;
}

.room-item {
  position: absolute;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 12rpx;
  transform-origin: center;
  z-index: 1;
  &.isAbnormity {
    padding: 0;
  }
}

.room-item.selected {
  // border: 2px solid rgba(77, 148, 255, 0.8);
}
.room-item.transparent {
  box-shadow: none;
}
.room-item.selected.transparent {
  border: 0;
}

.room-item.clickDisabled {
  border: 2px solid #dfe3ed;
  box-sizing: border-box;
  background-repeat: repeat;
}

.room-item .bg-disabled {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.room-item .icon {
  width: 72rpx;
  height: 40rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.room-item .circle {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.room-item .door {
  position: absolute;
  width: 48rpx;
  height: 24rpx;
}

.room-item .text {
  font-weight: 600;
  font-size: 20rpx;
  line-height: 24rpx;
  text-align: center;
  color: #8995ba;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(32rpx);
  padding: 0 16rpx;
  box-sizing: border-box;
  word-break: break-all;
}
.area-items-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
}

.selected-icon {
  height: 88rpx;
  width: 144rpx;
  position: absolute;
  z-index: 9999;
  transform-origin: 36px 54px;//偏移量决定的
}

.room-item.selected .text {
  font-weight: 600;
  font-size: 24rpx;
  line-height: 24rpx;
  text-align: center;
  white-space: nowrap;
  color: #515a76;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: auto;
  padding: 0;
  text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  transform: translateX(-50%) translateY(-50%);
}

.room-item.selected.ConferenceRoom {
  box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.01),
    0px 0px 40px rgba(1, 1, 51, 0.03);
  border-radius: 2px;
  // border: 2px solid rgba(77, 148, 255, 0.42);
}
.office-content-abstract {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 238rpx;
  box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.05),
    0px 8rpx 30rpx rgba(0, 0, 0, 0.15);
  border-radius: 50rpx 50rpx 0px 0px;
  box-sizing: border-box;
  padding: 48rpx 48rpx 0;
  background: #ffffff;
  .title {
    font-weight: 600;
    font-size: 36rpx;
    line-height: 50rpx;
    color: #000000;
  }
  .btn-switch {
    position: absolute;
    top: 40rpx;
    right: 48rpx;
    width: 148rpx;
    height: 64rpx;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 64rpx;
    color: #000000;
    background: #ffe823;
    text-align: center;
    box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.15),
      0px 8rpx 12rpx rgba(0, 0, 0, 0.07);
    border-radius: 60rpx;
  }
}
</style>

<template>
  <div class="page-intelligent-control" v-on:click="flodFloorFun">
    <div class="map-contanier">
      <movable-area
        :style="{'height':mapParentHeight+'px','width':mapParentWidth+'px'}"
        scale-area="{{true}}"
      >
        <movable-view
          :x="x"
          :y="y"
          style="height:{{mapHeight}}px;width:{{mapWidth}}px"
          direction="all"
          out-of-bounds="{{false}}"
          bindscale="onScale"
          scale="{{true}}"
          scale-min="0.5"
          scale-max="1"
          scale-value="1"
        >
          <div class="area-items-wrapper">
            <block
              v-for="(area, index) in mapAreasInfo"
              :key="index"
              wx:if="{{area.floorId == selectedFloor}}"
            >
              <div
                @tap="selectAreaFun(area)"
                class="room-item {{area.isAbnormity? 'isAbnormity': ''}}"
                style="{{'width:'+ (area.isAbnormity? '0px;':area.width*mapScale +'px;') + 'height:'+(area.isAbnormity? '0px;':area.height*mapScale +'px;')+'left:'+area.left*mapScale+'px;'+'top:'+area.top*mapScale+'px;'+(area.isAbnormity?'': 'background-color:'+ area.backgroundColor+';'+(!area.canClick?('background-image:url(' +h5StaticPath+ 'map-icon/bg_disable.png);'): '')) + (area.isAbnormity?('border-top:' + area['borderWidth'][0]*mapScale +'px solid ' +area['borderColor'][0]+ ';' + 'border-right:' + area['borderWidth'][1]*mapScale+'px solid ' + area['borderColor'][1] +';' +'border-bottom:' + area['borderWidth'][2]*mapScale +'px solid ' +area['borderColor'][2] + ';' + 'border-left:' + area['borderWidth'][3]*mapScale +'px solid ' +area['borderColor'][3] + ';'):'')+ (area['borderRadius'] && area['borderRadius'].length? 'border-radius:' + area['borderRadius'][0]*mapScale + 'px ' + area['borderRadius'][1]*mapScale + 'px ' + area['borderRadius'][2]*mapScale + 'px ' + area['borderRadius'][3]*mapScale + 'px;': '')+(area.rotate?'transform:rotate('+area.rotate+'deg)': '')}}"
                :class="{'selected': selectArea.id === area.id, 'clickDisabled':  area.canClick !==true,'transparent': !area.backgroundColor}"
              >
                <block  wx:if="{{selectArea.id === area.id}}"></block>

                <block
                  wx:elif="{{area.width*mapScale*touchScale>24&&area.height*mapScale*touchScale>24}}"
                >
                  <image
                    wx:if="{{area.icon}}"
                    class="icon"
                    :style="{top: area.isAbnormity? ((area['borderWidth'][0]+area['borderWidth'][2])/2 - area['borderWidth'][0])*mapScale +'px' : '50%', left: area.isAbnormity? ((area['borderWidth'][1]+area['borderWidth'][3])/2 - area['borderWidth'][3])*mapScale +'px': '50%' }"
                    src="{{h5StaticPath+  'map-icon/' + area.icon}}"
                  />
                </block>
                <block
                  wx:elif="{{area.width*mapScale*touchScale>=24 || area.height*mapScale*touchScale>=24}}"
                >
                  <div
                    class="circle"
                    :style="{top: area.isAbnormity? ((area['borderWidth'][0]+area['borderWidth'][2])/2 - area['borderWidth'][0])*mapScale +'px' : '50%', left: area.isAbnormity? ((area['borderWidth'][1]+area['borderWidth'][3])/2 - area['borderWidth'][3])*mapScale +'px': '50%', 'background-color': area.circleColor }"
                  ></div>
                </block>
                <div
                  class="text"
                  :style="{top: area.isAbnormity? ((area['borderWidth'][0]+area['borderWidth'][2])/2 - area['borderWidth'][0])*mapScale +'px' : '50%', left: area.isAbnormity? ((area['borderWidth'][1]+area['borderWidth'][3])/2 - area['borderWidth'][3])*mapScale +'px': '50%', width: area.isAbnormity? area.width*mapScale+'px;': '100%', }"
                  wx:if="{{selectArea.id === area.id || (area.roomFuncType>=300 &&area.height*mapScale>80 && (area.title.length*screenScale*10 +16*screenScale)<area.width*mapScale)}}"
                >{{area.title}}</div>
                <image
                  wx:if="{{area.has_door===true && selectArea.id !== area.id}}"
                  :style="{width: area.door_width*mapScale+'px', height:area.door_height*mapScale+'px', left:}"
                  style="width:{{area.door_width*mapScale}}px;height:{{area.door_height*mapScale}}px;{{area.door_top!==''?'top:'+(area.isAbnormity?(area.door_top - area['borderWidth'][0])*mapScale+'px;': area.door_top*mapScale+'px;'):''}} {{area.door_right!==''? 'right: '+ (area.isAbnormity?(area.door_right - area['borderWidth'][1])*mapScale+'px;': area.door_right*mapScale+'px;'):''}} {{area.door_bottom!==''? 'bottom:' + (area.isAbnormity?(area.door_bottom - area['borderWidth'][2])*mapScale+'px;': area.door_bottom*mapScale+'px;'):''}} {{area.door_left!== ''?'left:' +(area.isAbnormity?(area.door_left - area['borderWidth'][3])*mapScale+'px': area.door_left*mapScale+'px;'):''}}"
                  class="door"
                  mode="scaleToFill"
                  src="{{h5StaticPath+ 'map-icon/' +area.door_icon}}"
                />
              </div>
            </block>
            <image
                  class="selected-icon"
                  wx:if="{{selectArea}}"
                  mode="scaleToFill"
                  :style="{top: selectArea.isAbnormity? ((selectArea['borderWidth'][0]+selectArea['borderWidth'][2])/2 - selectArea['borderWidth'][0])*mapScale +'px' : (selectArea.top*mapScale-54 + (selectArea.height*mapScale/2))+'px', left: selectArea.isAbnormity? ((selectArea['borderWidth'][1]+selectArea['borderWidth'][3])/2 - selectArea['borderWidth'][3])*mapScale +'px':  (selectArea.left*mapScale+(selectArea.width*mapScale/2)-36)+'px', transform: 'rotate('+(selectArea.rotate)+'deg)' }"
                  src="{{h5StaticPath + 'map-icon/' + selectArea.selectIcon}}"
                />
          </div>
        </movable-view>
        <div class="{{'location-wrapper ' + foldStatus}}">
          <image
            v-on:click="toSearchPage"
            class="search-btn"
            src="{{h5StaticPath}}icon-search-big.svg"
          />
          <!-- 博锐尚格正式环境暂不显示该入口 -->
          <location
            v-if="isShowLocationEntrance"
            @component-location-position="positionFun($event)"
          ></location>
          <floor
            :status="floorStatus"
            :floors="floors"
            selectedFloor="{{selectedFloor}}"
            @component-floor-fold="flodFloorFun"
            @component-floor-change="changeFloorFun($event)"
            @component-floor-click="toggleFloorStatus"
          ></floor>
        </div>
      </movable-area>
    </div>
    <block v-if="query.from && query.from=='officehome'">
      <div class="office-content-abstract">
        <div class="title">{{selectArea.title}}</div>
        <div class="btn-switch" v-on:click="goBack">切换</div>
      </div>
    </block>

    <control-panel
      v-else
      :pageHide="pageHide"
      :canSlide="canSlideExpanel"
      title="{{selectArea.title}}"
      spaceId="{{selectArea.id}}"
      :companyId="companyId"
      lightControl="{{selectArea.lightControl}}"
      foldStatus="{{foldStatus}}"
      @component-control-panel-fold="foldPanelFun"
      @component-control-panel-expand="expandPanelFun"
    ></control-panel>
  </div>
</template>

<script>
import wepy from '@wepy/core';
import store from '@/store';

import {
  getMapInfoHttp,
  getSpaceBytoothHttp,
} from '@/packagesEnv/api/intelligentControl';
import { checkHasUserInfo } from '@/service/user';
import utils from '@/common/utils';
import config from '@/config';
import { mapState, mapActions } from '@wepy/x';
import { saveCompanyConfig } from '@/service/companyConfig';
import { getCompanyMapData } from '@/api/home';

let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
const tarBarHeight = 72;
const panelExpandHeight = 407; // 单位为px
const panelFoldHeight = 96; // 单位为px
const switchPanelHeight = 119; // 单位为px
const standerScreenWidth = 375;
const standerMapHeight = 812 - tarBarHeight - panelFoldHeight; // 在375*812屏幕下地图所能展示区域的大小px
let screenInfo = {};
let standerMapWidth = 2336;
let mapScale;
let screenScale;
let foldPanelPXHeight; // 在不同的手机屏幕的实际高度
let expandPXHeight;
let pageSelectedAreaRecord = {
  // key为楼层ID，value 为spceId
};
let touchMapStartRecord = {
  timeStamp: 0,
  pageX: 0,
  pageY: 0,
};
let touchMapEndRecord = {
  timeStamp: 0,
  pageX: 0,
  pageY: 0,
};

let CompanyMapData;
let combinedData = [];
wepy.page({
  store,
  data: {
    currentSp: '', // 空间id 用于路由跳转
    h5StaticPath,
    mapAreasInfo: [],
    selectArea: {},
    x: 0,
    y: 0,
    selectedFloor: '',
    foldStatus: 'fold', // fold-最小化 expand-展开状态
    floorStatus: 'fold', // flod-收起楼层 expand-展开楼层选则
    mapHeight: 507,
    mapParentHeight: 607,
    mapParentWidth: 375,
    mapWidth: 2336,
    mapScale: 1,
    screenScale: 1,
    mapMoveByTouch: false,
    touchScale: 1,
    isShowLocationEntrance: false,
    canSearchPerson: true,
    canSlideExpanel: true,
    pageHide: false,
    query: {},
    floors: [],
    companyId: '',
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user.userInfo }),
    ...mapState({ preDataFinsh: (state) => state.company.companyConfig }),
  },
  onLoad(query) {
    // 页面加载
    let from = query.from;
    this.canSearchPerson = query.from !== 'visit'; // 从访客进入的页面无法搜索人
    // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
    if (from == 'officehome') {
      this.foldStatus = 'fold';
      this.canSlideExpanel = false;
    }
    let params = {};
    if (query.q) {
      let qrcodeUrl = decodeURIComponent(query.q);
      params = utils.getUrlParams(qrcodeUrl);
    }
    this.query = { ...query };
    checkHasUserInfo()
      .then((userInfo) => {
        // let companyId =
        //   query.from !== 'visit' ? userInfo.companyId : query.companyId;
        let companyId =
          query.from !== 'visit'
            ? query.companyIdProp || userInfo.companyId
            : query.companyId;
        this.companyId = companyId;
        return getCompanyMapData(companyId);
      })
      .then((res) => {
        CompanyMapData = JSON.parse(res.data);
        this.selectedFloor = CompanyMapData.floorInfo[0].floorId;
        this.floors = CompanyMapData.floorInfo;
        this.isShowLocationEntrance = CompanyMapData.sagaCareBluetooth || false;
        this.getMapSize();
        return this.getHistorySelectedArea();

      })
      .then((historyArea) => {
        let historyAreaInfo = CompanyMapData.mapInfo.find(
          (e) => e.id == historyArea.spaceId
        );
        return getMapInfoHttp(this.companyId).then((res) => {
          const result = JSON.parse(res.data);
          const httpDdata = (result && result.content) || [];
          return {
            historyArea,
            httpDdata,
          };
        });
      })
      .then((res) => {
        const { httpDdata, historyArea } = res;
        let historyAreaInfo;
        let selectarea;
        let selectAraeId =
          (query.id && query.id !== 'undefined') ||
          (params.id && params.id !== 'undefined') ||
          historyArea.spaceId;
        CompanyMapData.mapInfo.forEach((item) => {
          item.canClick = typeof item.canClick == 'boolean' ? item.canClick: JSON.parse(item.canClick)
          item.borderRadius =
          item.borderRadius ? item.borderRadius instanceof Array
              ? item.borderRadius
              : item.borderRadius
                  .slice(2, item.borderRadius.length - 2)
                  .split(',') : undefined;
        });
        combinedData = httpDdata.reduce((acc, cur) => {
          let target = acc.find((e) => e.id == cur.id);

          selectarea = acc.find((e) => e.id == selectAraeId);
          if (target) {
            Object.assign(target, { title: cur.localName });
          } else {
          }

          if (target && target.id == selectAraeId) {
            selectarea = { ...target }; // 如果有新数据，则更新选中的数据
          }
          return acc;
        }, CompanyMapData.mapInfo);
        this.mapAreasInfo = combinedData;
        // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
        if (from == 'officehome' && query.id) {
          this.foldPanelFun();
          this.doSelectArea(selectarea);
          // this.getSpaceTem();
        } else {
          this.autoSelectArea(selectarea);
        }
      });
  },
  onShow() {
    this.mapAreasInfo = combinedData;
    const lastSearchedSpace = wx.getStorageSync('lastSearchedSpace');
    // 从搜索页面返回且搜索有效
    if (lastSearchedSpace) {
      let area = this.mapAreasInfo.find((item) => {
        return item.id == lastSearchedSpace.spaceId;
      });
      this.foldPanelFun();
      if (area) {
        this.doSelectArea(area);
      }

      // 清空，以免每次onshow时都执行（只需在从搜索页面返回时执行）
      wx.removeStorageSync('lastSearchedSpace');
    }
    if (this.pageHide) {
      this.pageHide = false;
    }
  },
  onHide() {
    this.pageHide = true;
  },
  onUnload() {
    this.pageHide = true;
  },
  methods: {
    getMapSize() {
      getScreenInfo().then((res) => {
        this.screenScale = res.screenScale;
      });

      this.getMapScale().then((res) => {
        this.mapScale = res.mapScale;
        this.mapWidth = Math.ceil(res.mapScale * CompanyMapData.mapWidth); // 因为有小数点的误差，故增加一部分
        this.mapHeight = res.mapHeight;
        this.mapParentHeight = res.mapHeight;
        this.mapParentWidth = res.screenWidth;
      });
    },
    setCacheSelectedArea(area) {
      const { selectedFloor } = this;
      wx.setStorage({
        key: 'SelectedASpace',
        data: {
          spaceId: area.id,
          floorId: selectedFloor,
        },
        success: function() {},
      });

      // 选中一个并记录
      pageSelectedAreaRecord = {
        ...pageSelectedAreaRecord,
        [selectedFloor]: area.id,
      };
    },
    setCacheSelectedFloor(floorId) {
      const { selectArea } = this;
      wx.setStorage({
        key: 'SelectedASpace',
        data: {
          floorId: floorId,
          spaceId: selectArea.floorId == floorId ? selectArea.id : '',
        },
        success: function() {},
      });
    },
    getHistorySelectedArea() {
      return new Promise((resolve, reject) => {
        wx.getStorage({
          key: 'SelectedASpace',
          success: (res) => {
            if (res.data && res.data.spaceId) {
              pageSelectedAreaRecord = {
                ...CompanyMapData.defalutSelectedId,
                [res.data.floorId]: res.data.spaceId, // 如果有历史记录选中，覆盖值
              };
              resolve(res.data);
            } else {
              pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
            resolve({
              spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
              floorId: this.selectedFloor,
            });
            }
          },
          fail: () => {
            pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
            resolve({
              spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
              floorId: this.selectedFloor,
            });
          },
        });
      });
    },
    autoSelectArea(area) {
      this.setPanelFold();
      this.doSelectArea(area);
    },
    doSelectArea(area) {
      if (!area) {
        return;
      }
      this.selectArea = area;
      this.selectedFloor = area.floorId;
      // this.getSpaceTem();
      this.setCacheSelectedArea(area);
      this.setAreaCenter(area);
    },
    selectAreaFun(currentSelect) {
      if (!currentSelect.canClick) {
        wx.showToast({
          title: '不可选区域',
          duration: 1000,
          icon: 'none',
        });
        return;
      }
      this.doSelectArea(currentSelect);
    },
    setAreaCenter(area) {
      if (!area.id) {
        return;
      }
      if (this.touchScale !== 1) {
        return;
      }
      getExpandPXHeight()
        .then((res) => {
          const { expandPXHeight, screenHeight, screenWidth } = res;
          return this.getMapScale().then((res) => {
            return {
              ...res,
              expandPXHeight,
              screenHeight,
              screenWidth,
            };
          });
        })
        .then((res) => {
          const { foldStatus } = this;
          const {
            screenHeight,
            screenWidth,
            expandPXHeight,
            mapScale,
            mapHeight,
          } = res;
          let viewHeight = screenHeight - tarBarHeight - expandPXHeight;
          let viewCenterX = screenWidth / 2,
            viewCenterY = viewHeight / 2,
            areaCenterX =
              (parseInt(area.left) + parseInt(area.width) / 2) * mapScale,
            areaCenterY =
              (parseInt(area.top) + parseInt(area.height) / 2) * mapScale;

          let x = parseInt(viewCenterX - areaCenterX);
          let y = parseInt(viewCenterY - areaCenterY);
          let max = expandPXHeight - foldPanelPXHeight + 20;

          this.mapMoveByTouch = false;
          this.x = x > 0 ? 0 : x; // 超过边线设置边线值
          this.y =
            foldStatus === 'expand' ? (Math.abs(y) > max ? -max : y) : this.y; // 当面板展开时候，才需垂直居中

          this.mapHeight = screenHeight - tarBarHeight - foldPanelPXHeight; // 相当于加入底部空白，让面板被顶起来
        });
    },
    onScale(e) {
      this.touchScale = e.$wx.detail.scale;
    },
    foldPanelFun() {
      this.getMapHeight().then((res) => {
        this.mapHeight = res.mapHeight;
        this.y = 0;
      });
      if (this.foldStatus === 'expand') {
        this.foldStatus = 'fold';
      }
    },
    setPanelFold() {
      if (this.foldStatus === 'fold') {
        this.foldStatus = 'expand';
      }
    },
    expandPanelFun() {
      this.setPanelFold();
      this.setAreaCenter(this.selectArea);
    },
    flodFloorFun() {
      if (this.floorStatus !== 'fold') {
        this.floorStatus = 'fold';
      }
    },
    changeFloorFun(floor) {
      this.selectedFloor = floor;
      let spaceId = pageSelectedAreaRecord[floor];
      let area = this.mapAreasInfo.find((item) => item.id == spaceId);
      if (this.query.from == 'officehome') {
        this.doSelectArea(area);
      } else {
        this.autoSelectArea(area);
      }
    },
    toggleFloorStatus() {
      this.floorStatus = this.floorStatus === 'expand' ? 'fold' : 'expand';
    },
    positionFun(devices) {
      getSpaceBytoothHttp(devices, this.companyId).then((res) => {
        const result = JSON.parse(res.data || '{}');
        const data = (result && result.content && result.content[0]) || {};
        if (!data || (data && !data.id)) {
          wx.showToast({
            title: '未定位到空间', // 提示的内容,
            icon: 'none', // 图标,
            duration: 2000, // 延迟时间
          });
          return;
        }
        let mapInfo = this.mapAreasInfo.find((item) => {
          return item.id === data.id;
        });
        this.doSelectArea({
          ...mapInfo,
          title: data.localName,
        });
      });
    },
    toSearchPage() {
      wx.navigateTo({
        url: `./search/search?canSearchPerson=${
          this.canSearchPerson
        }&companyId=${this.companyId}`,
      });
    },
    goBack() {
      wx.navigateBack({
        delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    getfoldPanelPXHeight() {
      if (
        foldPanelPXHeight &&
        screenInfo &&
        screenInfo.screenWidth &&
        screenInfo.screenHeight
      ) {
        return Promise.resolve({
          foldPanelPXHeight,
          screenWidth: screenInfo.screenWidth,
          screenHeight: screenInfo.screenHeight,
        });
      }
      return getScreenInfo().then((res) => {
        let foldHeight =
          this.query.from == 'officehome' ? switchPanelHeight : panelFoldHeight;
        foldPanelPXHeight = parseInt(res.screenScale * foldHeight);
        return {
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight,
          foldPanelPXHeight,
        };
      });
    },
    getMapHeight() {
      return this.getfoldPanelPXHeight().then((res) => {
        let mapHeight = res.screenHeight - tarBarHeight - res.foldPanelPXHeight;
        return {
          ...res,
          mapHeight,
        };
      });
    },
    getMapScale() {
      return this.getMapHeight().then((res) => {
        mapScale = Math.floor((res.mapHeight / standerMapHeight) * 10) / 10;
        return {
          ...res,
          mapScale,
        };
      });
    },
  },
});
function getScreenInfo() {
  if (
    screenScale &&
    screenInfo &&
    screenInfo.screenWidth &&
    screenInfo.screenHeight
  ) {
    return Promise.resolve({
      ...screenInfo,
      screenScale,
    });
  }
  return new Promise((resolve, reject) => {
    wx.getSystemInfo({
      success: (res) => {
        screenInfo.screenHeight = res.screenHeight;
        screenInfo.screenWidth = res.screenWidth;
        screenScale = res.screenWidth / standerScreenWidth;
        resolve({
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight,
          screenScale,
        });
      },
    });
  });
}
function getExpandPXHeight() {
  if (
    expandPXHeight &&
    screenInfo &&
    screenInfo.screenWidth &&
    screenInfo.screenHeight
  ) {
    return Promise.resolve({
      expandPXHeight,
      screenWidth: screenInfo.screenWidth,
      screenHeight: screenInfo.screenHeight,
    });
  }
  return getScreenInfo().then((res) => {
    expandPXHeight = parseInt(res.screenScale * panelExpandHeight);
    return {
      screenWidth: res.screenWidth,
      screenHeight: res.screenHeight,
      expandPXHeight,
    };
  });
}
</script>

<config>
{
  "navigationBarBackgroundColor": "#EBEEF5",
  "backgroundColor": "#EBEEF5",
  "disableScroll": true,
  "usingComponents": {
   "control-panel": "./components/controlpanel/controlpanel",
   "temperture-control-panel": "./components/temperturecontrolpanel/temperturecontrolpanel",
   "floor": "./components/floor/floor",
   "location": "./components/location/location"
  }
}
</config>
