<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    routePath: {
      type: String,
      default: ''
    },
    num1: {
      type: Number,
      default: 0
    },
    num2: {
      type: Number,
      default: 0
    }
  },
  watch: {
    num1: function(oldValue, newValue) {
      console.log('oldValue' + oldValue)
      console.log(newValue)
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}></svg-icon>)
    }
    //   if (title) {
    //     if (title === '联合惩戒') {
    //       vnodes.push(<span slot='title'>{(title)}<em class='num'>{(num1 + num2)}</em></span>)
    //     } else if (title === '联合惩戒解锁') {
    //       vnodes.push(<span slot='title'>{(title)}<em class='num'>{(num1)}</em></span>)
    //     } else if (title === '联合惩戒锁定') {
    //       vnodes.push(<span slot='title'>{(title)}<em class='num'>{(num2)}</em></span>)
    //     } else {
    //       vnodes.push(<span slot='title'>{(title)}</span>)
    //     }
    //   }
    vnodes.push(h(
      'span', // 标签名
      {
        slot: 'title', // slot 属性
        attrs: { title: title } // 动态绑定 title 属性（等价于 :title="title"）
      },
      title // 标签内容（等价于 {title}）
    ))
    return vnodes
  }
}
</script>
<style lang="scss" scoped>
  .point {
    color: red;
    margin-left: 5px;
  }
  .num {
    margin-left: 5px;
    background: red;
    border-radius: 50%;
    color: #fff;
    text-align: center;
  }
</style>
