<script>
export default {
  name: 'mu-btn-bar',
  props:['value'],
  methods: {
    handleItemClick (value, item) {
      if (value !== this.value) {
        this.$emit('change', value);
      }
      this.$emit('item-click', value, item);
    },
    setChildrenInstance () {
      const children = this.$slots.default;

      children.forEach((vNode) => {

        if (vNode && vNode.child && vNode.child.isBtnBarItem) {
          vNode.child.btnBar = this;
        }
      });
    }
  },
  mounted () {
    this.setChildrenInstance()
  },
  render (createElement) {
    return createElement('div', {
      class: ['mui-bar mui-bar-btn']
    }, this.$slots.default)
  }
}
</script>
<style lang='less'>
  .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>
