<template>
  <div class="page">
    <action-bar title="色彩">
      <div class="action-bar-summary" :style="{backgroundColor: color}" />
    </action-bar>
    <div ref="container" class="content">
      <image class="color-table" :src="require('./images/color-table.png')" />
      <div ref="handle"  :style="{transform: `translate(${positionX}px, ${positionY}px)`, backgroundColor: color}" class="handle" />
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import { parse } from "bindingx-parser";
import Light from "./light.js";
const component = {
  name: "LightColor",
  components: { ActionBar },
  data() {
    return {
      color: Light.formatedColor,
      positionX: Math.sqrt(Math.pow(Math.abs(Light.positionX-195/2),2)+Math.pow(Math.abs(Light.positionY-195/2),2))<=195/2 ? Math.max(-25,Math.min(170,Light.positionX-25)) : Math.max(-25,Math.min(170,195/2/Math.sqrt(Math.pow(Math.abs(Light.positionX-195/2),2)+Math.pow(Math.abs(Light.positionY-195/2),2))*(Light.positionX-195/2)+195/2-25)),
      positionY: Math.sqrt(Math.pow(Math.abs(Light.positionX-195/2),2)+Math.pow(Math.abs(Light.positionY-195/2),2))<=195/2 ? Math.max(-25,Math.min(170,Light.positionY-25)) : Math.max(-25,Math.min(170,195/2/Math.sqrt(Math.pow(Math.abs(Light.positionX-195/2),2)+Math.pow(Math.abs(Light.positionY-195/2),2))*(Light.positionY-195/2)+195/2-25))
    };
  },
  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.translate",
              expression: parse(`(sqrt(pow(abs(x-195/2),2)+pow(abs(y-195/2),2))<=195/2)? 
               translate(max(-25,min(170,x-25)), max(-25,min(170,y-25))):
               translate(max(-25,min(170,195/2/sqrt(pow(abs(x-195/2),2)+pow(abs(y-195/2),2))*(x-195/2)+195/2-25)),
                max(-25,min(170,195/2/sqrt(pow(abs(x-195/2),2)+pow(abs(y-195/2),2))*(y-195/2)+195/2-25)))`),
            },
          ],
        },
        e => {
          // console.log("touch ", e);
          let x = e.x;
          let y = e.y;
          if (Math.sqrt(Math.pow(Math.abs(x-195/2),2)+Math.pow(Math.abs(y-195/2),2))>195/2) {
            x = Math.max(0,Math.min(195,195/2/Math.sqrt(Math.pow(Math.abs(x-195/2),2)+Math.pow(Math.abs(y-195/2),2)) * (x-195/2) + 195/2));
            y = Math.max(0,Math.min(195,195/2/Math.sqrt(Math.pow(Math.abs(x-195/2),2)+Math.pow(Math.abs(y-195/2),2)) * (y-195/2) + 195/2));
          }
          let t = Math.atan2(y-195/2, x-195/2);
          if (t < 0) {
            t = 2*Math.PI + t;
          }
          t /= 2*Math.PI;
          let d = Math.min(1,Math.sqrt(Math.pow(x-195/2,2)+Math.pow(y-195/2,2))/(195/2));
          if (e.state == 'end') {
            Light.setColor(t,d);
            Light.setColorTempPosition(x, y);
          }
          this.color = Light.formatColor(t, d);
        }
      );
    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 {
  align-items: center;
  background-color: black;
}
.content {
  width: 195px;
  height: 195px;
  margin-top: 25px;
  border-radius: 100px;
  overflow: visible;
}
.action-bar-summary {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 12px;
}
.color-table {
  position: absolute;
  width: 195px;
  height: 195px;
}
.handle {
  width: 50px;
  height: 50px;
  /* background-color: white; */
  border-radius: 25px;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.3);
  /* transform: translate(72.5px,72.5px); */
}
</style>
