<template>
  <div class="air">
    <div class="child-title">{{ airData.localName }}</div>
    <div class="child-box">
      <div class="air-control" v-if="airData.boundPoint && airData.boundPoint.tempSetBound" >
        <div class="air-title">
          <div>温度设定</div>
          <div></div>
          <div>{{ realTemp }}℃</div>
        </div>
        <div class="control-box">
          <div class="temp-slider" id="chlidAirSliderId">
            <div class="slider-bar" id="chlidAirBarId">
              <div
                class="bar-circle"
                style="border: 2px solid rgba(246, 249, 254, 1)"
              ></div>
            </div>
            <div class="temp-left">
              {{ airData.minTempSet }}
            </div>
            <div class="temp-right">
              {{ airData.maxTempSet }}
            </div>
          </div>
        </div>
      </div>
      <div class="air-control" v-if="airData.boundPoint && airData.boundPoint.gearSetBound">
        <div class="air-title">
          <div>风速</div>
          <div></div>
          <div>
            <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>
          </div>
        </div>
        <div class="control-box control-box-padding">
          <div class="icon-box">
            <div
              class="icon-item"
              :style="{
                opacity: airData.gear <= 1 ? '0.6' : 1,
              }"
              @click="changeZongAir('gear', 'windLow')"
            >
              <img :src="parseImgUrl('ipdImages', 'wind_small.svg')" />
            </div>
            <span>调小</span>
          </div>

          <div class="icon-box">
            <div
              class="icon-item"
              :style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
              @click="changeZongAir('gear', 'windUp')"
            >
              <img :src="parseImgUrl('ipdImages', 'wind_big.svg')" />
            </div>
            <span>调大</span>
          </div>

          <div class="icon-box">
            <div
              class="icon-item"
              @click="changeZongAir('gear', 'auto')"
              :class="airData.isAutoGear ? 'active-color' : ''"
            >
              <img :src="parseImgUrl('ipdImages', 'A.svg')" />
            </div>
            <span>自动</span>
          </div>
        </div>
      </div>
      <div class="air-control" v-if="airData.boundPoint && airData.boundPoint.modeSetBound">
        <div class="air-title">
          <div>模式</div>
          <div></div>
          <div v-if="airData.workMode === 1">制冷</div>
          <div v-else-if="airData.workMode === 2">制热</div>
          <div v-else>通风</div>
        </div>
        <div class="control-box control-box-padding">
          <div class="icon-box">
            <div
              class="icon-item"
              :class="airData.workMode === 1 ? 'active-color' : ''"
              @click="changeZongAir('mode', 1)"
            >
              <img
                :src="
                  airData.workMode === 2
                    ? parseImgUrl('ipdImages', 'aircoldblue.svg')
                    : parseImgUrl('ipdImages', 'aircoldblack.svg')
                "
              />
            </div>
            <span>制冷</span>
          </div>
          <div class="icon-box">
            <div
              class="icon-item"
              :class="airData.workMode === 2 ? 'active-color' : ''"
              @click="changeZongAir('mode', 2)"
            >
              <img
                :src="
                  airData.workMode === 1
                    ? parseImgUrl('ipdImages', 'airsunred.svg')
                    : parseImgUrl('ipdImages', 'airsunblack.svg')
                "
              />
            </div>
            <span>制热</span>
          </div>
          <div class="icon-box">
            <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>
            <span>通风</span>
          </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, getRelNowTime, parseImgUrl, setQueryConfig } from "@/utils";
import any = jasmine.any;

