<template>
  <div id="app">
    <mu-bottom-nav :value="bottomNav" @change="handleChange" @item-click="handleClick">
      <mu-bottom-nav-item  v-for="(menu, index) in menus" :key="index" :value="menu.value" :icon="menu.icon" :title="menu.text">
          <span slot="badge" v-if="menu.badge > 0">
            <mu-badge :text="menu.badge"></mu-badge>
          </span>
      </mu-bottom-nav-item>
    </mu-bottom-nav>
  </div>
</template>
<script>
  import { bottomNav, bottomNavItem } from 'muse-ui/bottomNav';
  import Badge from 'muse-ui/badge';;
  export default {
    data(){
      return {
        bottomNav:'message',
        menus:[
          {
            value:'message',
            text:'消息',
            icon:'m-sys-xiaoxi',
            badge:120,

          },
          {
            value:'work',
            text:'工作',
            icon:'m-sys-gongzuo'
          },{
            text:'新建',
            value:'create',
            icon:'m-sys-xinjian'
          },
          {
            value:'contact',
            text:'通讯录',
            icon:'m-sys-tongxunlu'
          },
          {
            value:'my',
            text:'我',
            icon:'m-sys-wo'
          }
        ]
      };
    },
    methods:{
      handleClick(i){
        var menu = this.menus[i];
        console.log(menu.value);
        this.bottomNav = menu.value;
      },
      handleChange(){},
    },
    components:{
      'mu-bottom-nav':bottomNav,
      'mu-bottom-nav-item':bottomNavItem,
      'mu-badge':Badge,
    }
  }

</script>
<style>
  .create-button .mu-ripple-wrapper {
    display:none;
  }
  .mu-bottom-item-icon{
    background: url('./search-xiangmu.svg') center no-repeat  !important;
  }
</style>
