<template>
  <div class="light-temp">
    <div class="light-tep-top">
      <span>地暖</span>
    </div>
    <div class="bright-box">
      <div class="bight-text">
        <span>温度调节</span>
        <span>{{ realTemp ? realTemp : "--" }}℃</span>
      </div>
      <div class="control-box">
        <div class="temp-slider" id="slideFloorId2">
          <div class="slider-bar" id="barFloorId2">
            <!-- <div class="bar-temp">{{ realTemp }}℃</div> -->
            <div class="bar-circle" id="handFloorId2"></div>
          </div>
          <div class="temp-left" id="tempLeftId">
            {{ floorData.minTempSet }}
          </div>
          <div class="temp-right">
            {{ floorData.maxTempSet }}
          </div>
        </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, parseImgUrl, setQueryConfig } from "@/utils";
import any = jasmine.any;

export default defineComponent({
  props: {
    floorData: {
      type: Object,
      default: () => {}
    }
  },
  components: { Switch },
  setup(props, contx) {
    const propsVal = props;
    let timeTemp: any = null;
    let timeColor: any = null;
    let realTemp: any = 0;
    const proxyData = reactive({
      lampSw: false,
      itemWidth: "0%",
      realTemp: realTemp,
      part: 0,
      floorData: props.floorData,
      swiperIinit: false,
      // 改变空调状态(child)
      changeChildTemp() {
        let data: any = [];
        let obj: any = {
          id: proxyData.floorData.id, //类型：String  必有字段  备注：设备id
          code: proxyData.floorData.tempSetCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
          value: proxyData.realTemp //类型：String  必有字段  备注：值 0
        };
        data.push(obj);
        console.log(data);
        proxyData.setSpaceCondtioners(data);
      },
      // 改变设备状态
      setSpaceCondtioners(data: any) {
        console.log("调节数据", data);
        setSpaceCondtioners(data)
          .then(res => {})
          .catch(() => {
            Toast("连接异常,请检查网络！");
          });
      },
      getEleWidth(ele: any) {
        // debugger;
        if (ele) {
          return ele.getBoundingClientRect().width;
        } else {
          return 1;
        }
      },
      sliderPading: 0,
      // 滑动
      endBoxSwiper() {
        proxyData.swiperIinit = true;
        let handBox: any = document.querySelector("#handFloorId2");
        let barBox: any = document.querySelector("#barFloorId2");
        let sliderBox: any = document.querySelector("#slideFloorId2");
        let tempLeftBox: any = document.querySelector("#tempLeftId");
        let sliderPadingL: any = proxyData.getEleWidth(tempLeftBox);
        let sliderPadingR: any = sliderPadingL;
        proxyData.sliderPading = sliderPadingL;
        let isMove: any = false;
        let barLeft: any = 0;
        let sliderWidth: any = proxyData.getEleWidth(sliderBox);
        let barWidth: any = proxyData.getEleWidth(barBox);
        if (sliderWidth > 1) {
          sliderWidth = sliderWidth - barWidth;
        }
        let tempPart =
          (proxyData.floorData.maxTempSet - proxyData.floorData.minTempSet) /
          sliderWidth;
        console.log("tempPart==", tempPart);
        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.changeChildTemp();
        });
        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";
              proxyData.realTemp = left * part + proxyData.floorData.minTempSet;
              // proxyData.realTemp = Math.round(proxyData.realTemp);
              if (proxyData.realTemp) {
                proxyData.realTemp = proxyData.realTemp.toFixed(1);
                proxyData.realTemp = fix(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;
              barBox.style.left = left + "px";
              proxyData.realTemp = left * part + proxyData.floorData.minTempSet;
              // proxyData.realTemp = Math.round(proxyData.realTemp);
              if (proxyData.realTemp) {
                proxyData.realTemp = proxyData.realTemp.toFixed(1);
                proxyData.realTemp = fix(proxyData.realTemp);
              }
            }
          }
        });
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp =
          proxyData.floorData && proxyData.floorData.tempSet
            ? proxyData.floorData.tempSet
            : 0;
        let barBox: any = document.querySelector("#barFloorId2");
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#slideFloorId2");
        if (
          proxyData.realTemp !== 0 &&
          proxyData.realTemp >= proxyData.floorData.minTempSet &&
          proxyData.realTemp <= proxyData.floorData.maxTempSet
        ) {
          // 正常温度范围
          let left: any =
            (proxyData.realTemp - proxyData.floorData.minTempSet) /
            proxyData.part;
          left = Math.floor(left) + proxyData.sliderPading;
          if (barBox) {
            barBox.style.left = left + "px";
          }
        } else {
          if (!proxyData.realTemp) {
            barBox.style.left = proxyData.sliderPading + "px";
          } else if (proxyData.realTemp < proxyData.floorData.minTempSet) {
            barBox.style.left = proxyData.sliderPading + "px";
          } else if (proxyData.realTemp > proxyData.floorData.maxTempSet) {
            let sliderWidth: any = sliderBox.offsetWidth;
            let barWidth: any = barBox.offsetWidth;
            barBox.style.left = sliderWidth - barWidth + "px";
          }
        }
      },

      // 初始化滑动
      async barSwiperInit() {
        nextTick(() => {
          proxyData.endBoxSwiper();
          proxyData.setBarNowPerstion();
        });
      }
    });

    watch(props, (newProps: any) => {});
    onBeforeUnmount(() => {});
    onMounted(() => {
      proxyData.barSwiperInit();
    });
    return {
      ...toRefs(proxyData)
    };
  }
});
</script>
  <style lang="scss" scoped>
.light-temp {
  padding: 10px;
  .light-tep-top {
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #000000;
    padding-bottom: 48px;
  }
  .bright-box {
    margin-bottom: 60px;
    .bight-text {
      padding-bottom: 46px;
      span {
        &:nth-child(1) {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 22px;
          color: #1b2129;
          padding-right: 12px;
        }
        &:nth-child(2) {
          padding-left: 12px;
          font-family: "Persagy";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 19px;
          text-align: right;
          color: #1b2129;
          border-left: 1px solid #e1e5eb;
        }
      }
    }
    .control-box {
      display: flex;
      justify-content: space-between;
      .temp-slider {
        position: relative;
        display: flex;
        height: 32px;
        flex: 1;
        padding: 0 24px;
        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;
          width: 32px;
          line-height: 22px;
          text-align: right;
          color: #626c78;
        }
        .temp-left {
          left: 0px;
          padding-left: 8px;
        }
        .temp-right {
          right: 0px;
          padding-right: 8px;
          text-align: left;
        }

        .slider-bar {
          position: absolute;
          width: 38px;
          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: 38px;
            height: 38px;
            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;
          }
        }
      }
    }
  }
}
</style>
      