<template>
  <div class="menu">
    <div
      v-for="item in menus"
      :key="item.name"
      class="menu-item"
      :class="{'on': curName === item.name}"
      @click="handleSelect(item.name)"
    >
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data() {
    return {
      curName: '主屏',
      menus: [
        {name: '主屏'},
        {name: '人口分布'},
        {name: '智慧养老'},
        {name: '单兵指挥'},
        {name: '美丽家园'},
      ]
    }
  },
  methods: {
    handleSelect(name) {
      this.curName = name
      this.$store.commit('SET_THEME_NAME', name)
    },
  }
}
</script>

<style lang="stylus" scoped>
.menu
  width 100%
  height 100%
  display flex
  flex-direction column
  align-items flex-end
  .menu-item
    $flex-center()
    color $edgeColor
    width 1.4rem
    height .25rem
    font-family $font-pang
    font-size .12rem
    font-weight 100
    letter-spacing .02rem
    margin-bottom .1rem
    transition transform .2s ease-in-out
    background-position center
    background-size 100% 100%
    background-image url(../../assets/images/menu-btn.png)
    cursor pointer
    &:hover
      transform scale(1.1)
    &.on
      color $color-orange
      transform scale(1.2)
      background-image url(../../assets/images/menu-btn-on.png)
</style>
