<template>
  <div class="light" v-if="showLight && lampList && lampList.length">
    <!--如果有子设备-->
    <div class="floor-top">
      <div class="top-box">
        <div class="top-left">
          <span>地暖</span>
          <span>26<sup>℃</sup></span>
        </div>
        <div class="top-right">
          <img :src="parseImgUrl('page-officehome', 'heating.svg')" alt="" />
        </div>
      </div>
      <div class="top-switch">
        <div class="top-nav">
          <span
            :class="navType == 'all' ? 'nav-active' : ''"
            @click="checkNav('all')"
          >
            总控制
          </span>
          <span
            :class="navType == 'child' ? 'nav-active' : ''"
            @click="checkNav('child')"
          >
            子设备
          </span>
        </div>
        <Switch
          class="switch-btn"
          size="18px"
          inactive-color="rgba(196, 196, 196, 0.4)"
        />
      </div>
    </div>

    <div class="air-control air-control-padding" v-if="navType == 'all'">
      <div class="control-box">
        <div class="temp-slider" id="slideFloorId">
          <div class="slider-bar" id="barFloorId">
            <div class="bar-temp">26℃</div>
            <div class="bar-circle" id="handFloorId"></div>
          </div>
          <div class="temp-left" style="width: 22px">23</div>
          <div class="temp-right" style="width: 22px">28</div>
        </div>
      </div>
    </div>

    <!--灯控制按钮-->
    <div class="line" v-if="navType == 'child'"></div>
    <div class="light-box" v-if="navType == 'child'">
      <template v-for="(item, index) in lampList" :key="item.id">
        <div
          class="light-control"
          @click="showLightColorCtrol(item)"
          v-if="showFlag ? index < lampList.length : index < 2"
        >
          <div class="control-top">
            <div class="control-temp">
              <span>26<sup>℃</sup></span>
              <span>已开启</span>
            </div>
            <Switch
              active-color="$elActiveColor"
              :disabled="!userIsControl"
              v-model="item.switch"
              :loading="item.loading"
              size="14px"
              @click.stop="eqChange('main', item, index)"
              inactive-color="rgba(196, 196, 196, 0.2)"
              class="child-switch"
            />
          </div>
          <div class="control-bottom">
            <div class="control-title">
              {{ item.localName }}
            </div>
            <img
              :style="{ opacity: item.switch ? '1' : '0.3' }"
              :src="lightColorImg"
              alt=""
            />
          </div>
        </div>
      </template>
    </div>

    <div
      class="show-all"
      v-if="lampList && lampList.length > 2"
      @click.stop="showAll"
    >
      <van-icon :name="lightIcon" class="light-icon" />
      <span>展开更多</span>
    </div>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  watch,
  onBeforeMount,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import { Switch, Toast } from "vant";
