<template>
  <m-card title="业务入口" :mode="mode">
    <div class="content">
      <div v-for="entry in entrys" :key="entry.url" @click="routeTo(entry.url)">
        {{ entry.inputName }}
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
export default defineComponent({
  name: 'BussinessEntry',
  props: {
    mode: {
      type: String as PropType<string>,
      default: '4',
    },
  },
  setup() {
    const entrys = computed(() => store.state.entry)
    const router = useRouter()
    const routeTo = (url: string) => {
      if (url.includes('http')) {
        window.open(url, '_blank')
      } else {
        router.push(url)
      }
    }
    return {
      entrys,
      routeTo,
    }
  },
})
</script>

<style lang="stylus" scoped>
.content
  width 100%
  height 100%
  display flex
  flex-direction column
  align-items center
  justify-content space-around
  >div
    height 40%
    width 80%
    background url('@/assets/images/entry-card.png') 100% / 100% 100% no-repeat
    display flex
    align-items center
    justify-content center
    font-size .12rem
    font-weight bold
    cursor pointer
    opacity 0.8
    color #ccc
    &:hover
      color #fff
      opacity 1
</style>
