<template>
  <div class="curtain-temp">
    <div class="curtain-tep-top">
      <span>窗帘</span>
    </div>
    <div class="bright-box">
      <div class="bight-text">
        <span>开度</span>
        <span class="line"></span>
        <span>20%</span>
      </div>
      <div class="curtain-control">
        <div class="bight-slider" id="curtainSlider1">
          <div class="item-now" :style="{ width: itemWidth }"></div>
          <div class="slider-bar" id="curtainHandld1"></div>
        </div>
      </div>
    </div>

    <div class="curtain-control top-control">
      <!--左边-->
      <div class="control-item">
        <img
          v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
          :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
          alt=""
        />
        <img
          v-else
          :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
          alt=""
        />
      </div>

      <!--暂停-->
      <div class="control-item">
        <img :src="parseImgUrl('page-officehome', 'curtain_stop.svg')" alt="" />
      </div>

      <!-- {{ item }} -->
      <!--右边-->
      <div class="control-item">
        <img
          v-if="curtainObj.equipmentType == 4 || curtainObj.equipmentType == 5"
          :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
          alt=""
        />
        <img
          v-else
          :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
          alt=""
        />
      </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 { parseImgUrl, setQueryConfig } from "@/utils";
import any = jasmine.any;

export default defineComponent({
  props: {
    curtainData: {
      type: Array,
      default: () => [],
    },
  },
  components: { Switch },
  setup(props, contx) {
    const propsVal = props;
    let timeTemp: any = null;
    let curtainObj: any = {};
    const proxyData = reactive({
      lampSw: false,
      itemWidth: "0%",
      parseImgUrl: parseImgUrl,
      curtainObj: curtainObj,
      curtainData: props.curtainData,
      //亮度滑块滑动
      endBoxSwiper() {
        let handBox: any = document.querySelector("#curtainHandld1");
        let sliderBox: any = document.querySelector("#curtainSlider1");
        let isMove: any = false;
        let barLeft: any = 0;
        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;

        if (!handBox) {
          return;
        }
        let barWidth: any = handBox.getBoundingClientRect().width;

        handBox.addEventListener("touchstart", function (e: any) {
          barLeft = isNaN(parseInt(handBox.style.left))
            ? 0
            : parseInt(handBox.style.left);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
        });

        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;
              // debugger
              handBox.style.left = left + "px";
              proxyData.itemWidth = left + barWidth / 2 + "px";
            }
          },
          swipeRight: function (e: any) {
            // debugger;
            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 - barWidth ? sliderWidth - barWidth : left;
              handBox.style.left = left + "px";
              proxyData.itemWidth = left + barWidth / 2 + "px";
            }
          },
        });
      },

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

    watch(props, (newProps: any) => {});
    onBeforeUnmount(() => {});
    onMounted(() => {
      proxyData.curtainObj = proxyData.curtainData[0];
      proxyData.barSwiperInit();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.curtain-temp {
  padding: 24px 20px;
  .curtain-tep-top {
    display: flex;
    padding-bottom: 48px;
    line-height: 31px;
    justify-content: space-between;
    span {
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 500;
      font-size: 22px;

      color: #000000;
    }
  }
  .bright-box {
    .bight-text {
      line-height: 22px;
      padding-bottom: 17px;
      span {
        display: inline-block;
        vertical-align: middle;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #1b2129;
      }
      .line {
        width: 1px;
        margin-left: 12px;
        margin-right: 12px;
        height: 22px;
        border-left: 1px solid #e1e5eb;
      }
    }
    .curtain-control {
      .bight-slider {
        position: relative;
        display: flex;
        height: 32px;
        flex: 1;
        background: #e8ecf0;
        border-radius: 25px;
        .item-now {
          background: #ffe399;
          border-radius: 25px 0 0 25px;
        }

        .slider-bar {
          position: absolute;
          width: 38px;
          height: 38px;
          background: #f6f9fe;
          left: 0;
          bottom: -2px;
          z-index: 333;
          border-radius: 50%;
          border: 2px solid #fff;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
            0px 0px 8px rgba(0, 0, 0, 0.1);
        }
      }
      .temp-slider {
        background: linear-gradient(
          90deg,
          #ffc079 0%,
          #ffe7d1 43.1%,
          #f1efff 74.36%,
          #c8d6ff 100%
        );
      }
    }

    .curtain-control-padding {
      padding-top: 35px;
      padding-bottom: 15px;
    }
  }

  .top-control {
    display: flex;
    justify-content: space-between;
    padding: 51px 27px;
    padding-bottom: 0;
    .control-item {
      position: relative;
      display: inline-block;
      width: 56px;
      height: 56px;
      background: #f1f4f6;
      border-radius: 50%;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
      