import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor";
import { parseImgUrl } from "@/utils";
import { type } from "os";
import { onDeactivated } from "vue";
import { AnyMxRecord } from "dns";
import { swiper } from "@/utils/swiper";
import { nextTick } from "process";

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    controlMode: {
      type: Number,
      default: () => 0,
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
    forceOverTimeFlag: {
      type: Boolean,
      default: () => false,
    },
    showLight: {
      type: Boolean,
      default: () => false,
    },
    seviceEquipmentList: {
      // 是否走服务定制的设备
      type: Array,
      default: () => [],
    },
  },
  components: { Switch },
  setup(props, contx) {
    const lampList: any = [];
    let lightsStatusTimer: any = null;
    const timeOut: any = null;
    const initData: any = [];
    let lightParams: any = [];
    let heatingData: any = {
      minTempSet: 16,
      maxTempSet: 35,
    };
    const proxyData = reactive({
      seviceEquipmentList: props.seviceEquipmentList,
      showLight: props.showLight,
      spaceId: props.spaceId,
      controlMode: props.controlMode,
      userIsControl: props.userIsControl,
      forceOverTimeFlag: props.forceOverTimeFlag,
      setStatus: false,
      lightParams: lightParams,
      heatingData: heatingData,
      heatingTemp: 35,
      parseImgUrl: parseImgUrl,
      allowSvg: "down_Arrow.svg",
      timeOut: timeOut,
      lightIcon: "arrow-down",
      showFlag: false,
      loadingLight: false,
      loading: false,
      initData: initData,
      lampList: lampList,
      lightsStatusTimer: lightsStatusTimer,
      startCheckLightsTime: 0,
      lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
      lightImg: parseImgUrl("page-officehome", "lamp_close.png"),
      lampSw: false, // 主灯开关
      swiperIinit: false,
      part: 1,
      realTemp: 0,
      navType: "all",
      getElePading(ele: any, elePadingKey: any) {
        let style: any = getComputedStyle(ele, null);
        if (style) {
          return parseFloat(style.getPropertyValue(elePadingKey));
        } else {
          return 0;
        }
      },
      // 子设备导航切换
      checkNav(type: any = "all") {
        proxyData.navType = type;
      },
      // 滑动
      endBoxSwiper() {
        proxyData.swiperIinit = true;
        let handBox: any = document.querySelector("#handFloorId");
        let barBox: any = document.querySelector("#barFloorId");
        let sliderBox: any = document.querySelector("#slideFloorId");
        let sliderPadingL: any = 24;
        let sliderPadingR: any = 24;
        let isMove: any = false;
        let barLeft: any = 0;
        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
        if (sliderWidth > 1) {
          sliderWidth = sliderWidth - sliderPadingR;
        }
        let barWidth: any = barBox ? barBox.offsetWidth : 20;
        let tempPart = (35 - 16) / (sliderWidth - sliderPadingL - barWidth);
        let part: any = tempPart;
        proxyData.part = part;
        if (!handBox) {
          return;
        }
        handBox.addEventListener("touchstart", function (e: any) {
          barLeft = isNaN(parseInt(barBox.style.left))
            ? 0
            : parseInt(barBox.style.left);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
          // proxyData.changeZongAir("temp", proxyData.realTemp);
          // proxyData.heatingTemp = proxyData.realTemp;
        });
        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 < sliderPadingL ? sliderPadingL : left;
              barBox.style.left = left + "px";
              proxyData.realTemp = left * part;
            }
          },
          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 - barWidth : left;
              barBox.style.left = left + "px";
              proxyData.realTemp = left * part;
            }
          },
        });
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp = proxyData.heatingTemp;
        let barBox: any = document.querySelector("#barFloorId");
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#slideFloorId");
        if (
          proxyData.heatingTemp >= proxyData.heatingData.minTempSet &&
          proxyData.heatingTemp <= proxyData.heatingData.maxTempSet
        ) {
          // 正常温度范围
          let left: any =
            (proxyData.heatingTemp - proxyData.heatingData.minTempSet) /
            proxyData.part;
          left = Math.floor(left) + 24;
          if (barBox) {
            barBox.style.left = left + "px";
          }
        } else {
          if (!proxyData.heatingTemp) {
            barBox.style.left = 24 + "px";
          } else if (proxyData.heatingTemp < proxyData.heatingData.minTempSet) {
            barBox.style.left = 24 + "px";
          } else if (proxyData.heatingTemp > proxyData.heatingData.maxTempSet) {
            let sliderWidth: any = sliderBox.offsetWidth;
            let barWidth: any = barBox.offsetWidth;
            barBox.style.left = sliderWidth - barWidth + "px";
          }
        }
      },
      // 点击展示所有的登录
      showAll() {
        proxyData.showFlag = !proxyData.showFlag;
        console.log("proxyData.showFlag==", proxyData.showFlag);
        if (proxyData.showFlag) {
          proxyData.lightIcon = "arrow-up";
        } else {
          proxyData.lightIcon = "arrow-down";
        }
      },
      // 点击展示调色和调温弹窗
      showLightColorCtrol(item: any, e: any = null) {
        console.log(item);
        if (item.switch) {
          contx.emit("showLightColorCtrol", item);
        }
      },
      // 检查设备是否执行空间服务时间
      checkDeviceIsExeSpaceTime(deviceAll: any = []) {
        // debugger
        if (proxyData.controlMode !== 1) {
          return true;
        }
        let seviceEquipmentList: any = proxyData.seviceEquipmentList;
        let flag: any = false;
        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;
      },
      // 获取灯的状态
      getLampList() {
        getLampHttp({ spaceId: proxyData.spaceId })
          .then((res) => {
            const resData: any = res;
            if (!proxyData.setStatus) {
              if (resData && resData.result == "success") {
                let content = resData?.content ?? [];
                let lampOpen = false; // 如果有一个开 则总灯开
                for (let i = 0; i < content.length; i++) {
                  content[i].type = "lamp";
                  if (content[i].lightType == 1) {
                    content[i].imgOpen = parseImgUrl(
                      "page-officehome",
                      "lamp_open.png"
                    );
                    content[i].imgClose = parseImgUrl(
                      "page-officehome",
                      "lamp_close.png"
                    );
                  } else {
                    content[i].imgOpen = parseImgUrl(
                      "page-officehome",
                      "atmLamp_small_open.png"
                    );
                    content[i].imgClose = parseImgUrl(
                      "page-officehome",
                      "atmLamp_small_close.png"
                    );
                  }

                  content[i].switch = content[i].runStatus ? true : false;
                  if (content[i].runStatus) {
                    lampOpen = true;
                  }
                  content[i].loading = false;
                }
                proxyData.initData = JSON.parse(JSON.stringify(content)); //  灯的数据
                proxyData.lampSw = lampOpen; // 主灯开关
                proxyData.lampList = content;

                proxyData.lightImg = proxyData.lampSw
                  ? parseImgUrl("page-officehome", "lamp_open.png")
                  : parseImgUrl("page-officehome", "lamp_close.png");
                if (content[0]) {
                  if (content[0].lightType !== 1) {
                    proxyData.lightImg = proxyData.lampSw
                      ? parseImgUrl("page-officehome", "atmLamp_small_open.png")
                      : parseImgUrl(
                          "page-officehome",
                          "atmLamp_small_close.png"
                        );
                  }
                }
              }
            }
            // console.log("执行了----====");
            proxyData.startLightsStatusTimer();
          })
          .catch(() => {
            proxyData.startLightsStatusTimer();
          });
      },
      // 调整灯
      eqChange(type: any, item: any, index: any) {
        if (proxyData.userIsControl) {
          // debugger
          if (type === "allLamp") {
            let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
              proxyData.lampList
            );
            if (item !== "") {
              proxyData.lampSw = item; // 点击全开和全关的时候item动态传值true或者false
            }

            if (
              proxyData.forceOverTimeFlag &&
              proxyData.lampSw &&
              isExeSpaceTime
            ) {
              // 强制加班开灯
              contx.emit("triggerWork", 3);
              return;
            }
            //  总开关按钮所有灯
            //  当前要执行的灯的操作
            proxyData.loading = true;
            proxyData.loadingLight = true;
            proxyData.lightImg = proxyData.lampSw
              ? parseImgUrl("page-officehome", "lamp_open.png")
              : parseImgUrl("page-officehome", "lamp_close.png");
            const statusFlag = proxyData.lampSw;
            // 瞬间修改状态
            proxyData.setStatus = true;
            proxyData.updateAllLampStatus(statusFlag);
            proxyData.setLamp(type, "", statusFlag, 0); // 调接口
          } else {
            let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
              item,
            ]);
            if (proxyData.forceOverTimeFlag && item.switch && isExeSpaceTime) {
              // 强制加班开灯
              contx.emit("triggerWork", 3, item);
              return;
            }
            //当前要执行的灯的操作
            // 按钮loading
            item.loading = true;
            const statusFlag: any = item.switch;
            let id = item.id;
            proxyData.setStatus = true;
            proxyData.updateLampStatus(item, statusFlag);
            proxyData.setLamp(type, id, statusFlag, index, item); // 调接口
          }
        } else {
          Toast("您没有当前空间的控制权限！");
        }
      },
      //  控制灯的接口
      setLamp(
        type: string,
        id: any,
        statusFlag: any,
        index: any,
        item: any = null
      ) {
        let params: any = [];
        if (type === "allLamp") {
          for (let i = 0; i < proxyData.initData.length; i++) {
            proxyData.initData[i].switch = statusFlag;
          }
          params = proxyData.initData;
        } else {
          params = [
            {
              id: id,
              switch: statusFlag,
            },
          ];
        }
        proxyData.lightParams = params;
        // 调服务端的接口像后台发送灯的操作的指令
        setallLampHttp(params)
          .then((res) => {
            const resData: any = res;
            // set成功后1s关闭定时器
            setTimeout(() => {
              proxyData.setStatus = false;
            }, 1000);

            if (item) {
              item.loading = false;
            }
            if (resData.result === "success") {
              // const checkData: any = proxyData.judgeChangeResponeseSuccess(resData)
              // proxyData.getTimeLampStatus(checkData, type, id, statusFlag, index)
            } else {
              proxyData.initLampLoading();
            }
          })
          .catch((error: any) => {
            setTimeout(() => {
              proxyData.setStatus = false;
            }, 1000);
            if (item) {
              item.loading = false;
            }
            // console.log(error)
            Toast("连接异常,请检查网络！");
          });
      },
      // 报错后关闭灯的loading
      initLampLoading() {
        proxyData.loadingLight = false;
        proxyData.lampList.map((item: any) => {
          item.loading = false;
        });
      },
      //手动修改灯的状态
      updateAllLampStatus(statusFlag: any) {
        proxyData.lampSw = statusFlag;
        for (let i = 0; i < proxyData.lampList.length; i++) {
          proxyData.lampList[i].switch = statusFlag;
          // if (proxyData.lampList[i].type == 'lamp') {
          // }
        }
      },
      // 单个灯的状态修改
      updateLampStatus(item: any, statusFlag: any) {
        item.switch = statusFlag;
        // let flag: any = true
        // for (let i = 0; i < proxyData.lampList.length; i++) {
        //   if (proxyData.lampList[i].type == 'lamp') {
        //     if (proxyData.lampList[i].switch !== statusFlag) {
        //       flag = false
        //       break
        //     }
        //   }
        // }
      },
      // 轮询查看状态
      getTimeLampStatus(
        checkData: any,
        type: any,
        id: any,
        statusFlag: any,
        index: any
      ) {
        if (checkData["success"] && checkData["success"].length) {
          if (type === "allLamp") {
            // 点击主灯按钮
            proxyData.updateAllLampLoading(checkData["success"]); // 所有灯
          } else {
            // 当个的时候修改loading的状态
            proxyData.updateLampLoading(index);
          }
          proxyData.getLampList();
        }
        if (checkData["processing"] && checkData["processing"].length) {
          let checkParams: any = proxyData.lightParams;
          let processArr: any = checkData["processing"];
          let params: any = [];
          processArr.map((item: any) => {
            let obj: any = {
              id: item.id,
              orderSeqNum: item.orderSeqNum,
            };
            for (let i = 0; i < checkParams.length; i++) {
              if (item.id === checkParams[i].id) {
                obj.switch = checkParams[i].switch;
                break;
              }
            }
            params.push(obj);
          });
          proxyData.checkChangeLightStatusSuccess(
            params,
            type,
            id,
            statusFlag,
            index
          );
        }
        if (checkData["error"] && checkData["error"].length) {
          if (type === "allLamp") {
            // 点击主灯按钮
            proxyData.updateAllLampLoading(checkData["error"]); // 所有灯
          } else {
            // 当个的时候修改loading的状态
            proxyData.updateLampLoading(index);
          }
        }
      },
      // 查看指令是否成功完成
      judgeChangeResponeseSuccess(resData: any) {
        let data: any = resData?.content ?? [];
        let processingArr: any = [];
        let successArr: any = [];
        let errorArr: any = [];
        for (let i = 0; i < data.length; i++) {
          let item: any = data[i];
          if ((item.result = "success")) {
            if (item.state === 200 && item.exeResult === "success") {
              successArr.push(item);
            } else if (
              (item.state === 200 && item.exeResult === "processing:rcvd") ||
              (item.state === 202 && !item.exeResult)
            ) {
              processingArr.push(item);
            } else {
              errorArr.push(item);
            }
          } else {
            errorArr.push(item);
          }
        }
        let obj: any = {
          success: successArr,
          processing: processingArr,
          error: errorArr,
        };
        return obj;
      },
      // 操作成功后更新所有灯的真实状态
      updateAllLampLoading(arr: any) {
        for (let i = 0; i < proxyData.lampList.length; i++) {
          if (proxyData.lampList[i].type == "lamp") {
            arr.map((item: any) => {
              if (proxyData.lampList[i].id === item.id) {
                proxyData.lampList[i].loading = false;
              }
            });
          }
        }
        let loadingLen = proxyData.lampList.filter((item: any) => {
          return item.loading;
        });
        if (loadingLen.length === 0) {
          proxyData.loadingLight = false;
        }
      },
      // 动态切换主灯的状态
      updateLampLoading(index: any) {
        proxyData.lampList[index].loading = false;
      },
      // 灯的指令完成后更新状态
      checkChangeLightStatusSuccess(
        checkParams: any,
        type: any,
        id: any,
        value: any,
        index: any
      ) {
        // 轮询查询灯的状态
        getStatusHttp(checkParams).then((res) => {
          const resData: any = res;
          const checkData: any = proxyData.judgeChangeResponeseSuccess(resData);
          proxyData.getTimeLampStatus(checkData, type, id, value, index);
        });
      },
      // 灯灯接口清除定时器
      clearLightStatusTimer() {
        clearTimeout(proxyData.lightsStatusTimer);
        proxyData.lightsStatusTimer = null;
      },
      // 定时刷新接口
      startLightsStatusTimer(timerLen: any = 2000) {
        proxyData.clearLightStatusTimer();
        proxyData.lightsStatusTimer = setTimeout(() => {
          proxyData.clearLightStatusTimer();
          proxyData.getLampList();
        }, timerLen);
      },
    });
    const isShowChildLight: any = computed(() => {
      return proxyData.lampList.length && proxyData.lampList.length > 1;
    });
    // onDeactivated(()=>{
    //   destroyWatch()
    // })
    watch(
      [() => props, () => props.spaceId],
      (newProps: any, oldProps: any) => {
        // debugger
        if (newProps[0]) {
          proxyData.showLight = newProps[0].showLight;
          proxyData.userIsControl = newProps[0].userIsControl;
          proxyData.controlMode = newProps[0].controlMode;
          proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
          proxyData.seviceEquipmentList = newProps[0].seviceEquipmentList;
        }

        if (newProps[1] && oldProps[1] && newProps[1] != oldProps[1]) {
          // 空间id改变的重新获取值调用接口
          console.log("灯模块的spaceId变化了");
          // 清除原始数据
          proxyData.clearLightStatusTimer();
          proxyData.showFlag = false;
          proxyData.lampList = [];
          proxyData.spaceId = newProps[1];
          proxyData.getLampList();
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    onBeforeUnmount(() => {
      console.log("灯的组件销毁了--");
      proxyData.clearLightStatusTimer();
    });

    onMounted(() => {
      // proxyData.clearLightStatusTimer();
      proxyData.getLampList();
      nextTick(() => {
        setTimeout(() => {
          proxyData.endBoxSwiper();
          proxyData.setBarNowPerstion();
        }, 3000);
      });
    });
    return {
      isShowChildLight,
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.light {
  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;
}

.light-main {
  padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.floor-top {
  padding: 20px;
  .top-box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    .top-left {
      span {
        display: block;
        &:nth-child(1) {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          color: #4d5262;
        }
        &:nth-child(2) {
          padding-top: 4px;
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 32px;
          line-height: 39px;
          color: #1b2129;
          sup {
            font-family: "Mulish";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: #c4c4c4;
          }
        }
      }
    }
    .top-right {
      width: 106px;
      height: 62px;
      img {
        width: 106px;
        height: 62px;
      }
    }
  }

  .top-switch {
    display: flex;
    justify-content: space-between;
    // padding-bottom: 15px;
    .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;
        height: 28px;
        line-height: 14px;
        color: #424c59;
        &:nth-child(1) {
          border: 1px solid #e1e5eb;
          border-radius: 21px;
        }
        &:nth-child(2) {
          // padding-left: 0px;
        }
      }
      .nav-active {
        background: #fff;
      }
    }
    .switch-btn {
      margin-top: 0;
    }
  }
}

.air-control {
  padding: 10px;
  border-top: 1px solid #e8ecf0;
  .control-box {
    display: flex;
    justify-content: space-between;
  }
  .volume-box {
    padding: 10px;
    color: #c4c4c4;
    font-size: 12px;
    .text {
      padding-top: 5px;
      font-style: normal;
      font-weight: 600;
      font-size: 11px;
    }
    .number {
      span {
        display: inline-block;
        vertical-align: middle;
        color: #c4c4c4;
        padding-right: 5px;
      }
      .number-active {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        font-size: 22px;
        line-height: 24px;
        color: #4d5262 !important;
      }
    }
    .model {
      font-size: 14px;
      color: #1f2429;
    }
  }
  .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-text {
    height: 20px;
    line-height: 20px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    color: #c4c4c4;
    padding: 0 5px;
  }
  .temp-slider {
    position: relative;
    display: flex;
    height: 22px;
    flex: 1;
    padding: 0 32px;
    background: linear-gradient(
      270deg,
      #ffbab6 0%,
      #ffe7d1 29.05%,
      #f1efff 62%,
      #c8d6ff 100%
    );
    border-radius: 16px;

    .temp-left,
    .temp-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-family: "Persagy";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 22px;
      text-align: right;
      color: #626c78;
    }
    .temp-left {
      left: 0px;
      padding-left: 8px;
    }
    .temp-right {
      right: 0px;
      padding-right: 8px;
    }

    .slider-bar {
      position: absolute;
      width: 25px;
      left: 0;
      bottom: -2px;
      z-index: 333;
      .bar-temp {
        padding-bottom: 6px;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: #626c78;
      }
      .bar-circle {
        width: 25px;
        height: 25px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
          0px 4px 10px rgba(0, 0, 0, 0.07);
        border-radius: 21px;
        z-index: 444;
      }
    }
  }
  .control-text {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    color: #c4c4c4;
    padding: 10px 0 0 10px;
  }
}

.air-control-padding {
  padding: 30px 20px;
  // padding-top: 40px;
}

.line {
  border-top: 1px solid #e8ecf0;
  margin-bottom: 16px;
}
.light-main-control {
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 15px;
  // line-height: 36px;
  display: flex;
  justify-content: space-between;
  text-align: right;
  div {
    width: 36px;
  }
  .main-color {
    width: 36px;
    height: 36px;
    // line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background: #f7f9fa;
    img {
      width: 20px;
      height: 20px;
      margin-top: 8px;
    }
  }
  .switch-btn {
    margin-top: 6px;
    margin-right: 12px;
  }
}

.light-desc {
  padding-top: 10px;
  // padding-left: 5px;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
}

.light-right {
  position: relative;
  text-align: center;
  .switch-box {
    padding-top: 20px;
    padding-right: 15px;
    span {
      display: inline-block;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #2e3742;
      margin-left: 20px;
      // width: 60px;
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      background: #f1f4f6;
      border-radius: 21px;
    }
    .switch-item {
      &:hover {
        background: #e8ecf0;
      }
      &:active {
        background: #e8ecf0;
      }
    }
  }

  img {
    //width: 98px;
    height: 100px;
  }

  .switch-btn {
    position: absolute;
    right: -20px;
    bottom: 20px;
  }
}

.light-title {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.light-status {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 12px;
  line-height: 16px;
  color: #c4c4c4;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 15px 0px;
}

.show-all {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  padding-bottom: 15px;
  padding-top: 5px;
  color: #cccccc;
  text-align: center;
  .light-icon {
    font-size: 12px;
    padding-right: 10px;
  }
}

.line {
  border-top: 1px solid #e8ecf0;
  margin-top: 4px;
  margin-bottom: 16px;
}
.light-box {
  padding: 0 16px;
  font-size: 0;
}
.light-control {
  display: inline-block;
  width: 49%;
  vertical-align: middle;
  background: #f7f9fa;
  border-radius: 16px;
  padding-right: 16px;
  padding-left: 16px;
  padding-top: 13px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  &:nth-child(2n - 1) {
    margin-right: 2%;
  }
  .control-top {
    display: flex;
    padding-bottom: 26px;
    justify-content: space-between;
    .control-temp {
      vertical-align: middle;
      span {
        display: block;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 22px;
        color: #1b144e;
        &:nth-child(1) {
          margin-bottom: 4px;
          sup {
            width: 12px;
            height: 15px;
            font-family: "Mulish";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 15px;
            color: #c4c4c4;
          }
        }
        &:nth-child(2) {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 17px;
          color: #c4c9cf;
        }
      }
    }
    .child-switch {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .control-bottom {
    display: flex;
    justify-content: space-between;
    .control-title {
      font-weight: 500;
      font-family: PingFang SC;
      font-size: 16px;
      line-height: 20px;
      color: #4d5262;
    }
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
}
</style>
  <style class="style" lang="scss">
.light {
  .van-loading__spinner {
    color: $elActiveColor !important;
  }

  .van-switch__loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .van-switch--disabled {
    opacity: 0.5;
  }
}
</style>
  