<template>
  <view class="ml-tabbar" :class="[className || '', {'is-vertical': vertical}]">
    <view class="ml-tabbar-item" v-for="(item) in options" :key="item.value" :class="{'is-active': value == item.value}" @tap="tapEvent(item)">
      <view class="ml-tabbar-icon">
        <ml-icon class="icon" :name="value == item.value ? item.activeIcon : item.icon"></ml-icon>
        <view v-if="item.showDot && item.dotNum > 0" class="ml-tabbar-dot-num" :class="[item.dotStatus ? `s-${item.dotStatus}` : '']">{{ getDotNum(item.dotNum) }}</view>
        <view v-else-if="item.showDot" class="ml-tabbar-dot" :class="[item.dotStatus ? `s-${item.dotStatus}` : '']"></view>
      </view>
      <view class="ml-tabbar-name">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlTabbar',
  props: {
    value: [String, Number],
    vertical: Boolean,
    options: Array,
    className: String
  },
  inject: {
    layout: {
      from: '$pageLayout',
      default: null
    }
  },
  computed: {
    selectItem () {
      return this.options.find(item => item.value === this.value)
    }
  },
  watch: {
    value () {
      this.updateTitle(this.selectItem)
    }
  },
  created () {
    this.$nextTick(() => {
      this.updateTitle(this.selectItem)
    })
  },
  methods: {
    updateTitle (option) {
      // #ifndef H5
      if (option && option.name) {
        uni.setNavigationBarTitle({
          title: option.name
        })
      }
      // #endif
    },
    getDotNum (num) {
      return num > 99 ? '99+' : num
    },
    tapEvent (option) {
      const value = option.value
      this.updateTitle(option)
      this.$emit('input', value)
      this.$emit('change', { value, option })
      setTimeout(() => {
        if (this.layout && this.layout.clearPadding) {
          this.layout.clearPadding()
        }
      }, 50)
    }
  }
}
</script>

<style lang="scss">
.ml-tabbar {
  display: flex;
  position: fixed;
  z-index: 20;
  padding: 6rpx 0 12rpx 0;
  color: $ml-font-color;
  background: #FFFFFF;
  &.is-vertical {
    flex-direction: column;
    left: 0;
    top: 0;
    width: 120rpx;
    height: 100%;
    border-right: 1px solid #e5e5e5;
    .ml-tabbar-item {
      justify-content: center;
    }
  }
  &:not(.is-vertical) {
    left: 0;
    bottom: 0;
    flex-direction: row;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    // #ifdef H5
    max-width: $ml-page-full-width;
    left: 50%;
    transform: translateX(-50%);
    // #endif
  }
  .ml-tabbar-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    // #ifdef H5
    cursor: pointer;
    // #endif
    color: rgba(0, 0, 0, 0.5);
    &.is-active {
      border: 0;
      color: $ml-theme-primary-color;
    }
  }
  .ml-tabbar-dot-num {
    position: absolute;
    top: 0;
    right: -16rpx;
    background-color: #f56c6c;
    color: #fff;
    border-radius: 20rpx;
    padding: 0 10rpx;
    display: inline-block;
    min-width: 30rpx;
    text-align: center;
    font-size: 20rpx;
    line-height: 32rpx;
  }
  .ml-tabbar-dot {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f56c6c;
    color: #fff;
    border-radius: 16rpx;
    display: inline-block;
    width: 16rpx;
    height: 16rpx;
  }
  .ml-tabbar-icon {
    display: block;
    position: relative;
    font-size: 40rpx;
    width: 80rpx;
    margin: 0 auto;
    text-align: center;
  }
  .ml-tabbar-name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    line-height: 40rpx;
  }
}
</style>
