<template>
  <div class="page">
   <action-bar title="亮度">
      <text class="action-bar-summary">{{parseInt(this.brightness*100)}}%</text>
    </action-bar>
    <div ref="container" class="content">
      <div ref="handle" class="handle" :style="{transform: `translateY(${parseFloat(1-this.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
    };
  },
  mounted() {
    Light.on('brightness', this.updateBrightness);

    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.min(1, Math.max(0, (260-y)/260)));
          }
          this.brightness = Math.min(1, Math.max(0, (260-y)/260))
        }
      );
    this.bindingToken = bindingResult.token;
  },
  beforeDestroy() {
    Light.off('brightness', this.updateBrightness);

    const binding = this.$page.$bindingx;
    if (this.bindingToken) {
      binding.unbind({
        eventType: "touch",
        token: this.bindingToken,
      });
    }
  },
  methods: {
    back(e) {
      if (/*外面监听back事件*/0) {
        this.$emit('back');
      } else {
        this.$page.finish();
      }
    },
    updateBrightness(e) {
      this.brightness = Light.brightness;
    },
  },
};

export default component;
</script>

<style scoped>
.page {
  justify-content: center;
  align-items: center;
  background-color: black;
}
.container {
  width: 100%;
  height: 60px;
  flex-direction: row;
  align-items: center;
}
.action-bar-summary {
  font-size: 20px;
  color: white;
  margin-right: 4px;
}
.back {
  width: 13px;
  height: 23px;
  margin-left: 20px;
  margin-right: 22px;
}
.title {
  color: white;
  font-size: 20px;
  text-overflow: ellipsis;
  margin-right: 10px;
  flex: 1;
  lines: 1;
}
.brightness {
  color: white;
  font-size: 20px;
  text-overflow: ellipsis;
  margin-right: 4px;
  lines: 1;
}
.content {
  flex: 1;
  width: 100%;
  background-color: rgba(255,255,255,0.20);
  align-items: center;
  border-radius: 16px;
}
.handle {
  /* top: 0px; */
  width: 240px;
  height: 260px;
  background-color: white;
}
</style>
