<template>
  <div class="air">
    <div class="com-top">
      <div class="com-desc">
        <p class="com-top-title">空调</p>
        <p class="com-top-temperature">
          {{ airTemp ? airTemp : "--" }}
          <sup>℃</sup>
        </p>
      </div>
      <div class="com-right">
        <img
          v-if="airData.isOpen"
          :src="parseImgUrl('page-officehome', 'openair.svg')"
          alt=""
        />
        <img v-else :src="parseImgUrl('page-officehome', 'air_close.svg')" alt="" />
        <!-- <van-loading style="padding-top: 20px" v-else /> -->
      </div>
    </div>
    <!--温度调节-->
    <div class="top-switch">
      <div class="top-nav" v-if="equipList && equipList.length > 1">
        <span :class="navType == 'all' ? 'nav-active' : ''" @click="checkNav('all')">
          总控制
        </span>
        <span :class="navType == 'child' ? 'nav-active' : ''" @click="checkNav('child')">
          子设备
        </span>
      </div>
      <div v-else></div>
      <Switch
        class="switch-btn"
        v-if="navType == 'all' && airData.boundPoint && airData.boundPoint.switchSetBound"
        :size="23"
        inactive-color="rgba(196, 196, 196, 0.4)"
        @click="airChange"
        :model-value="airData.isOpen"
      />
    </div>

    <!--温度调节的box-->
    <template
      v-if="
        airData.boundPoint &&
        (airData.boundPoint.tempSetBound ||
          airData.boundPoint.gearSetBound ||
          airData.boundPoint.modeSetBound)
      "
    >
      <div class="line" v-if="airData.isOpen"></div>
      <div class="main-temp" v-if="navType == 'all' && airData.isOpen">
        <div
          class="com-control com-control-padding"
          v-show="airData.boundPoint && airData.boundPoint.tempSetBound"
        >
          <div class="temp-slider" id="sliderId">
            <div class="slider-bar" id="barId">
              <div class="bar-temp">{{ realTemp }}℃</div>
              <div
                class="bar-circle"
                style="border: 2px solid rgba(255, 255, 255, 1)"
                id="handId"
              ></div>
            </div>
            <div class="temp-left" id="tempManualLeftId">
              {{ airData.minTempSet }}
            </div>
            <div class="temp-right">
              {{ airData.maxTempSet }}
            </div>
          </div>
        </div>
        <div
          class="com-control"
          v-if="airData.boundPoint && airData.boundPoint.gearSetBound"
        >
          <div class="control-box">
            <div class="volume-box">
              <div class="number">
                <span
                  v-for="(item, index) in windGearArr"
                  :class="airData.gear === item ? 'number-active' : ''"
                  :key="'volume' + index"
                  >{{ item }}</span
                >
              </div>
              <div class="text">风量调节</div>
            </div>
            <div class="volume-icon">
              <div
                class="icon-item"
                :style="{
                  opacity: airData.gear <= 1 ? '0.6' : 1,
                }"
                @click="changeZongAir('gear', 'windLow')"
              >
                <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" />
              </div>
              <div
                class="icon-item"
                :style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
                @click="changeZongAir('gear', 'windUp')"
              >
                <img :src="parseImgUrl('ipdImages', 'wind_big.svg')" />
              </div>
              <div
                class="icon-item"
                @click="changeZongAir('gear', 'auto')"
                :class="airData.isAutoGear ? 'active-color' : ''"
              >
                <img :src="parseImgUrl('ipdImages', 'A.svg')" />
              </div>
            </div>
          </div>
        </div>
        <div
          class="com-control"
          v-if="airData.boundPoint && airData.boundPoint.modeSetBound"
        >
          <div class="control-box">
            <div class="volume-box">
              <div class="model">
                {{
                  airData.workMode == 1 ? "制冷" : airData.workMode == 2 ? "制热" : "通风"
                }}
              </div>
              <div class="text">模式设定</div>
            </div>
            <div class="volume-icon">
              <div
                class="icon-item"
                :class="airData.workMode === 1 ? 'active-color' : ''"
                @click="changeZongAir('mode', 1)"
              >
                <img
                  :src="
                    airData.workMode === 1
                      ? parseImgUrl('ipdImages', 'aircoldblue.svg')
                      : parseImgUrl('ipdImages', 'aircoldblack.svg')
                  "
                />
              </div>
              <div
                class="icon-item"
                :class="airData.workMode === 2 ? 'active-color' : ''"
                @click="changeZongAir('mode', 2)"
              >
                <img
                  :src="
                    airData.workMode === 2
                      ? parseImgUrl('ipdImages', 'airsunred.svg')
                      : parseImgUrl('ipdImages', 'airsunblack.svg')
                  "
                />
              </div>

              <div
                class="icon-item"
                :class="airData.workMode === 3 ? 'active-color' : ''"
                @click="changeZongAir('mode', 3)"
              >
                <img
                  :src="
                    airData.workMode === 3
                      ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
                      : parseImgUrl('ipdImages', 'aircloudblack.svg')
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!--子设备-->
    <div class="air-child" v-if="navType == 'child'">
      <div
        class="child-control-box"
        @click="showAirColorCtrol(childItem)"
        :key="'child' + index"
        v-for="(childItem, index) in equipList"
      >
        <div class="open-title">
          <div class="open-temp-box">
            <span>{{ childItem.tempSet ? childItem.tempSet : "--" }}<sup>°C</sup></span>
            <template v-if="childItem.boundPoint && childItem.boundPoint.modeSetBound">
              <div class="text-box" v-if="childItem.workMode == 2">
                <img :src="parseImgUrl('ipdImages', 'hot-small.svg')" alt="" />
                <span>制热模式</span>
              </div>
              <div class="text-box" v-else-if="childItem.workMode == 1">
                <img :src="parseImgUrl('ipdImages', 'cold-small.svg')" alt="" />
                <span>制冷模式</span>
              </div>
              <div class="text-box" v-else>
                <img :src="parseImgUrl('ipdImages', 'tongfeng-small.svg')" alt="" />
                <span>通风模式</span>
              </div>
            </template>
          </div>
          <Switch
            v-if="childItem.boundPoint && childItem.boundPoint.switchSetBound"
            @click.stop="changeChildItemAir('switch', childItem, 'switch')"
            :model-value="childItem.isOpen"
            class="child-switch"
            inactive-color="rgba(196, 196, 196, 0.4)"
          />
        </div>

        <div class="control-bottom">
          <div class="control-title">
            {{ childItem.localName }}
          </div>
          <img
            v-if="
              childItem.boundPoint &&
              (childItem.boundPoint.tempSetBound ||
                childItem.boundPoint.gearSetBound ||
                childItem.boundPoint.modeSetBound)
            "
            :class="childItem.isOpen ? '' : 'img-disabled'"
            :src="lightColorImg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  computed,
  watch,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { Switch, Dialog, Toast } from "vant";
