<template>
  <div class="page">
    <action-bar title="智能家居" />
    <scroller class="content" showScrollbar="false">
      <div class="item" @click="openLight">
        <img class="item-icon" resize="center" :src="require('./images/icon-light.png')"/>
        <div>
          <text class="item-title">智能灯泡</text>
          <text class="item-title-sub">{{this.lightOn ? '已开启' : '已关闭'}}</text>
        </div>
      </div>
      <div class="item" @click="openAC">
        <img class="item-icon" resize="center" :src="require('./images/icon-ac.png')"/>
        <div>
          <text class="item-title">智能空调</text>
          <text class="item-title-sub">{{this.acOn ? '已开启' : '已关闭'}}</text>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>

import ActionBar from "../../components/action-bar.vue";
import Light from "../iot-light/light.js";
import AC from "../iot-ac/ac.js";

const component = {
  name: "iot",
  components: { ActionBar },
  data() {
    return {
      lightOn: Light.lightOn,
      acOn : AC.acOn
    };
  },
  mounted() {
    Light.on('lightOn', this.lightSwitch);
    AC.on('acOn', this.acSwitch);
  },
  beforeDestroy() {
    Light.off('lightOn', this.lightSwitch);
    AC.off('acOn', this.acSwitch);
  },
  methods: {
    openLight(e) {
      console.log('openLight');
      $falcon.navTo('iot-light');
    },
    lightSwitch(r) {
      this.lightOn = r;
    },
    acSwitch(r) {
      this.acOn = r;
    },
    openAC(e) {
      console.log('openAC');
      $falcon.navTo('iot-ac');
    }
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.content {
  flex: 1;
  width: 100%;
  align-items: center;
}
.item {
  width: 232px;
  height: 90px;
  background-color: #2B2F35;
  border-radius: 16px;
  margin-bottom: 8px;
  flex-direction: row;
  align-items: center;
}
.item-icon {
  width: 46px;
  height: 46px;
  margin-left: 19px;
  margin-right: 19px;
}
.item-title {
  margin-top: 3px;
  font-size: 24px;
  color: white;
  height: 33px;
}
.item-title-sub {
  margin-top: 2px;
  font-size: 20px;
  height: 27px;
  width: 60px;
  font-family: Alibaba-PuHuiTi-Regular;
  color: white;
}
</style>
