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

<script>
export default {
  name: 'Application',
  data() {
    return {
      list: [
        {name: '会议系统', icon: 'app1.png', type: 'all'},
        {name: '派单系统', icon: 'app2.png', type: 'all'},
        {name: '气象系统', icon: 'app3.png', type: 'all'},
        {name: '五角场商圈', icon: 'app5.png', type: '310110019000', key: 'jumpSpecicalPage'},
        {name: '网格系统', icon: 'app4.png', key: 'jumpGridPage', type: 'all'},
      ]
    }
  },
  methods: {
    handleClick(key) {
      key && this[key]()
    },
    jumpSpecicalPage(){
      const {specialUrl} = this.$store.state.currentStreetInfo
      window.open(specialUrl)
    },
    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>
