<template>
  <div class="page">
    <action-bar title="色温">
      <text class="action-bar-summary">{{colorTempV}}</text>
    </action-bar>
    <div ref="container" class="content">
      <div ref="handle" class="handle" :style="{transform: `translate(${positionX}px, ${positionY}px)`, backgroundColor: color}" />
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import { parse } from "bindingx-parser";
import LightColorTemp from "./light-color-temp.js";
const component = {
  name: "LightColorTemp",
  components: { ActionBar },
  data() {
    return {
      color: LightColorTemp.formatedColor,
      colorTemp: LightColorTemp.colorTemp,
      colorTempV: LightColorTemp.formatColorTemp(LightColorTemp.colorTemp),
      positionX: Math.sqrt(Math.pow(Math.abs(LightColorTemp.positionX-195/2),2)+Math.pow(Math.abs(LightColorTemp.positionY-195/2),2))<=195/2 ? Math.max(-25,Math.min(170,LightColorTemp.positionX-25)) : Math.max(-25,Math.min(170,195/2/Math.sqrt(Math.pow(Math.abs(LightColorTemp.positionX-195/2),2)+Math.pow(Math.abs(LightColorTemp.positionY-195/2),2))*(LightColorTemp.positionX-195/2)+195/2-25)),
      positionY: Math.sqrt(Math.pow(Math.abs(LightColorTemp.positionX-195/2),2)+Math.pow(Math.abs(LightColorTemp.positionY-195/2),2))<=195/2 ? Math.max(-25,Math.min(170,LightColorTemp.positionY-25)) : Math.max(-25,Math.min(170,195/2/Math.sqrt(Math.pow(Math.abs(LightColorTemp.positionX-195/2),2)+Math.pow(Math.abs(LightColorTemp.positionY-195/2),2))*(LightColorTemp.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;
          let colorTemp;
          if (Math.sqrt(Math.pow(Math.abs(x-195/2),2)+Math.pow(Math.abs(y-195/2),2))<=195/2) {
            colorTemp = Math.max(0,Math.min(195,y)) / 195;
          } else {
            colorTemp = 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)) / 195;
          }
          if (e.state == 'end') {
            // if (Math.sqrt(Math.pow(Math.abs(x-195/2),2)+Math.pow(Math.abs(y-195/2),2))>195/2) {
              // LightColorTemp.setColor(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)));
            // } else {
              LightColorTemp.setColor(y);
            // }
            LightColorTemp.setColorTemp(colorTemp);
            LightColorTemp.setColorTempPosition(x, y);
          }
          this.color = LightColorTemp.formatColor(y);
          this.colorTempV = LightColorTemp.formatColorTemp(colorTemp);
        }
      );
    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;
}
.action-bar-summary {
  font-size: 20px;
  color: white;
  margin-right: 4px;
}
.content {
  width: 195px;
  height: 195px;
  margin-top: 25px;
  background-image: linear-gradient(180deg, #4FA8D8 0%, #FFFFFF 50%, #F1C37A 100%);
  border-radius: 100px;
  overflow: visible;
}
.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);
}
</style>
