<template>
  <div class="page">
    <action-bar title="智能灯泡" />
    <scroller class="scroller" showScrollbar="false">
      <div
        class="item"
        @click="itemClick('iot-light-switch')">
        <img class="item-icon" resize="center" :src="require('./images/icon-switch.png')" />
        <text class="item-name">开关</text>
        <text class="item-sumary">{{this.lightOn ? '已开启' : '已关闭'}}</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-light-brightness')">
        <img class="item-icon" resize="center" :src="require('./images/icon-brightness.png')" />
        <text class="item-name">亮度</text>
        <text class="item-sumary">{{brightness}}</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-light-color-temp')">
        <img class="item-icon" resize="center" :src="require('./images/icon-color-temp.png')" />
        <text class="item-name">色温</text>
        <text class="item-sumary">{{colorTemp}}</text>
      </div>
      <div
        class="item"
        @click="itemClick('iot-light-color')">
        <img class="item-icon" resize="center" :src="require('./images/icon-color.png')" />
        <text class="item-name">色彩</text>
        <div class="item-color-sumary" :style="{backgroundColor: color}" />
      </div>
    </scroller>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
import Light from "./light.js";
import LightColorTemp from "./light-color-temp.js";
const component = {
  name: "Light",
  components: { ActionBar },
  data() {
    return {
      lightOn: Light.lightOn,
      brightness: Light.formatBrightness(Light.brightness),
      colorTemp: LightColorTemp.formatColorTemp(LightColorTemp.colorTemp),
      color: Light.formatedColor
    };
  },
  mounted() {
    Light.on('lightOn', this.updateLightOn);
    Light.on('brightness', this.updateBrightness);
    LightColorTemp.on('colorTemp', this.updateColorTemp);
    Light.on('color', this.updateColor);
  },
  beforeDestroy() {
    Light.off('lightOn', this.updateLightOn);
    Light.off('brightness', this.updateBrightness);
    LightColorTemp.off('colorTemp', this.updateColorTemp);
    Light.off('color', this.updateColor);
  },
  methods: {
    itemClick(page) {
      $falcon.navTo(page);
    },
    updateLightOn(e) {
      this.lightOn = Light.lightOn;
    },
    updateBrightness(e) {
      this.brightness = Light.formatBrightness(Light.brightness);
    },
    updateColorTemp(e) {
      this.colorTemp = LightColorTemp.formatColorTemp(LightColorTemp.colorTemp);
    },
    updateColor(color, saturation) {
      this.color = Light.formatedColor;
    }
  },
};

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;
}
.item-color-sumary {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  border-radius: 12px;
}
</style>
