<template>
  <scroller class="scroller" showScrollbar="false">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="item"
      @click="itemClick(item)"
      :style="{backgroundColor: item.bg}">
      <img class="item-icon" resize="center" :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-music.png'),
          name: '音乐',
          page: 'music',
          bg: '#EF4141'
        },
        {
          icon: require('../images/icon-weather.png'),
          name: '天气',
          page: 'weather',
          bg: '#376FDB'
        },
        {
          icon: require('../images/icon-iot.png'),
          name: '智能家居',
          page: 'iot',
          bg: '#209AAD'
        },
        {
          icon: require('../images/icon-setting.png'),
          name: '设置',
          page: 'setting',
          bg: '#778AA7'
        }
      ]
    };
  },
  methods: {
    itemClick(item) {
      console.log('item clicked ' + item.name);
      $falcon.navTo(item.page);
    }
  },
};
</script>

<style scoped>

.scroller {
  width: 100%;
  padding-top: 8px;
}

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