<template>
  <div class="page">
    <action-bar title="智能空调" />
    <scroller class="scroller" showScrollbar="false">
      <div
        class="item"
        @click="itemClick('iot-ac-switch')">
        <img class="item-icon" resize="center" :src="require('./images/icon-switch.png')" />
        <text class="item-name">开关</text>
        <text class="item-sumary">{{this.acOn ? '已开启' : '已关闭'}}</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-ac-temp')">
        <img class="item-icon" resize="center" :src="require('./images/icon-temp.png')" />
        <text class="item-name">温度</text>
        <text class="item-sumary">{{temp}}℃</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-ac-wind')">
        <img class="item-icon" resize="center" :src="require('./images/icon-wind.png')" />
        <text class="item-name">风量</text>
        <text class="item-sumary">{{wind}}</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-ac-mode')">
        <img class="item-icon" resize="center" :src="require('./images/icon-mode.png')" />
        <text class="item-name">模式</text>
        <text class="item-sumary">{{mode}}</text>
      </div>
    </scroller>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import AC from "./ac.js";
const component = {
  name: "AC",
  components: { ActionBar },
  data() {
    return {
      acOn: AC.acOn,
      temp: AC.temp,
      wind: AC.formatWind(AC.wind),
      mode: AC.formatMode(AC.mode)
    };
  },
  mounted() {
    AC.on('acOn', this.updateACOn);
    AC.on('temp', this.updateACTemp);
    AC.on('wind', this.updateACWind);
    AC.on('mode', this.updateACMode);
  },
  beforeDestroy() {
    AC.off('acOn', this.updateACOn);
    AC.off('temp', this.updateACTemp);
    AC.off('wind', this.updateACWind);
    AC.off('mode', this.updateACMode);
  },
  methods: {
    itemClick(page) {
      $falcon.navTo(page);
    },
    updateACOn(r) {
      this.acOn = AC.acOn;
    },
    updateACTemp(r) {
      this.temp = AC.temp;
    },
    updateACWind(r) {
      this.wind = AC.formatWind(AC.wind);
    },
    updateACMode(r) {
      this.mode = AC.formatMode(AC.mode);
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.scroller {
  flex: 1;
  width: 100%;
}
.item {
  height: 64px;
  flex-direction: row;
  margin-bottom: 8px;
  margin-left: 4px;
  margin-right: 4px;
  align-items: center;
  background-color: #2B2F35;
  border-radius: 16px;
}
.item-icon {
  width: 28px;
  height: 28px;
  margin-left: 17px;
}
.item-name {
  flex: 1;
  color: white;
  font-size: 24px;
  margin-left: 12px;
  margin-right: 12px;
}
.item-sumary {
  color: rgba(255,255,255,0.6);
  font-size: 24px;
  margin-right: 12px;
}
</style>
