<template>
<h1>Lights</h1>
<group>
  <cell-switch v-for="item in lights" :data="item" @on-change="setLight"></cell-switch>
</group>
</template>

<script>
import Group from 'vux/dist/components/group'
import Cell from 'vux/dist/components/cell'
import CellSwitch from './cell-switch'

export default {
  // Data
  data () {
    // console.log('Data init.');
    return {
      lights: []
    }
  },
  ready () {
    console.log('Get Lights state')
    this.getLights()
  },
  // Components used.
  components: {
    Group,
    Cell,
    CellSwitch
  },
  methods: {
    /* Get Lights */
    getLights () {
      this.$http.get('/v1/capabilities/lights')
        .then(function (response) {
          this.$set('lights', response.data.Lights)
          console.log('Success!:', response.data)
        }, function (err) {
          console.log(err)
        })
    },
    /* Set Light */
    setLight (data) {
      var msg = ''
      console.log(data)
      msg = '{"id": ' + data.id + ', "state": ' + data.state + '}'
      console.log(msg)
      this.$http.post('/v1/capabilities/lights', msg)
        .then(function (response) {
          console.log('Success!:', response.data)
        }, function (err) {
          console.log(err)
        })
    }
  }
}

</script>
