<template>
  <div class="page">
    <action-bar title="色彩" />
    <div ref="container" class="content">
      <div class="mask" />
      <div ref="handle" class="handle" />
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import { parse } from "bindingx-parser";
const component = {
  name: "LightColor",
  components: { ActionBar },
  data() {
    return {};
  },
  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.translate",
              expression: parse("translate(max(0,min(185,x-27.5)),max(0,min(205,y-27.5)))"),
            },
          ],
        },
        function (e) {
          console.log("touch ", e);
        }
      );
    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, #FF0000 0%, #F2FF00 18%, #00FF20 35%, #00F5FF 52%, #0600FF 71%, #F400FF 89%, #FF0000 100%);
}
.mask {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
}
.handle {
  width: 55px;
  height: 55px;
  background-color: white;
  border-radius: 28px;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
  transform: translate(92px,102px);
}
</style>
