<script>
import abstractButton from '../internal/abstractButton';
export default {
  name: 'mu-bottom-nav',
  props: {
    value: {}
  },
  methods: {
    handleItemClick (value, item) {
      if (value !== this.value) {

        this.$emit('change', value, item)
      }
      this.$emit('itemClick', item)
      this.$emit('item-click', item)
    },
    setChildrenInstance () {
      var children = this.$slots.default
      children.forEach((vNode) => {
        if (vNode && vNode.child && vNode.child.isBottomNavItem) {
          vNode.child.bottomNav = this
        }
      })
    }
  },
  mounted () {
    this.setChildrenInstance()
  },
  updated () {
    var children = this.$slots.default
    children.forEach((vNode) => {
      if (vNode && vNode.child && vNode.child.isBottomNavItem) {
        vNode.child.bottomNav = this
      }
    })
  },
  render (h) {
    return h(abstractButton, {
      class: ['mu-bottom-nav'],
      props: {
        disableTouchRipple: !this.shift,
        centerRipple: false,
        wrapperClass: 'mu-bottom-nav-wrapper',
        containerElement: 'div',
        rippleOpacity: 0.3
      }
    }, this.$slots.default)
  }
}
</script>

<style lang="less">
@import "../styles/import.less";
.mu-bottom-nav.mu-bottom-nav-simple {
  height:50px;
  .mu-buttom-item{
    line-height: 38px;
  }
}
.mu-bottom-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  text-align: center;
  position: fixed;
  bottom:0;
  width: 100%;
  z-index: 500;
  margin-top:100px;
  color: @alternateTextColor;
  &:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;

    transform-origin: 0 0;

  }
}

.mu-bottom-nav-shift{
  background-color: @primaryColor;
}

.mu-buttom-item-wrapper sub {
  position: absolute;
  top: -3px;
  left: 63%;
  bottom:0 !important;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 101;
}

.mu-bottom-nav-wrapper{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
