<template>
  <div class="page">
    <action-bar title="亮度">
      <text class="action-bar-summary">{{brightnessT}}</text>
    </action-bar>
    <div ref="container" class="content">
      <div ref="handle" class="handle" :style="{transform: `translateY(${260-brightness*260}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,
      brightnessT: Light.formatBrightness(Light.brightness)
    };
  },
  mounted() {
    const binding = this.$page.$bindingx;
    let bindingResult =
      binding.bind(
        {
          eventType: "touch",
          anchor: this.$refs.container.ref,
          options: {
            enableMoveCallback: true
          },
          props: [
            {
              element: this.$refs.handle.ref,
              property: "transform.translateY",
              expression: parse("max(0,min(260,y))"),
            },
          ],
        },
        e => {
          let y = e.y;
          console.log("touch ", e);
          if (e.state == 'end') {
            Light.setBrightness(Math.max(0,Math.min(260,260-y))/260);
            
          }
          this.brightnessT = Light.formatBrightness(Math.max(0,Math.min(260,260-y))/260);
        }
      );
    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;
}
.action-bar-summary {
  font-size: 20px;
  color: white;
  margin-right: 4px;
}
.content {
  flex: 1;
  width: 100%;
  background-color: rgba(255,255,255,0.20);
  border-radius: 16px;
}
.handle {
  width: 240px;
  height: 260px;
  background-color: white;
}
</style>
