<template>
  <view
    class="s-tabbar-item"
    :class="{ 's-tabbar-item-border': parentData.border&&!raised,'s-tabbar-item-radius': raised }"
    :style="[$s.addStyle(customStyle)]"
    @tap="clickHandler"
  >
    <view
      class="s-tabbar-item__icon"
      :class="{'s-tabbar-item-raised': parentData.border && raised,'s-tabbar-item-noborder': !parentData.border && raised}"
    >
      <view v-if="parentData.border && raised" class="indicator-before"></view>
      <view v-if="parentData.border && raised" class="indicator-after"></view>
      <s-icon
        v-if="icon"
        :name="icon"
        :color="isActive? parentData.activeColor : parentData.inactiveColor"
        :size="20"
      ></s-icon>
      <template v-else>
        <slot v-if="isActive && !fixedColor" name="active-icon" />
        <slot v-else-if="!isActive && !fixedColor" name="inactive-icon" />
        <slot v-else name="fixed-color" />
      </template>
      <s-badge
        absolute
        :offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
        :customStyle="badgeStyle"
        :isDot="dot"
        :value="badge || (dot ? 1 : null)"
        :show="dot || badge > 0"
      ></s-badge>
    </view>

    <slot name="text">
      <text
        class="s-tabbar-item__text"
        :style="{
					color:fixedColor ? fixedColor : isActive ? parentData.activeColor : parentData.inactiveColor 
				}"
      >{{ text }}</text>
    </slot>
  </view>
</template>

<script>
import props from './props.js'
/**
 * TabbarItem 底部导航栏子组件
 * @description 此组件提供了自定义tabbar的能力。
 * @tutorial https://www.uviewui.com/components/tabbar.html
 * @property {String | Number}	name		item标签的名称，作为与s-tabbar的value参数匹配的标识符
 * @property {String}			icon		uView内置图标或者绝对路径的图片
 * @property {String | Number}	badge		右上角的角标提示信息
 * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
 * @property {String}			text		描述文本
 * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
 * @property {Object}			customStyle	定义需要用到的外部样式
 *
 * @example <s-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><s-tabbar-item text="首页" icon="home" dot ></s-tabbar-item></s-tabbar>
 */
export default {
  name: 's-tabbar-item',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      isActive: false, // 是否处于激活状态
      parentData: {
        value: null,
        activeColor: '',
        inactiveColor: '',
        border: null,
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
      this.updateParentData()
      if (!this.parent) {
        uni.$s.error('s-tabbar-item必须搭配s-tabbar组件使用')
      }
      // 本子组件在s-tabbar的children数组中的索引
      const index = this.parent.children.indexOf(this)
      // 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
      this.isActive = (this.name || index) === this.parentData.value
    },
    updateParentData() {
      // 此方法在mixin中
      this.getParentData('s-tabbar')
    },
    // 此方法将会被父组件s-tabbar调用
    updateFromParent() {
      // 重新初始化
      this.init()
    },
    clickHandler() {
      this.$nextTick(() => {
        const index = this.parent.children.indexOf(this)
        const name = this.name || index
        // 点击的item为非激活的item才发出change事件
        if (name !== this.parent.value) {
          this.parent.$emit('change', name)
        }
        this.$emit('click', name)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.s-tabbar-item {
  @include flex(column);
  align-items: center;
  justify-content: center;
  flex: 1;

  padding: 24rpx 0;
  &__icon {
    @include flex;
    position: relative;
    width: 150rpx;
    justify-content: center;
  }
  &-border {
    border-top: 1px solid #dadbde;
  }
  &-raised {
    position: absolute;
    top: -23px;
    padding-top: 8px;
    border-radius: 50% 50% 0 0;
    background: #fff;
    border-top: 1px solid #dadbde;
  }
  &-noborder {
    position: absolute;
    top: -23px;
    padding-top: 8px;
    border-radius: 50% 50% 0 0;
  }
  &-radius {
    position: relative;
  }
  &__text {
    margin-top: 2px;
    font-size: 12px;
    color: $s-content-color;
  }
}
.indicator-before {
  position: absolute;
  width: 10px;
  height: 20px;
  left: -8px;
  top: 23px;
  background: #fff;
  // box-shadow: white 0.2px -10px 0px;
  // border-top-left-radius: 100%;
}
.indicator-after {
  position: absolute;
  width: 10px;
  height: 20px;
  right: -8px;
  top: 23px;
  background: #fff;
}
/* #ifdef MP */
// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
:host {
  flex: 1;
}
/* #endif */
</style>
