<!--
  @name: 菜单模块
  @description: -
  @author 张文
  @date: 2022-02-24
-->
<template>
  <div
    :class="[
      move ? 'ty-global-animation-out' : '',
      'ty-global-click-style',
      'ty-menu-item'
    ]"
    :style="{ background: background, animationDelay: 50 * time + 'ms' }"
    v-if="!hidden"
    v-permissions="permissions"
    @click="click"
  >
    <img
      class="ty-menu-img"
      :src="src"
      alt=""
    >

    <div class="ty-global-flex-center ty-menu-title" v-html="$tyLanguage.get(titleKey, title)"></div>

    <!-- 角标 -->
    <div v-if="tip && tip !== '0'" class="ty-global-flex-center ty-menu-tip">{{ strToNum(tip) }}</div>
  </div>
</template>

<script>

export default {
  name: "tyMenuItem",
  props: {
    // 项目的背景颜色
    background: String,

    // 是否需要进入动画
    move:{
      type:Boolean,
      default: true
    },

    // 延迟动画时长，50的倍数
    time: {
      type: Number,
      default: 0
    },

    // 权限
    permissions: {
      type: Array,
      default: () => []
    },

    // 是否显示
    hidden: {
      type: Boolean,
      default: false
    },

    // 图片地址
    src: null,

    // 标题多语言的key，允许使用HTML标签
    titleKey: String,
    // 标题，允许使用HTML标签
    title: null,

    // 角标数据
    tip: [Number, String],

    // 角标数据最大可显示数
    tipMax: {
      type: Number,
      default: 9
    },

    // 跳转的路由地址
    path: String,

    // 跳转时传递的参数
    query: Object
  },
  data() {
    return {}
  },
  methods: {
    // 徽标数字转换
    strToNum(str) {
      const num = Number(str)

      if (isNaN(num)) return str

      if (this.tipMax === 0) return num

      if (num > this.tipMax) return this.tipMax + '+'

      return num
    },


    // 点击
    click() {
      if (this.path){
        this.$router.push({
          path: this.path,
          query: this.query
        })

        return
      }
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="less">

/*
* 菜单项
*/

.ty-menu-item{
  width: calc((100% - 20px) / 3);
  box-sizing: border-box;
  margin: 0 10px 10px 0;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  position: relative;

  &:nth-child(3n){
    margin-right: 0;
  }

  .ty-menu-img{
    width: 40px;
    height: auto;
  }
}

.ty-menu-title{
  margin-top: 5px;
  font-size: 12px;
  height: 24px;
  flex-direction: column;
}

.ty-menu-tip{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 3px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 999px;
  background: #D50000;
  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size: 12px;
  transform: translate(25%,-25%);
}

</style>
