<template>
  <div class="application">
    <template v-for="item in list">
      <div
        v-if="'all' == item.type || currentStreetInfo.name.indexOf(item.type) >= 0"
        :key="item.name"
        @click.prevent="handleClick(item.key, item.url)"
      >
        <img :src="require(`@/assets/images/${item.icon}`)" />
        <p>{{item.name}}</p>
      </div>
    </template>
  </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: 'app4.png', key: 'jumpGridPage', type: 'all'},
        {name: '五角场商圈', icon: 'app5.png', type: '五角场', key: 'jumpSpecicalPage', url: 'https://test.chanchuang.jdcloud.com/shsq/index'},
        {name: '一铺一档', icon: 'app5.png', type: '控江', key: 'jumpSpecicalPage', url: 'http://10.216.71.157/ypyd/#/MxbDataShow'},
      ]
    }
  },
  computed: {
    currentStreetInfo() {
      return this.$store.state.currentStreetInfo
    }
  },
  methods: {
    handleClick(key, url = '') {
      key && this[key](url)
    },
    jumpSpecicalPage(url){
      url && window.open(url)
    },
    jumpGridPage() {
      const {url} = this.currentStreetInfo
      window.open(url)
    },
  }
}
</script>

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