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

<script>
import ActionBar from "../../components/action-bar.vue";
import AC from "./ac.js";
const component = {
  name: "ACSwitch",
  components: { ActionBar },
  data() {
    return {
      acOn: AC.acOn
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    switchAC() {
      let o = !this.acOn;
      this.acOn = o;
      AC.setACOn(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>
