<template>
  <view class="ml-tabs" :class="[className || '']">
    <view class="ml-tabs-header">
      <scroll-view scroll-x>
        <view class="ml-tabs-navs" :class="[itemAlign ? `is-${itemAlign}` : '']">
          <view class="ml-tabs-nav-item" v-for="(item, index) in tabList" :key="index" :class="{'is-active': value === item.name}" :style="item.width ? `width:${item.itemWidth};` : itemStyles" @tap="changeEvent(item)">
            <view class="ml-tabs-nav-title">
              <slot name="tabTitle" :tab="item">
                <view>{{ item.title }}</view>
              </slot>
            </view>
            <view v-if="item.showDot && item.dotNum > 0" class="ml-tabs-nav-title-dot-num" :class="[item.dotStatus ? `s-${item.dotStatus}` : '']">{{ getDotNum(item.dotNum) }}</view>
            <view v-else-if="item.showDot" class="ml-tabs-nav-title-dot" :class="[item.dotStatus ? `s-${item.dotStatus}` : '']"></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="ml-tabs-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlTabs',
  props: {
    value: [String, Number],
    className: String,
    itemAlign: String,
    itemWidth: String
  },
  provide () {
    return {
      mlTabs: this
    }
  },
  data () {
    return {
      tabList: []
    }
  },
  computed: {
    itemStyles () {
      return this.itemWidth ? `width:${this.itemWidth};` : ''
    }
  },
  methods: {
    getDotNum (num) {
      return num > 99 ? '99+' : num
    },
    changeEvent (item) {
      const value = item.name
      this.$emit('input', value)
      this.$emit('change', { value })
    }
  }
}
</script>

<style lang="scss">
.ml-tabs {
  display: flex;
  flex-direction: column;
  font-size: $ml-base-font-size;
  .ml-tabs-navs {
    flex-shrink: 0;
    white-space: nowrap;
    &.is-left {
      text-align: left;
    }
    &.is-center {
      text-align: center;
    }
    &.is-right {
      text-align: right;
    }
  }
  .ml-tabs-header {
    background: #fff;
    padding-bottom: 10rpx;
  }
  .ml-tabs-content {
    display: flex;
    flex-direction: column;
  }
  .ml-tabs-nav-item {
    position: relative;
    display: inline-block;
    padding: 10rpx 10rpx 0 10rpx;
    text-align: center;
    .ml-tabs-nav-title {
      position: relative;
      padding: 10rpx 10rpx;
    }
    &.is-active {
      .ml-tabs-nav-title {
        color: $ml-theme-primary-color;
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          min-width: 40rpx;
          max-width: 60rpx;
          height: 5rpx;
          background: $ml-theme-primary-color;
        }
      }
    }
  }
  .ml-tabs-nav-title-dot-num {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f56c6c;
    color: #fff;
    border-radius: 40rpx;
    padding: 0 10rpx;
    vertical-align: middle;
    display: inline-block;
    min-width: 40rpx;
    text-align: center;
    font-size: 22rpx;
    line-height: 40rpx;
    &.s-primary {
      background-color: $ml-theme-primary-color;
    }
    &.s-success {
      background-color: $ml-theme-success-color;
    }
    &.s-info {
      background-color: #909399;
    }
    &.s-warning {
      background-color: $ml-theme-warning-color;
    }
    &.s-danger {
      background-color: $ml-theme-error-color;
    }
    &.s-gray {
      background-color: $ml-gray-color;
    }
    &.s-blue {
      background-color: $ml-blue-color;
    }
    &.s-green {
      background-color: $ml-green-color;
    }
    &.s-pink {
      background-color: $ml-pink-color;
    }
    &.s-red {
      background-color: $ml-red-color;
    }
    &.s-orange {
      background-color: $ml-orange-color;
    }
    &.s-purple {
      background-color: $ml-purple-color;
    }
  }
}
</style>
