<template>
  <div class="curtain-temp">
    <div class="curtain-tep-top">
      <span>
        {{
          curtainData && curtainData.length > 1 ? "窗帘" : curtainObj.name
        }}</span
      >
    </div>
    <div class="bright-box">
      <div class="bight-text">
        <span>设定开度</span>
        <span class="line"></span>
        <span class="text-aper">{{ apertureVal }}%</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 class="temp-left">关</div>
          <div class="temp-right">开</div>
        </div>
      </div>
    </div>

    <div class="curtain-control top-control">
      <!--左边-->
      <div
        class="control-item"
        :class="activeIndex == 1 ? 'control-item-active' : ''"
        @click="openCurtainMain(1)"
      >
        <template v-if="activeIndex != 1">
          <img
            class="curtain-left-icon"
            v-if="
              curtainObj.equipmentType != 4 && curtainObj.equipmentType != 5
            "
            :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
            alt=""
          />
          <img
            class="curtain-down-icon"
            v-else
            :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
            alt=""
          />
        </template>

        <span class="count-num" v-else>{{ count }}</span>
        <span class="title">关闭</span>
      </div>

      <!--暂停-->
      <!-- :class="activeIndex == 3 ? 'control-item-active' : ''" -->
      <div
        class="control-item control-stop"
        @click="openCurtainMain(3)"
      >
        <img
          class="curtain-stop-icon"
          :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
          alt=""
        />
        <span class="title">暂停</span>
      </div>

      <!-- {{ item }} -->
      <!--右边-->
      <div
        class="control-item"
        @click="openCurtainMain(2)"
        :class="activeIndex == 2 ? 'control-item-active' : ''"
      >
        <template v-if="activeIndex != 2">
          <img
            v-if="
              curtainObj.equipmentType != 4 && curtainObj.equipmentType != 5
            "
            :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
            alt=""
          />
          <img
            v-else
            class="curtain-up-icon"
            :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
            alt=""
          />
        </template>
        <span class="count-num" v-else>{{ count }}</span>
        <span class="title">打开</span>
      </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 = {};
    let interval: any = {};
    let curtainItem: any = "";
    const proxyData = reactive({
      lampSw: false,
      itemWidth: "0%",
      apertureVal: 0,
      activeIndex: 0,
      count: 2, // 到记时
      parseImgUrl: parseImgUrl,
      curtainObj: curtainObj,
      curtainData: props.curtainData,
      curtainItem: curtainItem,
      //亮度滑块滑动
      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;
          proxyData.formateCurtainData(4);
        });

        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";
              proxyData.apertureVal = (left / (sliderWidth - barWidth)) * 100;
              proxyData.apertureVal = Math.floor(proxyData.apertureVal);
            }
          },
          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";
              proxyData.apertureVal = (left / (sliderWidth - barWidth)) * 100;
              proxyData.apertureVal = Math.floor(proxyData.apertureVal);
            }
          },
        });
      },
      // 定时器定时计算
      interval: interval,
      countInterval() {
        proxyData.interval = setInterval(() => {
          proxyData.count--;
          if (proxyData.count == 0) {
            proxyData.count = 2;
            proxyData.activeIndex = 0;
            clearInterval(proxyData.interval);
          }
        }, 1000);
      },
      // 窗帘总开关
      openCurtainMain(type: any) {
        // type=1(关) type=2(开) type=3(暂停)
        if (proxyData.activeIndex == type && proxyData.count !== 0) {
          return;
        }
        proxyData.activeIndex = type;
        proxyData.count = 2;
        proxyData.countInterval();
        proxyData.formateCurtainData(type);
      },
      formateValue(type: any) {
        let value: any = 0;
        if (type == 1) {
          value = 0;
        } else if (type == 2) {
          value = 1;
        } else {
          value = 2;
        }
        return value;
      },
      // 处理窗帘数据
      formateCurtainData(type: any) {
        let data: any = [];
        let value: any = 0;
        if (type == 1) {
          // 关
          value = 0;
        } else if (type == 2) {
          // 开
          value = 1;
        } else if (type == 3) {
          // 暂停
          value = 2;
        } else {
          // 开度
          value = proxyData.apertureVal;
        }
        console.log("proxyData.curtainData==", proxyData.curtainData);
        proxyData.curtainData.map((item: any) => {
          let obj: any = {
            id: item.equipId,
            // id:'Eq110108025995ec5bdc23fc47a0a9d8debb150d18eb',
            code: type == 4 ? "EquipOpeningSet" : "EquipSwitchSet",
            value: value,
          };
          data.push(obj);
        });
        proxyData.changeCurtainStatus(data);
      },
      changeCurtainStatus(data: any) {
        // console.log("窗帘==", data);
        setSpaceCondtioners(data).then((res) => {});
      },
      // 初始化滑动
      async barSwiperInit() {
        nextTick(() => {
          proxyData.endBoxSwiper();
        });
      },
    });

    watch(props, (newProps: any) => {});
    onBeforeUnmount(() => {});
    onMounted(() => {
      proxyData.curtainObj = proxyData.curtainData[0];
      // console.log("加载了")
      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 {
        display: inline-block;
        vertical-align: middle;
        width: 1px;
        margin-left: 12px;
        margin-right: 12px;
        height: 14px;
        border-left: 1px solid #e1e5eb;
      }
      .text-aper {
        display: inline-block;
        vertical-align: middle;
        font-family: "Persagy";
        font-weight: 400;
      }
    }
    .curtain-control {
      .bight-slider {
        position: relative;
        display: flex;
        height: 32px;
        flex: 1;
        background: #e8ecf0;
        border-radius: 25px;
        .item-now {
          background: rgba(206, 159, 39, 0.4);
          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%
        );
      }
      .temp-left,
      .temp-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        width: 32px;
        // line-height: 20px;
        text-align: right;
        color: #626c78;
      }
      .temp-left {
        left: 0px;
        padding-left: 8px;
      }
      .temp-right {
        right: 0px;
        padding-right: 8px;
        text-align: left;
      }
    }

    .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;
      // padding-bottom: 40px;
      background: #f1f4f6;
      border-radius: 50%;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 24px;
        transform: translate(-50%, -50%);
      }

      .title {
        position: absolute;
        font-family: "PingFang SC";
        bottom: -28px !important;
        font-weight: 400;
        left: 13px !important;
        display: block;
        z-index: 333;
        font-size: 14px;
        color: #626c78;
      }
    }

    .control-stop {
      &:active {
        background: rgba(206, 159, 39, 0.4);
      }
    }

    .control-item-active {
      // position: relative;
      background: rgba(206, 159, 39, 0.4);
      .count-num {
        position: absolute;
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
      