<template>
  <div class="page">
    <action-bar title="开关" />
    <div class="container">
      <div ref="button" class="switch-button" @touchstart="touchstart" @touchend="touchend">
        <img ref="handle" class="handle" resize="center" :src="require('./images/icon-power.png')" />
        <text class="button-text">右滑开启</text>
        <img class="button-arrow-right" resize="center" :src="require('./images/icon-arrow-right.png')" />
      </div>
    </div>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import { parse } from "bindingx-parser";
const component = {
  name: "LightSwitch",
  components: { ActionBar },
  data() {
    return {};
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    touchstart(e) {
      if (e.changedTouches[0].pageX < 70) {
        const binding = this.$page.$bindingx;
        let bindingResult =
          binding.bind(
            {
              eventType: "touch",
              anchor: this.$refs.button.ref,
              props: [
                {
                  element: this.$refs.handle.ref,
                  property: "transform.translateX",
                  expression: parse("max(0,min(130,x-35))"),
                },
              ],
            },
            function (e) {
              console.log("touch ", e);
            }
          );
        this.bindingToken = bindingResult.token;
      }
    },
    touchend(e) {
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  justify-content: center;
  align-items: center;
  background-color: black;
}
.container {
  flex: 1;
  width: 100%;
  align-items: center;
}
.switch-button {
  width: 200px;
  height: 70px;
  margin-top: 65px;
  border-radius: 35px;
  background-color: #2B2F35;
  flex-direction: row;
  align-items: center;
}
.handle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background-color: white;
}
.button-text {
  margin-left: 13px;
  font-size: 18px;
  color: rgba(255,255,255,0.6)
}
.button-arrow-right {
  margin-left: 7px;
  width: 10px;
  height: 17px;
}
</style>
