<import-sjs from="./index.sjs" name="_sjs" />

<view class="ant-badge
  {{className ? className : ''}}" style="{{style}}">
  <view class="ant-badge-body">
    <slot></slot>
  </view>
  <view
  a:if="{{type=== 'dot'}}"
  class="ant-badge-content"
  style="{{_sjs.setPositionStyle(position, offsetX, offsetY)}}">
  <view
  class="ant-badge-dot {{stroke ? 'ant-badge-dot-stroke' : ''}}"
  style="{{bgColor ? `background-color: ${bgColor};`: ''}}">
</view>
  </view>
  <view
    a:else
    class="ant-badge-content
      ant-badge-content-not-dot
      {{type==='bubble' ? `ant-badge-content-${position}-bubble` : ''}}
      {{stroke ? 'ant-badge-content-stroke' : ''}}"
    style="{{bgColor ? `background-color: ${bgColor};`: ''}} {{_sjs.setBubbleStyle(type, position)}};{{_sjs.setPositionStyle(position, offsetX, offsetY)}}">
      <view class="ant-badge-icon-container">
    </view>

    <view class="ant-badge-content-text">
      <slot name="text">
        <view
          a:if="{{type === 'number'}}"
          class="ant-badge-number">
          {{overCount ? '99+' : text}}
        </view>
        <view
          a:if="{{type==='text'}}"
          class="ant-badge-text">
          {{text}}
        </view>
        <view a:if="{{type==='bubble'}}"
        class="ant-badge-bubble">
          {{text}}
        </view>
      </slot>
    </view>
  </view>
</view>