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

<script>
export default {
  name: "index",
  data() {
    return {
      items: [
        {
          icon: require('../images/icon-music.png'),
          name: '音乐',
          page: 'music',
          bg: '#FF4151'
        },
        {
          icon: require('../images/icon-iot.png'),
          name: '智能家居',
          page: 'iot',
          bg: '#954AF6'
        },
        {
          icon: require('../images/icon-weather.png'),
          name: '天气',
          page: 'weather',
          bg: '#0091FF'
        },
        {
          icon: require('../images/icon-setting.png'),
          name: '设置',
          page: 'setting',
          bg: '#758AAC'
        }
      ]
    };
  },
  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;
  height: 84px;
  border-radius: 16px;
  justify-content: flex-start;
}
.item-icon {
  width: 84px;
  height: 84px;
  left: 140px;
  margin-top: 19px;
  position: absolute;
}
.item-name {
  font-size: 24px;
  margin-top: 16px;
  margin-left: 20px;
  height: 26px;
  color: white;
  line-height: 26px;
}
</style>