<template>
  <div class="dashboard  ibps-fixed-top">
    <!--栏目-->
    <div v-if="dashboards && dashboards.length >0">
      <div class="ibps-blank-bar" />
      <van-grid :column-num="4" :border="false">
        <van-grid-item
          v-for="menu in dashboards"
          :key="menu[aliasKey]"
          :badge="getBadge(menu)"
          :text="getText(menu)"
          @click.native="onClick(menu)"
        >
          <template #icon>
            <ibps-avatar
              :icon="menu.icon"
              :text="getText(menu)"
              :bg-color="menu.iconBgColor"
              :color="menu.iconFontColor"
              icon-prefix="ibps-icon"
              radius="17"
              class="ibps-mb-5 avatar-layout"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div v-else>
      <van-empty
        :type="resultType"
        :description="resultMessage"
      />
    </div>
  </div>
</template>
<script>
import i18n from '@/utils/i18n'
import IbpsAvatar from '@/components/ibps-avatar'
export default {
  components: {
    IbpsAvatar
  },
  data() {
    return {
      idKey: 'id',
      aliasKey: 'alias',
      labelKey: 'name',
      parentIdKey: 'parentId',
      childrenKey: 'children',
      urlKey: 'defaultUrl',
      dashboards: [],
      emptyData: false,
      resultType: 'empty',
      resultMessage: '没有应用，请联系管理员',
      countInfo: {} // 右上角图标
    }
  },
  mounted() {
    const params = this.$route.params
    this.title = params.title
    this.dashboards = params.menus
  },
  methods: {
    svgName(name) {
      return `#${name}`
    },
    getImage(menu) {
      if (menu.iconType === 'image') {
        return menu.icon
      }
      return
    },
    getText(menu) {
      return i18n.generateTitle(menu[this.aliasKey], menu[this.labelKey])
    },
    getBadge(menu) {
      const info = this.countInfo[menu[this.aliasKey]]
      if (this.$utils.isNotEmpty(info)) { return info > 99 ? '99+' : info }
    },
    onClick(menu) {
      const url = menu[this.urlKey]
      if (this.$utils.isNotEmpty(url)) {
        if (/^https:\/\/|http:\/\//.test(url)) {
          this.$utils.open(url)
        } else {
          this.$router.push({ path: url })
        }
      } else {
        // 判断是否有下级菜单如果有
        if (this.$utils.isNotEmpty(menu.children)) {
          this.$router.push({
            name: 'next-menu',
            params: {
              title: menu.name,
              menus: menu.children
            }
          })
        } else {
          this.$notify({
            type: 'danger',
            message: '未配置菜单的url路径,请在PC后台配置！'
          })
        }
      }
    }
  }

}
</script>
