<template>
  <div class="page">
    <action-bar title="开关" />
    <img 
      :class="'icon-power ' + (this.lightOn ? 'icon-power-on' : 'icon-power-off')" resize="center" 
      :src="this.lightOn ? require('./images/icon-power-btn.png') : require('./images/icon-power-btn-off.png')"
      @click="switchLight" />
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import Light from "./light.js";
const component = {
  name: "LightSwitch",
  components: { ActionBar },
  data() {
    return {
      lightOn: Light.lightOn
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    switchLight() {
      let o = !this.lightOn;
      this.lightOn = o;
      Light.setLightOn(o);
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.icon-power {
  width: 120px;
  height: 120px;
  margin-top: 40px;
  border-radius: 60px;
}
.icon-power-on {
  background-color: #FF6A00;
}
.icon-power-off {
  background-color: white;
}
</style>
