<wxs src="../common/utils.wxs" module="_" />

<view class="class {{classPrefix}} {{[classes]}}" style="{{_._style([style, customStyle])}}">
  <scroll-view
    class="{{_.cls(classPrefix + '__content', [['reverse' , reverse]])}}"
    scroll-y="{{true}}"
    enable-flex="{{true}}"
    enhanced="{{true}}"
    scroll-with-animation="{{true}}"
    scroll-top="{{scrollViewTop}}"
    data-ref="chatListRef"
    bindscroll="onScroll"
    bindscrolltoupper="handlerScrollToUpper"
    bindscrolltolower="handlerScrollToLower"
  >
    <block wx:if="{{reverse}}">
      <view class="placeholder"></view>
    </block>
    <!-- /**
        * 1. 两种方式获取要渲染的 list
        *  a. props 传 data
        *  b. slots t-chat-message
        * a 优先级更高
        */ -->
    <block wx:if="{{data.length > 0}}">
      <block wx:for="{{data}}" wx:for-index="index" wx:for-item="item" wx:key="index">
        <chat-message
          wx:if="{{virtualList ? index >= startIndex && index <= endIndex : true}}"
          avatar="{{item.avatar || ''}}"
          name="{{item.name || ''}}"
          datetime="{{item.datetime || ''}}"
          content="{{item.content}}"
          role="{{item.role}}"
          placement="{{ layout === 'both' ? (item.role === 'user' ? 'right' : 'left') : 'left' }}"
          animation="{{animation}}"
          status="{{item.status || ''}}"
        />
      </block>
    </block>
    <slot wx:else />
  </scroll-view>
  <view class="{{classPrefix}}__footer">
    <slot name="footer" />
  </view>
</view>
