<template>
  <div class="base-bg">
    <div class="zhp-title">
      <img
        class="leftImg"
        src="@/assets/imgs/show/back.png"
        @click="router.back()"
      />
      <div class="zhp-title-text">全屋设定</div>
      <div class="whole-fwsd" @click="router.push('/wholeSettingRange')">
        范围设定
      </div>
      <img
        class="whole-setting-what"
        src="@/assets/imgs/show/whole_setting_what.png"
        @click="router.push('/wholeSettingWhat')"
      />
      <img class="whole-rightImg" src="@/assets/imgs/show/right.png" />
    </div>
    <div class="whole-setting-bg">
      <div class="whole-zd-white">自动</div>
      <img
        v-show="isAuto"
        class="whole-setting-close"
        src="@/assets/imgs/show/icon_open.png"
        @click="openAuto"
      />
      <img
        v-show="!isAuto"
        class="whole-setting-close"
        src="@/assets/imgs/show/icon_close.png"
        @click="openAuto"
      />
      <div class="whole-line"></div>
      <div class="whole-setting-reduce1" @click="temSetting('leftR')">
        <img
          v-show="isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_-gray.png"
        />
        <img
          v-show="!isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_-white.png"
        />
      </div>
      <div class="whole-setting-reduce2" @click="temSetting('leftR2')">
        <img
          v-show="isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_-gray.png"
        />
        <img
          v-show="!isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_-white.png"
        />
      </div>
      <div class="whole-setting-add1" @click="temSetting('rightA')">
        <img
          v-show="isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_+gray.png"
        />
        <img
          v-show="!isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_+white.png"
        />
      </div>
      <div class="whole-setting-add2" @click="temSetting('rightA2')">
        <img
          v-show="isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_+gray.png"
        />
        <img
          v-show="!isAuto"
          class="whole-36"
          src="@/assets/imgs/show/whole_setting_+white.png"
        />
      </div>
      <div class="zhp-vertical margin-top-115">
        <div class="tem-top">{{ tem >= 0 && tem < 10 ? "0" + tem : tem }}</div>
        <div class="tem-seting1">温度设定</div>
        <div class="tem-top">{{ hum }}</div>
        <div class="tem-seting1">湿度设定</div>
      </div>
      <div class="zhp-vertical margin-top-129">
        <div class="tem-seting2">℃</div>
        <div class="tem-seting2 margin-top-140">%</div>
      </div>
    </div>
    <div class="whole-bottom-btn" @click="wholeSetting">设定</div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onActivated, onBeforeMount, ref } from "vue";
import router from "@/router";

const isAuto = ref(true);
const tem = ref(16);
const hum = ref(30);
const { proxy } = getCurrentInstance() as any;
const queryType = ref(1);

onActivated(() => {
  const query: any = router.currentRoute.value.query;
  if (query) {
    queryType.value = query.type;
    setData();
  }
});

const setData = () => {
  switch (queryType.value) {
    case 1: //春季
      tem.value = 24;
      hum.value = 50;
      break;
    case 2: //夏季
      tem.value = 26;
      hum.value = 60;
      break;
    case 3: //梅雨
      tem.value = 24;
      hum.value = 60;
      break;
    case 4: //冬季
      tem.value = 22;
      hum.value = 50;
      break;
  }
};
/**
 * 全屋设定，Event通知值变化
 */
const wholeSetting = () => {
  proxy.$eventBusService.emit("queryData", { tem: tem.value, hum: hum.value });
  router.back();
};
const temSetting = (type: String) => {
  if (!isAuto.value) {
    switch (type) {
      case "leftR":
        if (tem.value > -20) {
          tem.value--;
        }
        break;
      case "rightA":
        if (tem.value < 100) {
          tem.value++;
        }
        break;
      case "leftR2":
        if (hum.value > 1) {
          hum.value--;
        }
        break;
      case "rightA2":
        if (hum.value < 100) {
          hum.value++;
        }
        break;
    }
  }
};
/**
 * 自动开启关闭
 */
const openAuto = () => {
  isAuto.value = !isAuto.value;
  if (isAuto.value) {
    //自动
    setData();
  }
};
</script>
<style lang="scss" scoped>
.whole-setting-bg {
  width: 672px;
  height: 440px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("@/assets/imgs/show/whole_setting_bg.png");
}

.whole-line {
  height: 1px;
  position: absolute;
  top: 88px;
  right: 24px;
  left: 24px;
  background-color: rgba($color: #fff, $alpha: 0.2);
}

.whole-rightImg {
  position: absolute;
  width: 48px;
  height: 48px;
  right: 24px;
}

.whole-setting-what {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 230px;
}

.whole-fwsd {
  position: absolute;
  right: 72px;
  font-size: 28px;
  color: white;
  font-weight: 400;
}

.whole-zd-gray {
  right: 128px;
  font-size: 28px;
  color: rgba($color: #fff, $alpha: 0.1);
  font-weight: 400;
}

.whole-zd-white {
  position: absolute;
  top: 30px;
  right: 128px;
  font-size: 28px;
  color: white;
  font-weight: 400;
}

.whole-setting-close {
  width: 92px;
  height: 48px;
  position: absolute;
  right: 24px;
  top: 20px;
}

.whole-setting-reduce1 {
  top: 124px;
  width: 110px;
  height: 110px;
  position: absolute;
  left: 84px;
  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  align-items: center;
  justify-content: center;
  display: flex;
}

.whole-setting-reduce2 {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 84px;
  bottom: 36px;
  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  align-items: center;
  justify-content: center;
  display: flex;
}

.whole-setting-add1 {
  width: 110px;
  height: 110px;
  position: absolute;
  right: 84px;
  top: 124px;
  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  align-items: center;
  justify-content: center;
  display: flex;
}

.whole-setting-add2 {
  width: 110px;
  height: 110px;
  position: absolute;
  right: 84px;
  bottom: 36px;
  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  align-items: center;
  justify-content: center;
  display: flex;
}

.tem-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tem-top {
  font-weight: 500;
  font-size: 76px;
  margin-bottom: 2px;
  margin-right: 6px;
  color: white;
}

.tem-seting1 {
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 50px;
  color: white;
}

.tem-seting2 {
  font-weight: 500;
  font-size: 24px;
  color: white;
}

.whole-bottom-btn {
  bottom: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 672px;
  height: 110px;
  background-image: url("@/assets/imgs/show/bg_btn.png");
  background-repeat: no-repeat;
  background-size: contain;
  color: #ffffff;
  font-size: 40px;
  font-weight: 400;
}

.whole-36 {
  width: 36px;
  height: 36px;
}

.margin-top-115 {
  margin-top: 115px;
}

.margin-top-129 {
  margin-top: 129px;
}

.margin-top-140 {
  margin-top: 140px;
}
</style>
