<template>
  <div class="mui-bar-btn-item " :class="{'mui-active': active}" :activeClass="activeClass" tapmode="" @click="handleClick">
      <span :class="{'mui-bar-btn-item-reddot': reddot}">{{title}}</span>
  </div>
</template>
<script>
import {isNotNull} from '../utils';
export default {
  name: 'mu-btn-bar-item',
  props:{
    title: {
      type: String,
    },
    activeClass: {
      type: String,
      default: 'mui-active'
    },
    reddot:{
      type:Boolean,
    },
    value: {},
  },
  data () {
    return {
      btnBar: null
    }
  },
  created () {
    this.isBtnBarItem = true;
  },
  computed: {
    active () {
      return this.btnBar && isNotNull(this.value) && this.btnBar.value === this.value;
    },
  },
  methods: {
    handleClick () {

      if (this.btnBar && this.btnBar.handleItemClick) {

        this.btnBar.handleItemClick(this.value);
      }
    },
  },
  mounted () {
    let children = this.$parent.$children;
    for (let i = 0; i < children.length; i++) {
      if (children[i].$el === this.$el) {
        this.index = i;
        break;
      }
    }
  },
  render (createElement) {
    return createElement('div', {
      class: ['mui-bar mui-bar-btn']
    }, this.$slots.default)
  }
}
</script>
<style lang='less'>
.mui-bar-btn-item-reddot {
    position: relative;
    display:inline-block;
    &:before {
        content: "";
        right: -3px;
        top: 2px;
        position: absolute;
        display: block;
        background: #f53100;
        width:6px;
        height:6px;
        border-radius: 100%;
        background-clip: padding-box;
    }
}


  .mui-bar-btn{
    position: relative;
    font-size:18px;
    display: table;
    white-space: nowrap;
    margin: 0 auto;
    padding: 0;
    border: none;
    width: 100%;
    min-height: 1.8rem;
  }

  .mui-bar-nav > .mui-bar-btn {
    width: 50%;
  }

  .mui-bar-nav .mui-bar-btn {
    margin-top: 0.45rem;
    margin-bottom: 0.4rem;
    min-height: 1.3rem;
  }

  .mui-bar-nav .mui-bar-btn-item.mui-active {
    color: #1e80c7;
  }

  .mui-bar-nav .mui-bar-btn-item {
    line-height: 33px;
  }
  .mui-active:after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 20px;
    text-align: center;
    height: 2px;
    left: 50%;
    background: #1695f0;
    margin-left: -10px;
    border-radius: 14px;
  }

  .mui-bar-btn-item:first-child {
    border-left-width: 1px;
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
  }

  .mui-bar-btn-item.mui-active {
    color:#1e80c7;
  }

  .mui-bar-btn-item {
    display: table-cell;
    position: relative;
    width: 1%;
    line-height: 2.8rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 0;
    position: relative;
    color:#3a4247;
  }
</style>
