<template>
  <div class="volumn-box" :class="isOpen ? 'active' : ''">
    <div class="top">
      <img
        :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
        alt=""
      />
      <div class="top-right">
        <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
      </div>
    </div>
    <div class="bottom">
      <div class="text">光照</div>
      <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
      <div class="right" @click="searchMore">
        <img
          :src="
            parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
          "
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  computed,
  watch,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
} from "vue";
import { Switch, Dialog, Loading, Toast } from "vant";
import { parseImgUrl } from "@/utils";
import any = jasmine.any;

export default defineComponent({
  components: {
    Switch,
    [Dialog.Component.name]: Dialog.Component,
    Loading,
  },
  setup(props, contx) {
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      isOpen: false,
      searchMore() {
        contx.emit("showMore",'lamp',true);
      },
    });
    onBeforeUnmount(() => {});
    onMounted(() => {});

    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.volumn-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
  height: 100%;
  border-radius: 24px 24px 44px 24px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  .top {
    display: flex;
    justify-content: space-between;
    img {
      width: 30px;
    }
  }
  .bottom {
    // margin-top: 18vh;
    position: relative;
    // margin-top: 109px;
    .text {
      //styleName: Chi/Body Large;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 300;
      line-height: 22px;
      letter-spacing: 0.02em;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(255, 255, 255, 1);
      padding-bottom: 2px;
    }
    .status {
      //styleName: Chi/Body XS;
      font-family: PingFang SC;
      font-size: 11px;
      font-weight: 400;
      line-height: 15px;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.4);
    }
    .right {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(60px);
      border-radius: 50%;
      text-align: center;
      img {
        width: 20px;
        height: 20px;
        margin-top: 8px;
      }
    }
  }
  .switch-btn {
    margin-top: 0;
    width: 50px !important;
    height: 28px !important;
    border: none;
  }
}
.active {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);

  .bottom {
    .text {
      color: rgba(0, 20, 40, 1);
    }
    .status {
      color: rgba(116, 128, 141, 1);
    }
  }
  .right {
    background: rgba(255, 255, 255, 0.4);
  }
}
</style>
<style lang="scss">
.volumn-box {
  .van-switch__node {
    background: rgba(255, 255, 255, 0.6);
    width: 24px;
    height: 24px;
    top: 0.33vh;
  }
  .van-switch--on.switch-btn {
    .van-switch__node {
      transform: translate(calc(50px - 28px)) !important;
    }
  }
  .van-switch--on {
    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
    .van-switch__node {
      background: #fff !important;
    }
  }
  .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;
  }
}
</style>
