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

<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
  <t-grid gutter="{{gutter}}" border="{{false}}" align="center" column="{{column}}">
    <!-- 图片/视频 -->
    <t-grid-item
      wx:for="{{customFiles}}"
      wx:key="index"
      wx:for-item="file"
      t-class="{{classPrefix}}__grid {{classPrefix}}__grid-file"
      t-class-content="{{classPrefix}}__grid-content"
    >
      <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
        <t-image
          wx:if="{{file.type !== 'video'}}"
          bindtap="onProofTap"
          data-index="{{index}}"
          t-class="{{classPrefix}}__thumbnail"
          style="{{imageProps.style || ''}}"
          src="{{file.url}}"
          mode="{{imageProps.mode || 'aspectFill'}}"
          error="{{imageProps.error || 'default'}}"
          lazy="{{imageProps.lazy || false}}"
          loading="{{imageProps.loading || 'default'}}"
          shape="{{imageProps.shape || 'round'}}"
          webp="{{imageProps.webp || false}}"
          showMenuByLongpress="{{imageProps.showMenuByLongpress || false}}"
        />
        <video
          wx:if="{{file.type === 'video'}}"
          class="{{classPrefix}}__thumbnail"
          src="{{file.url}}"
          controls
          autoplay="{{false}}"
          objectFit="contain"
        />
        <!-- 失败重试 -->
        <view
          data-index="{{index}}"
          wx:if="{{file.status && file.status != 'done'}}"
          class="{{classPrefix}}__progress-mask"
          data-file="{{file}}"
          bind:tap="onFileClick"
        >
          <block wx:if="{{file.status == 'loading'}}">
            <t-icon t-class="{{classPrefix}}__progress-loading" name="loading" size="24" />
            <view class="{{classPrefix}}__progress-text">{{file.percent ? file.percent + '%' : '上传中...'}}</view>
          </block>
          <t-icon wx:else name="{{file.status == 'reload' ? 'refresh' : 'close-circle'}}" size="24" />
          <view wx:if="{{file.status == 'reload' || file.status == 'failed'}}" class="{{classPrefix}}__progress-text"
            >{{file.status == 'reload' ? '重新上传' : '上传失败'}}</view
          >
        </view>
        <!-- 删除 -->
        <view class="{{classPrefix}}__close-btn hotspot-expanded" bindtap="onDelete" data-index="{{index}}">
          <t-icon name="close" size="16" color="#fff" />
        </view>
      </view>
    </t-grid-item>
    <!-- 添加 -->
    <t-grid-item
      wx:if="{{customLimit > 0}}"
      t-class="{{classPrefix}}__grid"
      t-class-content="{{classPrefix}}__grid-content"
      bindclick="onAddTap"
    >
      <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
        <slot name="add-content" />
        <block wx:if="{{addContent}}">{{addContent}}</block>
        <view wx:else class="{{classPrefix}}__add-icon">
          <t-icon name="add" />
        </view>
      </view>
    </t-grid-item>
  </t-grid>
</view>
