<import-sjs
  from="./index.sjs"
  name="_sjs"
></import-sjs>
<view
  class="ant-badge {{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">
        <block a:if="{{text}}">
          <view
            a:if="{{type === 'number'}}"
            class="ant-badge-number"
          >
            <!--display: inline-->
            <text a:if="{{_sjs.getOverCount(text)}}">99+</text>
            <!--display: inline-->
            <text a:else>{{text}}</text>
          </view>
          <view
            a:if="{{type === 'text'}}"
            class="ant-badge-text"
          >
            {{text}}
          </view>
          <view
            a:if="{{type === 'bubble'}}"
            class="ant-badge-bubble"
          >
            {{text}}
          </view>
        </block>
      </slot>
    </view>
  </view>
</view>