export default defineComponent({
  props: {
    temperature: {
      // 空调基本信息
      type: Number,
      default: () => 0
    },
    airData: {
      type: Object,
      default: () => {}
    },
    // 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: () => []
    }
  },
  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, //  风量
      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,
      loadingTimer: 0,
      airTemp: 0, // 设备真实温度
      loadingAir: false,
      windGearArr: windGearArr, // 风量3/5个档位
      lightIcon: "arrow-down",
      showChild: false,
      airData: props.airData,
      realTemp: realTemp,
      temperature: props.temperature,
      userIsControl: props.userIsControl,
      forceOverTimeFlag: props.forceOverTimeFlag,
      firstLoadingAir: true,
      domAirOpeen: domAirOpeen,
      swiperIinit: false,
      parseImgUrl: parseImgUrl,
      part: 1,
      modeName: "",
      showAirVolumeBtn: false, // 是否展示风量调节按钮
      showDialog: false,
      airTimer: airTimer,
      airSetText: {
        // 空调反馈文案
        notice: "",
        remark: [],
        nowImg: "",
        toWhere: "",
        designTemperature: 0
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp = proxyData.airTemp;
        let barBox: any = document.querySelector("#chlidAirBarId");
        // console.log("设置温度位置---");
        // console.log(barBox)
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#chlidAirSliderId");
        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 + "px";
          } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
            barBox.style.left = 0 + "px";
          } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
            let sliderWidth: any = sliderBox.offsetWidth;
            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() {
        proxyData.swiperIinit = true;
        let handBox: any = document.querySelector("#chlidAirBarId");
        let barBox: any = document.querySelector("#chlidAirBarId");
        let sliderBox: any = document.querySelector("#chlidAirSliderId");
        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;
        }
        console.log("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) {
          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.airTemp = 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 < 0 ? 0 : left;
              barBox.style.left = left + "px";
              proxyData.realTemp = left * part + proxyData.airData.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;
              proxyData.realTemp = left * part + proxyData.airData.minTempSet;
              // proxyData.realTemp = Math.round(proxyData.realTemp);
              if (proxyData.realTemp) {
                proxyData.realTemp = proxyData.realTemp.toFixed(1);
                proxyData.realTemp = fix(proxyData.realTemp);
              }
              barBox.style.left = left + proxyData.sliderPading + "px";
            }
          }
        });
      },
      // 获取操作时长
      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,
      // 格式化空调数据
      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;
      },
      // 改变设备状态
      setSpaceCondtioners(data: any) {
        setSpaceCondtioners(data)
          .then(res => {
            proxyData.loadinngEnd();
          })
          .catch(() => {
            proxyData.loadinngEnd();
            Toast("连接异常,请检查网络！");
          });
      },
      // 改变空调状态
      changeZongAir(btnType: any, text: any) {
        let equpObj: any = proxyData.formatAirData(btnType, text);
        if (!(equpObj && equpObj.codeKey)) {
          return;
        }
        let data: any = [];
        let obj: any = {
          id: proxyData.airData.id, //类型：String  必有字段  备注：设备id
          code: proxyData.airData[equpObj.codeKey], //类型：String  必有字段  备注：编码 EquipSwtichSet
          value: equpObj.value //类型：String  必有字段  备注：值 0
        };
        data.push(obj);
        console.log("设备数据处理---");
        console.log(data);
        if (!proxyData.cotrolLoading) {
          proxyData.loadingStart();
          proxyData.setSpaceCondtioners(data);
        }
      },
      // 初始化滚动
      async barSwiperInit() {
        proxyData.endBoxSwiper();
        // debugger
        proxyData.setBarNowPerstion();
      }
    });
    onBeforeUnmount(() => {});
    onMounted(() => {
      proxyData.airTemp = props.airData.tempSet;
      nextTick(() => {
        proxyData.barSwiperInit();
      });
    });
    return {
      ...toRefs(proxyData)
    };
  }
});
</script>
  <style lang="scss" scoped>
.air {
  position: relative;
  width: 100%;
  background: #ffffff;
  padding: 20px 10px;
  .child-title {
    font-family: "PingFang SC";
    padding-bottom: 48px;
    font-size: 22px;
    font-weight: 500;
    line-height: 31px;
    letter-spacing: 0px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
  }

  .active-color {
    background: $elActiveColor !important;
    span {
      color: #fff !important;
    }
  }
  .child-box {
    padding-bottom: 16px;
  }
  .air-control {
    // padding: 20px;
    // padding-top: 28px;
    padding-bottom: 48px;

    .air-title {
      padding-bottom: 16px;
      div {
        display: inline-block;
        &:nth-child(1) {
          font-family: "PingFang SC";
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
        }
        &:nth-child(2) {
          width: 0;
          height: 15px;
          margin: 0 12px;
          border-left: 1px solid rgba(225, 229, 235, 1);
        }
        &:nth-child(3) {
          font-family: "Persagy";
          font-size: 16px;
          font-weight: 400;
          line-height: 19px;
          letter-spacing: 0px;
          .volume-box {
            .text {
              font-family: "PingFang SC";
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              letter-spacing: 0px;
              color: rgba(196, 201, 207, 1);
            }
            .number {
              span {
                font-family: "Persagy";
                font-size: 12px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0px;
                padding-right: 8px;
                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-size: 14px;
              color: #1f2429;
            }
          }
        }
      }
    }
    .control-box {
      // padding: 0 28px;
    }
    .control-box-padding {
      padding: 0 28px;
      display: flex;
      justify-content: space-between;
    }
    .icon-box {
      position: relative;
      width: 56px;
      text-align: center;
      .icon-item {
        position: relative;
        display: block;
        width: 56px;
        height: 56px;
        background: rgba(196, 196, 196, 0.2);
        border-radius: 50%;
        img {
          width: 28px;
          height: 28px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      span {
        display: inline-block;
        padding-top: 8px;
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: center;
        color: rgba(98, 108, 120, 1);
      }
    }

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

      .slider-bar {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 333;
        width: 32px;
        height: 32px;
        .bar-circle {
          width: 30px;
          height: 30px;
          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;
        }
      }
      .temp-left,
      .temp-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Persagy";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        text-align: right;
        color: #626c78;
      }
      .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;
    }
  }
}
</style>
  <style lang="scss">
.air {
  .loading-box {
    .van-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .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;
  }
  .child-control-box {
    .child-switch {
      // position: relative;
      .van-switch__node {
        // margin-top: -6px;
        // width: 20px !important;
        // height: 20px !important;
      }
    }
  }
}
</style>
    