<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />

<view class="aio-uploader">
  <view class="aio-uploader__wrapper">
    <!-- 预览样式 -->
    <view
      wx:if="{{ previewImage }}"
      wx:for="{{ lists }}"
      wx:key="index"
      class="aio-uploader__preview"
      data-index="{{ index }}"
      bindtap="onClickPreview"
    >
      <image
        wx:if="{{ item.isImage }}"
        mode="{{ imageFit }}"
        src="{{ item.thumb || item.url }}"
        alt="{{ item.name || ('图片' + index) }}"
        class="aio-uploader__preview-image"
        style="{{ computed.sizeStyle({ previewSize }) }}"
        data-index="{{ index }}"
        bindtap="onPreviewImage"
      />
      <video
        wx:elif="{{ item.isVideo }}"
        src="{{ item.url }}"
        title="{{ item.name || ('视频' + index) }}"
        poster="{{ item.thumb }}"
        autoplay="{{ item.autoplay }}"
        object-fit="{{videoFit}}"
        referrer-policy="{{videoReferrerPolicy}}"
        class="aio-uploader__preview-image"
        style="{{ computed.sizeStyle({ previewSize }) }}"
        data-index="{{ index }}"
        bindtap="onPreviewVideo"
      >
      </video>
      <view
        wx:else
        class="aio-uploader__file"
        style="{{ computed.sizeStyle({ previewSize }) }}"
        data-index="{{ index }}"
        bindtap="onPreviewFile"
      >
        <aio-image name="photo-24px" class="aio-uploader__file-icon" />
        <view class="aio-uploader__file-name aio-ellipsis">{{ item.name || item.url }}</view>
      </view>
      <view
        wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
        class="aio-uploader__mask"
      >
       <aio-image wx:if="{{ item.status === 'failed' }}" name="feedback3-60px" class="aio-uploader__mask-icon" />
       <aio-loading wx:else custom-class="aio-uploader__loading" />
       <text wx:if="{{ item.message }}" class="aio-uploader__mask-message">{{ item.message }}</text>
      </view>
      <view
        wx:if="{{ deletable && item.deletable }}"
        data-index="{{ index }}"
        class="aio-uploader__preview-delete"
        catch:tap="deleteItem"
      >
        <aio-image name="cross-16px" width="60" height="60" class="aio-uploader__preview-delete-icon" />
      </view>
    </view>

    <!-- 上传样式 -->
    <block wx:if="{{ isInCount }}">
      <view class="aio-uploader__slot" bindtap="startUpload">
        <slot />
      </view>

      <!-- 默认上传样式 -->
      <view
        wx:if="{{ showUpload }}"
        class="aio-uploader__upload {{ disabled ? 'aio-uploader__upload--disabled': ''}} uploader-class"
        style="{{ computed.sizeStyle({ previewSize }) }}"
        bindtap="startUpload"
      >
        <aio-image name="{{ uploadIcon }}" width="{{ iconSize }}" height="{{ iconSize }}" class="aio-uploader__upload-icon" />
        <text wx:if="{{ uploadText }}" class="aio-uploader__upload-text">{{ uploadText }}</text>
      </view>
    </block>
  </view>
</view>