import { swiper } from "@/utils/swiper";
import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
import { fix, getRelNowTime, parseImgUrl, setQueryConfig } from "@/utils";
import any = jasmine.any;
import { parse } from "url";
import { number } from "echarts";

export default defineComponent({
  props: {
    temperature: {
      // 空调基本信息
      type: Number,
      default: () => 0,
    },
    // hasAir: {
    //   // 有无空调
    //   type: Boolean,
    //   default: () => false,
    // },
    airVolumes: {
      // 风量信息
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
    forceOverTimeFlag: {
      type: Boolean,
      default: () => false,
    },
    seviceEquipmentList: {
      // 是否走服务定制的设备
      type: Array,
      default: () => [],
    },
    disable: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    Switch,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup(props, contx) {
    const propsVal = props;
    let airData: any = {
      avg: "", // 算法调节温度（目标值）
      icon: 1, // 固定框文案ID 7 为关机，其它都是开机
      spaceStatus: "", // 固定框文案展示
      notice: "", // 弹框文案展示
      mode: 0, //  模式
      tempSet: 0, // 温度
      maxTempSet: 32,
      minTempSet: 16,
      isAutoGear: 0,
      workMode: 0, //1=cold(制冷)；2=hot(制热)；3=wind(通风)
      gear: 0, //  风量
      boundPoint: {}, // 开关 档位 温度 模式点位
      isOpen: false, // 空调开关 true 是开
      runStatus: 0, // 查询设备的真实状态
    };
    const feedbackTimer: any = null;
    const airTimer: any = null;
    const domAirOpeen: any = false;
    const switchTimer: any = null;
    let realTemp: any = 16;
    let windGearArr: any = [0, 1, 2, 3];
    let equipList: any = [];
    let valueDom: any = null;
    let valueHeight: any = null;
    let spaceId: any = "";
    const proxyData: any = reactive({
      seviceEquipmentList: props.seviceEquipmentList,
      lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
      navType: "all",
      valueDom: valueDom,
      spaceId: props.spaceId,
      valueHeight: valueHeight,
      equipList: equipList,
      cotrolLoading: false,
      loadingNum: 0,
      airTemp: 0, // 设备真实温度
      loadingAir: false,
      windGearArr: windGearArr, // 风量3/5个档位
      lightIcon: "arrow-down",
      showChild: false,
      realTemp: realTemp,
      temperature: props.temperature,
      userIsControl: props.userIsControl,
      forceOverTimeFlag: props.forceOverTimeFlag,
      firstLoadingAir: true,
      domAirOpeen: domAirOpeen,
      swiperIinit: false,
      parseImgUrl: parseImgUrl,
      part: 1,
      airData: airData,
      modeName: "",
      showAirVolumeBtn: false, // 是否展示风量调节按钮
      showDialog: false,
      airTimer: airTimer,
      distroyFlag: false,
      airSetText: {
        // 空调反馈文案
        notice: "",
        remark: [],
        nowImg: "",
        toWhere: "",
        designTemperature: 0,
      },
      checkNav(type: any = "all") {
        proxyData.navType = type;
        proxyData.swiperIinit = false;
        if (proxyData.navType == "child") {
          // proxyData.updateChildSatus();
        } else {
          proxyData.updateParentSatus();
        }

        // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
        proxyData.getAirInfo(1);
      },
      // 展示空调子设备的控制页面
      showAirColorCtrol(item: any) {
        // 只要空调开着的时候才可以调档位和风量
        console.log(item);
        if (item.isOpen) {
          item.maxTempSet = proxyData.airData.maxTempSet;
          item.minTempSet = proxyData.airData.minTempSet;
          contx.emit("showChildAirControl", item);
        }
      },
      // 点击展示所有的登录
      async showAll() {
        proxyData.showChild = !proxyData.showChild;
        if (proxyData.lightIcon === "arrow-up") {
          proxyData.lightIcon = "arrow-down";
        } else {
          proxyData.lightIcon = "arrow-up";
        }

        // if (proxyData.showChild) {
        //   await nextTick(() => {
        //     proxyData.setChildSelectList();
        //   });
        // } else {
        //   await nextTick(() => {
        //     proxyData.barSwiperInit();
        //   });
        // }
        if (proxyData.showChild) {
          proxyData.updateChildSatus();
        } else {
          proxyData.updateParentSatus();
        }

        // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
        proxyData.getAirInfo(1);

        // proxyData.getAirInfoToTimer(0);
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp = proxyData.airTemp;
        let barBox: any = document.querySelector("#barId");
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#sliderId");
        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
        if (
          proxyData.airTemp >= proxyData.airData.minTempSet &&
          proxyData.airTemp <= proxyData.airData.maxTempSet
        ) {
          let left: any =
            (proxyData.airTemp - proxyData.airData.minTempSet) / proxyData.part;
          // left = Math.floor(left);
          if (barBox) {
            barBox.style.left = left + "px";
          }
        } else {
          if (!proxyData.airTemp) {
            barBox.style.left = 0;
          } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
            barBox.style.left = 0;
          } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
            let barWidth: any = barBox.offsetWidth;
            barBox.style.left = sliderWidth - barWidth + proxyData.sliderPading + "px";
          }
        }
      },
      getEleWidth(ele: any) {
        // debugger;
        if (ele) {
          return ele.getBoundingClientRect().width;
        } else {
          return 1;
        }
      },
      // 滑动
      endBoxSwiper() {
        let handBox: any = document.querySelector("#handId");
        let barBox: any = document.querySelector("#barId");
        let sliderBox: any = document.querySelector("#sliderId");
        let isMove: any = false;
        let barLeft: any = 0;
        proxyData.sliderPading = 2;
        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
        let barWidth: any = proxyData.getEleWidth(barBox);
        if (sliderWidth > 1) {
          sliderWidth = sliderWidth - barWidth;
        }
        let tempPart =
          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / sliderWidth;
        let part: any = tempPart;
        proxyData.part = tempPart;
        if (!handBox) {
          return;
        }

        handBox.addEventListener("touchstart", function (e: any) {
          let oldBarLeft = (barBox && barBox.style && barBox.style.left) || 0;
          barLeft = isNaN(parseInt(oldBarLeft)) ? 0 : parseInt(oldBarLeft);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
          proxyData.changeZongAir("temp", proxyData.realTemp);
          proxyData.airTemp = proxyData.realTemp;
        });
        proxyData.swiperIinit = true;
        swiper(handBox, {
          swipeLeft: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft - moveRealX;
              left = left < 0 ? 0 : left;
              barBox.style.left = left + "px";
              let realTemp: any = left * part + proxyData.airData.minTempSet;
              if (realTemp) {
                proxyData.realTemp = realTemp.toFixed(1);
                proxyData.realTemp = fix(proxyData.realTemp);
              }
              // console.log(proxyData.realTemp);
            }
          },
          swipeRight: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft + moveRealX;
              left = left > sliderWidth ? sliderWidth : left;
              let realTemp: any = left * part + proxyData.airData.minTempSet;
              if (realTemp) {
                proxyData.realTemp = realTemp.toFixed(1);
                proxyData.realTemp = fix(proxyData.realTemp);
              }
              // console.log(proxyData.realTemp);
              barBox.style.left = left + proxyData.sliderPading + "px";
            }
          },
        });
      },
      // 定时获取空调状态
      getAirInfoToTimer(timerLong: any = 15000) {
        let nowTime: any = getRelNowTime();
        if (timerLong == 15000 && nowTime < "070000" && nowTime > "200000") {
          timerLong = 300000;
        }
        console.log("nowTime===", nowTime);

        if (proxyData.airTimer) {
          clearTimeout(proxyData.airTimer);
          proxyData.airTimer = null;
        }
        proxyData.airTimer = setTimeout(() => {
          if (!proxyData.distroyFlag) {
            // 销毁是同事销毁http请求
            if (!proxyData.loadingNum) {
              proxyData.getAirInfo();
            }
          }
        }, timerLong);
      },
      // 获取操作时长
      getTimerLen() {
        // debugger;
        let equipmentCategory: any = "";
        if (proxyData.equipList && proxyData.equipList.length) {
          equipmentCategory = proxyData.equipList[0].equipmentCategory;
        }
        let timerLen: any = 15;
        if (equipmentCategory && equipmentCategory == "ACATVI") {
          // timerLen = 120;
          timerLen = 15;
        }
        return timerLen;
      },
      switchTimer: switchTimer,
      // 计算loading时间
      setLoadingNumber() {
        let timerLen: any = proxyData.getTimerLen();
        proxyData.switchTimer = setInterval(() => {
          proxyData.loadingNum++;
          if (proxyData.loadingNum >= timerLen) {
            clearInterval(proxyData.switchTimer);
            proxyData.switchTimer = null;
            proxyData.loadingAir = false;
            proxyData.loadingNum = 0;
            proxyData.getAirInfoToTimer(0);
          }
          console.log("proxyData.loadingNum==", proxyData.loadingNum, timerLen);
        }, 1000);
      },
      // 格式化空调数据
      formatAirData(btnType: any, text: any) {
        let obj: any = {};
        if (btnType == "temp") {
          obj.codeKey = "tempSetCode";
          obj.value = text;
        }
        if (btnType == "gear" && text == "windLow") {
          //降挡
          if (proxyData.airData.gear > 1) {
            proxyData.airData.gear--;
            proxyData.airData.isAutoGear = 0;
            obj.value = proxyData.airData.gear;
            obj.codeKey = "gearCode";
          } else {
            return;
          }
        }
        if (btnType == "gear" && text == "windUp") {
          //升档
          if (proxyData.airData.gear < 3) {
            proxyData.airData.gear++;
            proxyData.airData.isAutoGear = 0;
            obj.value = proxyData.airData.gear;
            obj.codeKey = "gearCode";
          } else {
            return;
          }
        }
        if (btnType == "gear" && text == "auto") {
          proxyData.airData.isAutoGear = proxyData.airData.isAutoGear ? 0 : 1;
          obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
          obj.codeKey = "gearCode";
        }
        if (btnType == "mode") {
          proxyData.airData.workMode = text;
          obj.codeKey = "modeSetCode";
          obj.value = text;
        }
        return obj;
      },
      /**
       * 加载loading
       */
      loadingStart() {
        proxyData.cotrolLoading = true;
      },
      /**
       * 结束
       */
      loadinngEnd() {
        proxyData.cotrolLoading = false;
      },
      // 计算loading时间
      setChildLoadingNumber(childItem: any) {
        let timerLen: any = proxyData.getTimerLen();
        childItem.loadingNum = 1;
        childItem.timer = setInterval(() => {
          childItem.loadingNum++;
          if (childItem.loadingNum >= timerLen) {
            clearInterval(childItem.timer);
            childItem.timer = null;
            childItem.loadingNum = 0;
            proxyData.getAirInfoToTimer(0);
          }
          console.log("===");
          console.log(childItem.loadingNum);
        }, 1000);
      },
      // 连续点击2秒内未点击才发指令
      childDisabled(childItem: any, data: any) {
        clearTimeout(childItem.timeOuter);
        childItem.timeOuter = setInterval(() => {
          childItem.num--;
          if (childItem.num == 0) {
            proxyData.setSpaceCondtioners(data);
            clearTimeout(childItem.timeOuter);
          }
        }, 1000);
      },
      // 子设备开关控制
      changeChildItemAir(btnType: any, childItem: any, symbol: any) {
        const domAirOpen = !childItem.isOpen;
        let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([childItem]);
        if (
          proxyData.forceOverTimeFlag &&
          domAirOpen &&
          isExeSpaceTime &&
          btnType == "switch"
        ) {
          //需要强制加班
          contx.emit("triggerWork", 2, childItem);
          return;
        }
        // 空调没有开的时候不让调温度和风量
        if (!childItem.isOpen && btnType !== "switch") {
          return;
        }
        let arr: any = [];
        if (btnType === "switch") {
          if (childItem.loadingNum >= 1 && childItem.loadingNum <= 15) {
            return;
          }
          childItem.isOpen = !childItem.isOpen;
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.switchCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.isOpen ? "1" : "0", //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
        } else if (btnType === "temp") {
          childItem.num = 2;
          if (symbol === "up") {
            if (childItem.tempSet >= proxyData.airData.maxTempSet) {
              return;
            }
            childItem.tempSet = childItem.tempSet + 0.5;
          } else if (symbol === "down") {
            if (childItem.tempSet <= proxyData.airData.minTempSet) {
              return;
            }
            childItem.tempSet = childItem.tempSet - 0.5;
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.tempSetCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.tempSet, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
          proxyData.childDisabled(childItem, arr);
        } else if (btnType === "gear") {
          if (symbol === "up") {
            if (childItem.isAutoGear) {
              return;
            }
            if (childItem.gear >= 3) {
              childItem.isAutoGear = 1;
            } else {
              childItem.gear++;
              childItem.isAutoGear = 0;
            }
          } else if (symbol === "down") {
            if (!childItem.isAutoGear && childItem.gear <= 1) {
              return;
            }
            if (childItem.isAutoGear) {
              childItem.isAutoGear = 0;
              childItem.gear = 3;
            } else {
              childItem.gear--;
            }
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.gearCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.isAutoGear ? 4 : childItem.gear, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
        } else if (btnType === "model") {
          if (symbol === "up") {
            if (childItem.workMode >= 3) {
              return;
            }
            childItem.workMode++;
          } else if (symbol === "down") {
            if (childItem.workMode <= 1) {
              return;
            }
            childItem.workMode--;
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.modeSetCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.workMode, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
        }
        // 空调调节后先不刷新,等2分钟后更新状态
        proxyData.updateAirStatus();
        // 修改单个设备的状态
        if (btnType !== "temp") {
          proxyData.setSpaceCondtioners(arr);
        }
      },
      // 改变设备状态
      setSpaceCondtioners(data: any) {
        setSpaceCondtioners(data)
          .then((res) => {
            // proxyData.setLoadingNumber();
            proxyData.loadinngEnd();
          })
          .catch(() => {
            // proxyData.setLoadingNumber();
            proxyData.loadinngEnd();
            Toast("连接异常,请检查网络！");
          });
      },
      // 改变空调状态
      changeZongAir(btnType: any, text: any) {
        if (!proxyData.airData.isOpen) return;
        let equpObj: any = proxyData.formatAirData(btnType, text);
        if (!(equpObj && equpObj.codeKey)) return;
        let data: any = [];
        proxyData.equipList.map((item: any) => {
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: item[equpObj.codeKey], //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: equpObj.value, //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        console.log("设备数据处理---");
        console.log(data);
        if (!proxyData.cotrolLoading) {
          proxyData.loadingStart();
          // 调整设备状态
          proxyData.updateAirStatus();
          proxyData.setSpaceCondtioners(data);
        }
      },
      // 检查设备是否执行空间服务时间
      checkDeviceIsExeSpaceTime(deviceAll: any = []) {
        let seviceEquipmentList: any = proxyData.seviceEquipmentList;
        let flag: any = false;
        // debugger
        for (let i = 0; i < seviceEquipmentList.length; i++) {
          for (let j = 0; j < deviceAll.length; j++) {
            if (
              seviceEquipmentList[i].id == deviceAll[j].id &&
              seviceEquipmentList[i].isExeSpaceTime
            ) {
              flag = true;
              break;
            }
          }
          if (flag) {
            break;
          }
        }
        return flag;
      },
      // 加班更新按钮的状态
      updateCloseSwitchFromWork() {
        // isAddTimer==0(需要定时再调) isAddTimer==1(不需要定时调)
        proxyData.getAirInfo(1);
      },
      // 加班更新按钮的状态
      updateSwitchFromWork(deviceItem: any) {
        if (deviceItem) {
          proxyData.equipList.map((item: any) => {
            if (item.id === deviceItem.id) {
              item.isOpen = true;
              proxyData.airData.isOpen = true;
            }
          });
        } else {
          proxyData.airData.isOpen = true;
        }
        nextTick(() => {
          proxyData.barSwiperInit();
        });
      },
      // 刷新空调状态的接口
      updateAirStatus() {
        clearTimeout(proxyData.airTimer);
        proxyData.airTimer = null;
        proxyData.loadingNum = 1;
        if (!proxyData.switchTimer) {
          proxyData.setLoadingNumber();
        }
      },
      // 点击总开关,前端更新子设备的状态
      updateChildSatus() {
        proxyData.equipList.map((item: any) => {
          item.isOpen = proxyData.airData.isOpen;
        });
      },
      // 更新总开关的开关状态
      updateParentSatus() {
        let flag: any = false;
        proxyData.equipList.map((item: any) => {
          if (item.isOpen) {
            flag = true;
          }
        });
        proxyData.airData.isOpen = flag;
      },
      // 总控制改变空调状态
      airChange() {
        // 先不更新状态等确认框弹出后再更新状
        // 操作空调
        const domAirOpen = !proxyData.airData.isOpen;
        let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
          proxyData.equipList
        );
        if (proxyData.forceOverTimeFlag && domAirOpen && isExeSpaceTime) {
          //需要强制加班
          contx.emit("triggerWork", 2);
          return;
        }

        proxyData.airData.isOpen = !proxyData.airData.isOpen;
        proxyData.loadingAir = true;
        // 操作空调后,先关闭定时刷新接口,等固定时间再更新空调状态
        proxyData.updateAirStatus();
        proxyData.swiperIinit = false;
        if (proxyData.airData.isOpen) {
          nextTick(() => {
            proxyData.barSwiperInit();
          });
        }
        let data: any = [];
        proxyData.equipList.map((item: any) => {
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: item.switchCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: proxyData.airData.isOpen ? "1" : "0", //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        // 设备状态处理
        proxyData.setSpaceCondtioners(data);
      },
      // 设置子设备的状态
      formateSetChildStatus() {
        proxyData.equipList.map((item: any) => {
          item.isOpen = item.runStatus === 1 ? true : false;
          item.boundPoint = item.boundPoint || {};
          if (item.tempSet) {
            item.tempSet = item.tempSet.toFixed(1);
            item.tempSet = fix(item.tempSet);
          }
        });
      },
      // 初始化滚动
      async barSwiperInit() {
        if (proxyData.airData.isOpen && !proxyData.showChild) {
          if (!proxyData.swiperIinit) {
            proxyData.endBoxSwiper();
          }
          // debugger
          proxyData.setBarNowPerstion();
        }
      },
      // 设置子设备的可调范围
      setChildSelectList() {
        proxyData.equipList.map((item: any) => {
          let tempArr: any = [];
          for (
            let i = proxyData.airData.minTempSet;
            i <= proxyData.airData.maxTempSet;
            i = i + 0.5
          ) {
            tempArr.push(i);
          }
          item.tempArr = tempArr;
          let index: any = item.tempArr.findIndex((ele: any) => {
            return ele == item.tempSet;
          });
          item.sel = index == -1 ? 0 : index;

          let modelArr: any = ["制冷", "制热", "通风"];
          item.modelArr = modelArr;
          if (item.workMode > 3) {
            item.workMode = 1;
          }
          let mIndex: any = item.workMode ? item.workMode - 1 : 2;
          item.mIndex = mIndex;

          let gearArr: any = [0, 1, 2, 3, "AUTO"];
          item.gearArr = gearArr;
          let gIndex: any = item.gearArr.findIndex((ele: any) => {
            if (item.isAutoGear == 1) {
              return ele == "AUTO";
            } else {
              return ele == item.gear;
            }
          });
          item.gIndex = gIndex == -1 ? 0 : gIndex;
        });
        proxyData.setValueHeight();
      },
      setValueHeight() {
        if (!proxyData.valueHeight) {
          proxyData.valueDom = proxyData.valueDom
            ? proxyData.valueDom
            : document.querySelectorAll(".value")[0];
          proxyData.valueHeight = proxyData.valueDom
            ? proxyData.valueDom.offsetHeight
            : 0;
        }
        console.log("proxyData.valueHeight==", proxyData.valueHeight);
      },
      // 改变子设备选中的位置
      updateChildPerstion() {
        proxyData.equipList.map((item: any) => {
          let index: any = item.tempArr.findIndex((ele: any) => {
            return ele == item.tempSet;
          });
          item.sel = index == -1 ? 0 : index;

          let mIndex: any = item.workMode ? item.workMode - 1 : 2;
          item.mIndex = mIndex;

          let gIndex: any = item.gearArr.findIndex((ele: any) => {
            if (item.isAutoGear == 1) {
              return ele == "AUTO";
            } else {
              return ele == item.gear;
            }
          });
          item.gIndex = gIndex == -1 ? 0 : gIndex;
        });
      },
      // 空调信息airTemp的修改
      getAirInfo(isAddTimer: any = 0) {
        const paramObj = {
          spaceId: proxyData.spaceId,
          // spaceId: props.spaceId,//'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
        };
        //wx.showLoading();
        let str: any = setQueryConfig(paramObj);
        querySpaceConditioners(str)
          .then((res) => {
            let data: any = res.data || {};
            proxyData.firstLoadingAir = false;
            proxyData.loadingAir = false;
            proxyData.airTemp = data.tempSet;
            if (proxyData.airTemp) {
              proxyData.airTemp = proxyData.airTemp.toFixed(1);
              proxyData.airTemp = fix(proxyData.airTemp);
            }
            proxyData.airData.maxTempSet = data.maxTempSet || 32;
            proxyData.airData.minTempSet = data.minTempSet || 16;
            proxyData.airData.isOpen = data.runStatus ? true : false;
            proxyData.airData.runStatus = data.runStatus;
            proxyData.airData.isAutoGear = data.isAutoGear;
            proxyData.airData.gear = data.gear || 0;
            proxyData.airData.workMode = data.workMode;
            proxyData.airData.boundPoint = data.boundPoint || {};
            proxyData.equipList = data.equipList;
            // proxyData.equipList.push(data.equipList[0]);
            // 设置子设备的状态
            // proxyData.setChildSelectList();
            proxyData.formateSetChildStatus();
            nextTick(() => {
              proxyData.barSwiperInit();
            });
            if (isAddTimer == 0) {
              proxyData.getAirInfoToTimer();
            }
          })
          .catch(() => {
            if (isAddTimer == 0) {
              // proxyData.swiperIinit = false;
              proxyData.getAirInfoToTimer(3000);
            }
          });
      },
    });
    watch(
      [() => props, () => props.spaceId],
      (newProps: any, oldProps: any) => {
        if (newProps[0]) {
          proxyData.temperature = newProps[0].temperature;
          proxyData.userIsControl = newProps[0].userIsControl;
          proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
          proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
        }
        if (newProps[1] && newProps[1] != oldProps[1]) {
          proxyData.spaceId = newProps[1];
          proxyData.swiperIinit = false;
          proxyData.distroyFlag = false;
          proxyData.getAirInfoToTimer(0);
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    onBeforeUnmount(() => {
      if (proxyData.airTimer) {
        clearTimeout(proxyData.airTimer);
        proxyData.airTimer = null;
        proxyData.distroyFlag = true;
      }
    });
    onMounted(() => {
      proxyData.spaceId = props.spaceId;
      proxyData.distroyFlag = false;
      proxyData.getAirInfoToTimer(0);
      // 获取空调信息
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.air {
  position: relative;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  margin: 15px 0px;
  .loading-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(#000000, 0.3);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    z-index: 999;
    // line-height: 50px;
  }
  .com-top {
    padding: 0 20px;
    padding-bottom: 10px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    .com-desc {
      position: relative;
      font-family: "PingFang SC";
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      letter-spacing: 0em;
      padding-top: 8px;
      text-align: left;
      color: rgba(77, 82, 98, 1);
      .com-top-title {
        font-family: "PingFang SC";
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        padding-bottom: 4px;
        letter-spacing: 0;
        text-align: left;
        color: rgba(77, 82, 98, 1);
      }
      .com-top-temperature {
        position: relative;
        display: inline-block;
        font-family: "Persagy";
        font-size: 32px;
        font-weight: 400;
        line-height: 39px;
        letter-spacing: 0px;
        text-align: right;
        color: rgba(27, 33, 41, 1);

        sup {
          position: absolute;
          font-family: "Persagy";
          top: 3px;
          // right: -12px;
          padding-left: 4px;
          font-size: 12px;
          font-weight: 400;
          line-height: 15px;
          letter-spacing: 0em;
          text-align: left;
          color: rgba(196, 196, 196, 1);
        }
      }
      .show-all {
        position: absolute;
        width: 110px;
        bottom: -8px;
        font-family: PingFang SC;
        font-size: 14px;
        line-height: 16px;
        color: #c4c4c4;
        margin: 0px 5px;
        span {
          font-size: 12px;
        }
        .light-icon {
          font-size: 12px;
          padding-right: 10px;
        }
      }
    }
    .com-right {
      position: relative;
      width: 130px;
      text-align: center;

      img {
        width: 130px;
        height: 64px;
      }
    }
  }
  .top-switch {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    // margin-bottom: 16px;
    padding-bottom: 16px;
    .top-nav {
      height: 28px;
      // line-height: 28px;
      border-radius: 21px;
      background: #f1f4f6;
      span {
        box-sizing: border-box;
        display: inline-block;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        // padding: 5px 8px;
        padding: 0px 8px;
        height: 28px;
        line-height: 28px;
        color: #424c59;
      }
      .nav-active {
        background: #fff;
        border: 1px solid #e1e5eb;
        border-radius: 21px;
      }
    }
    // .switch-btn {
    //   margin-top: 0;
    // }
  }
  .line {
    width: 100%;
    height: 0px;
    border-top: 1px solid rgba(232, 236, 240, 1);
  }

  .active-color {
    background: $elActiveColor !important;
    span {
      color: #fff !important;
    }
  }
  .air-child {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 16px;
    padding-bottom: 4px;
    .child-control-box {
      display: inline-block;
      width: 49%;
      margin-right: 2%;
      margin-bottom: 12px;
      padding: 14px 16px;
      justify-content: space-between;
      border-radius: 16px;
      background: rgba(247, 249, 250, 1);
      &:nth-child(2n) {
        margin-right: 0;
      }
      .open-title {
        width: 100%;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 26px;
        .open-temp-box {
          position: relative;
          display: inline-block;
          // width: calc(100% - 50px);
          overflow: hidden;
          span {
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: "Persagy";
            font-size: 22px;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0;
          }
          sup {
            position: absolute;
            top: -3px;
            font-family: Mulish;
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            color: rgba(196, 196, 196, 1);
          }
        }
        .text-box {
          margin-left: -2px;
          padding-top: 4px;
          img {
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            margin-right: 2px;
          }
          span {
            display: inline-block;
            vertical-align: middle;
            font-family: "PingFang SC";
            font-size: 12px;
            font-weight: 400;
            color: rgba(196, 201, 207, 1);
          }
        }
      }

      .control-bottom {
        display: flex;
        justify-content: space-between;
        .control-title {
          font-family: "PingFang SC";
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
          padding-right: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: rgba(77, 82, 98, 1);
        }
        img {
          width: 20px;
          height: 20px;
          opacity: 1;
          cursor: pointer;
        }
        .img-disabled {
          opacity: 0.3;
          cursor: no-drop;
        }
      }
    }
  }

  .main-temp {
    padding-bottom: 16px;
    .com-control {
      padding: 20px;
      padding-top: 28px;
      padding-bottom: 0;
      .control-box {
        display: flex;
        justify-content: space-between;
      }
      .volume-box {
        .number {
          span {
            font-family: "Persagy";
            font-size: 12px;
            font-weight: 400;
            padding-right: 8px;
            line-height: 24px;
            letter-spacing: 0px;
            color: rgba(196, 201, 207, 1);
          }
          .number-active {
            font-family: "Persagy";
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0px;
            color: rgba(27, 33, 41, 1);
          }
        }
        .model {
          font-family: "PingFang SC";
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          letter-spacing: 0px;
        }
        .text {
          font-family: "PingFang SC";
          display: block;
          font-size: 13px;
          font-weight: 400;
          padding-top: 3px;
          margin-left: -3px;
          transform: scale(0.9);
          text-align: left;
          // line-height: 17px;
          letter-spacing: 0px;
          color: rgba(196, 201, 207, 1);
        }
      }
      .volume-icon {
        .icon-item {
          position: relative;
          display: inline-block;
          width: 42px;
          height: 42px;
          background: rgba(196, 196, 196, 0.2);
          border-radius: 50%;
          img {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          &:nth-child(2) {
            margin-left: 10px;
            margin-right: 10px;
          }
          span {
            font-size: 12px;
            color: #000000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.8);
          }
        }
      }

      .temp-slider {
        position: relative;
        display: flex;
        height: 22px;
        border-radius: 16px;
        background: linear-gradient(
          270deg,
          #ffbab6 0%,
          #ffe7d1 29.05%,
          #f1efff 62%,
          #c8d6ff 100%
        );

        .slider-bar {
          position: absolute;
          left: 0;
          bottom: -5px;
          width: 32px;
          z-index: 333;
          text-align: center;
          color: rgba(98, 108, 120, 1);

          .bar-temp {
            display: inline-block;
            font-family: "Persagy";
            font-size: 12px;
            font-weight: 400;
            line-height: 14px;
            letter-spacing: 0px;
            padding-bottom: 4px;
            text-align: left;
            color: rgba(98, 108, 120, 1);
          }
          .bar-circle {
            width: 30px;
            height: 30px;
            background: rgba(246, 249, 254, 1);
            border-radius: 50%;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
          }
        }
        .temp-left,
        .temp-right {
          position: absolute;
          display: inline-block;
          font-family: "Persagy";
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          padding-top: 1px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(98, 108, 120, 1);
        }
        .temp-left {
          left: 0px;
          padding-left: 8px;
        }
        .temp-right {
          right: 0px;
          padding-right: 8px;
          text-align: left;
        }
      }
      .control-text {
        font-style: normal;
        font-weight: 600;
        font-size: 11px;
        line-height: 15px;
        color: #c4c4c4;
        padding: 10px 0 0 10px;
      }
    }

    .com-control-padding {
      padding-top: 23px;
      margin-top: 8px;
    }
  }
}
</style>
