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

<view
  class="{{classPrefix}} {{[inChat ? classPrefix + '--chatting' : '', _this.getFileTypeClass(inChat, files)]}}"
  style="{{_._style([style, customStyle])}}"
>
  <view class="{{classPrefix}}__left">
    <view class="{{classPrefix}}__scrollable scroll-x">
      <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
        <view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
          <block wx:if="{{item.fileType==='image'}}">
            <view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
              <block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}">
                <view class="{{item.status}} {{classPrefix}}__file--{{item.status}}">
                  <t-loading theme="circular" size="48rpx" />
                </view>
              </block>
              <block wx:else>
                <image
                  class="image"
                  src="{{item.url}}"
                  mode="{{_this.getImageMode(item)}}"
                  lazy-load="false"
                  style="{{inChat ? _this.imageStyle(item) : ''}}"
                ></image>
              </block>
              <view wx:if="{{removable}}" class="{{classPrefix}}__remove">
                <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
              </view>
            </view>
          </block>
          <block wx:else>
            <view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
              <view class="image">
                <block wx:if="{{item.status==='pending'}}">
                  <view class="loading {{classPrefix}}__file--pending">
                    <t-loading theme="circular" size="48rpx" />
                  </view>
                </block>
                <block wx:elif="{{item.status==='fail'}}">
                  <view class="fail {{classPrefix}}__file--fail">
                    <t-loading theme="circular" size="48rpx" />
                  </view>
                </block>
                <block wx:elif="{{item.status==='error'}}">
                  <view class="error {{classPrefix}}__file--error">
                    <t-loading theme="circular" size="48rpx" />
                  </view>
                </block>
                <block wx:else>
                  <t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon>
                </block>
              </view>
              <view class="{{classPrefix}}__content">
                <view class="{{classPrefix}}__title">{{item.name}}</view>
                <block>
                  <view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc"
                    >{{globalConfig.status['pending']}} {{item.progress || 0+"%"}}</view
                  >
                  <view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc"
                    >{{globalConfig.status['fail']}}</view
                  >
                  <view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view>
                  <view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view>
                </block>
              </view>
              <view wx:if="{{removable}}" class="{{classPrefix}}__remove">
                <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
              </view>
            </view>
          </block>
        </view>
      </block>
    </view>
  </view>
</view>
