<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floors"></floor-bar>
      <floor v-for="(floor, index) in floors.data" :floor="floor" :key="index"></floor>
    </div>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  import FloorBar from './FloorBar.vue'
  export default {
    name: 'floor-list',
    components: {
      Floor,
      FloorBar
    },
//    data () {
//      return {
//        floors: {}
//      }
//    },
//    mounted () {
//      this.$http.get('/api/floors/home')
//        .then(response => {
//          this.floors = response
//        })
//    }
    computed: {
      floors () {
        return this.$store.state.floor.list
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  /*add*/
  .floor-list .container{
    padding: 0;
  }
  .floor-list {
    margin-bottom: $xlg-pad;
  }
</style>
