<template>
  <scroller class="scroller" showScrollbar="false">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="item"
      @click="itemClick(item)">
      <img class="item-icon" :src="item.icon" />
      <text class="item-name">{{item.name}}</text>
    </div>
  </scroller>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      items: [
        {
          icon: require('../images/icon-music2.png'),
          name: '音乐',
          page: 'music'
        },
        {
          icon: require('../images/icon-weather2.png'),
          name: '天气',
          page: 'weather'
        },
        {
          icon: require('../images/icon-iot2.png'),
          name: '智能家居',
          page: 'iot'
        },
        {
          icon: require('../images/icon-setting2.png'),
          name: '设置',
          page: 'setting'
        }
      ]
    };
  },
  methods: {
    itemClick(item) {
      console.log('item clicked ' + item.name);
      $falcon.navTo(item.page);
    }
  },
};
</script>

<style scoped>

.scroller {
  width: 100%;
  padding-top: 14px;
  padding-bottom: 2px;
}

.item {
  flex-direction: row;
  margin-bottom: 12px;
  margin-left: 20px;
  align-items: center;
}
.item-icon {
  width: 64px;
  height: 64px;
}
.item-name {
  color: white;
  font-size: 20px;
  margin-left: 16px;
}
</style>