<template>
  <div>
    <svg-icon v-if="icon" :icon-class="icon"/>
    <span v-if="title" slot="title">{{ title }}<span v-if="count">【{{ count }}】</span></span>
  </div>
</template>
<script>
import { getCount } from '@/api/callCase'
export default {
  name: 'MenuItem',
  // functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    meta: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      count: 0
    }
  },
  created() {
    // 如果需要提醒
    if (this.meta && this.meta.remind) {
      this.getRealtimeData() // 获取实时数量
      this.clock()
    }
  },
  methods: {
    clock() {
      const that = this
      setInterval(function() {
        that.getRealtimeData()
      }, 60000)
    },
    getRealtimeData() {
      getCount(this.meta.type).then(response => {
        if (response.code === 200) {
          // response.count = 2
          this.count = response.data
        }
      })
    }
  }
  // render(h, context) {
  //   const { icon, title } = context.props
  //   const vnodes = []
  //
  //   if (icon) {
  //     vnodes.push(<svg-icon icon-class={icon}/>)
  //   }
  //
  //   if (title) {
  //     vnodes.push(<span slot='title'>{(title)}</span>)
  //   }
  //   return vnodes
  // }
}
</script>