<template>
  <div class="application">
    <div v-for="item in list" :key="item.name" @click.prevent="handleClick(item.key)">
      <img :src="require(`@/assets/images/${item.icon}`)" />
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Application',
  data() {
    return {
      list: [
        {name: '会议系统', icon: 'app1.png'},
        {name: '派单系统', icon: 'app2.png'},
        {name: '气象系统', icon: 'app3.png'},
        {name: '网格系统', icon: 'app4.png', key: 'jumpGridPage'},
      ]
    }
  },
  methods: {
    handleClick(key) {
      key && this[key]()
    },
    jumpGridPage() {
      const {url} = this.$store.state.currentStreetInfo
      window.open(url)
    },
  }
}
</script>

<style lang="stylus" scoped>
.application
  display flex
  align-items center
  justify-content space-around
  >div
    text-align center
    cursor pointer
    padding 0 .05rem
    &:hover
      box-shadow 0 .3rem 0.1rem 0.05rem rgba(0,0,0,0.2)
    img
      height .3rem
      width auto
      margin .05rem 0
</style>
