<template>
  <div class="page">
    <action-bar title="亮度" />
    <div ref="container" class="content">
      <div ref="handle" class="handle" :style="{transform: `translateY(${brightness*205}px)`}" />
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import { parse } from "bindingx-parser";
import Light from "./light.js";
const component = {
  name: "LightBrightness",
  components: { ActionBar },
  data() {
    return {
      brightness: Light.brightness
    };
  },
  mounted() {
    const binding = this.$page.$bindingx;
    let bindingResult =
      binding.bind(
        {
          eventType: "touch",
          anchor: this.$refs.container.ref,
          props: [
            {
              element: this.$refs.handle.ref,
              property: "transform.translateY",
              expression: parse("max(0,min(205,y-27.5))"),
            },
          ],
        },
        function (e) {
          console.log("touch ", e);
          if (e.state == 'end') {
            let y = e.y;
            Light.setBrightness(Math.max(0,Math.min(205,y-27.5))/205);
          }
        }
      );
    this.bindingToken = bindingResult.token;
  },
  beforeDestroy() {
    const binding = this.$page.$bindingx;
    if (this.bindingToken) {
      binding.unbind({
        eventType: "touch",
        token: this.bindingToken,
      });
    }
  },
  methods: {},
};

export default component;
</script>

<style scoped>
.page {
  justify-content: center;
  align-items: center;
  background-color: black;
}
.content {
  flex: 1;
  width: 100%;
  background-image: linear-gradient(180deg, #ffffff 0%, #000000 100%);
  align-items: center;
}
.handle {
  width: 194px;
  height: 55px;
  background-color: white;
  border-radius: 28px;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
}
</style>
