<import-sjs
  from="./index.sjs"
  name="sjs"
></import-sjs>
<view
  a:if="{{mode === 'default'}}"
  class="ant-grid ant-grid-columns-{{columns}} ant-grid-{{mode}} {{className || ''}}"
  style="{{style || ''}}"
>
  <block
    a:for="{{items}}"
    a:for-index="index"
    a:for-item="item"
  >
    <view
      data-item="{{item}}"
      class="ant-grid-item ant-grid-item-{{gridItemLayout}} {{sjs.checkNeedVerticalSpace(items.length, index, columns) ? 'ant-grid-item-vertical-space' : ''}} ant-grid-item-columns-{{columns}} {{sjs.checkShowSplitLine(index, items.length, columns, mode, showDivider) ? 'ant-grid-item-line' : ''}}"
      onTap="onTap"
      onFirstAppear="onFirstAppear"
    >
      <view class="ant-grid-item-icon ant-grid-item-icon-{{item.iconStyle || iconStyle}}">
        <slot
          name="icon"
          value="{{item}}"
          index="{{index}}"
        >
          <image-icon
            image="{{item.icon}}"
            className="ant-grid-item-icon"
            style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
          ></image-icon>
        </slot>
      </view>
      <view class="ant-grid-item-title">
        <slot
          name="title"
          value="{{item}}"
          index="{{index}}"
        >
          {{item.title}}
        </slot>
      </view>
      <view class="ant-grid-item-description">
        <slot
          name="description"
          value="{{item}}"
          index="{{index}}"
        >
          {{item.description}}
        </slot>
      </view>
    </view>
  </block>
</view>
<ant-pagination
  a:elif="{{mode === 'scroll'}}"
  fillColor="{{paginationFillColor}}"
  frontColor="{{paginationFrontColor}}"
  className="{{className || ''}}"
  style="{{style || ''}}"
>
  <view class="ant-grid ant-grid-{{mode}}">
    <block
      a:for="{{items}}"
      a:for-index="index"
      a:for-item="item"
    >
      <view
        data-item="{{item}}"
        class="ant-grid-item ant-grid-item-{{gridItemLayout}} ant-grid-item-columns-scroll {{sjs.checkShowSplitLine(index, items.length, columns, mode, showDivider) ? 'ant-grid-item-line' : ''}}"
        onTap="onTap"
        onFirstAppear="onFirstAppear"
      >
        <view class="ant-grid-item-icon ant-grid-item-icon-{{item.iconStyle || iconStyle}}">
          <slot
            name="icon"
            value="{{item}}"
            index="{{index}}"
          >
            <image-icon
              image="{{item.icon}}"
              className="ant-grid-item-icon"
              style="{{iconSize ? 'width:' + iconSize + 'px;height:' + iconSize + 'px;font-size:' + iconSize + 'px' : ''}}"
            ></image-icon>
          </slot>
        </view>
        <view class="ant-grid-item-title">
          <slot
            name="title"
            value="{{item}}"
            index="{{index}}"
          >
            {{item.title}}
          </slot>
        </view>
        <view class="ant-grid-item-description">
          <slot
            name="description"
            value="{{item}}"
            index="{{index}}"
          >
            {{item.description}}
          </slot>
        </view>
      </view>
    </block>
  </view>
</ant-pagination>