<!--static/nativeComponents/PhotoGallery/index.wxml-->
<view class="photo-gallery" style="padding-top:{{datas.componentData.paddingList[0]['value'] * 2}}rpx;padding-bottom:{{datas.componentData.paddingList[1]['value'] * 2}}rpx;padding-left:{{datas.componentData.paddingList[2]['value'] * 2}}rpx;padding-right:{{datas.componentData.paddingList[3]['value'] * 2}}rpx">
  <view wx:if="{{datas.componentData.titles!=''}}" style="font-size:{{datas.componentData.titleSize}}em;padding-bottom:{{datas.componentData.titlePadding * 2}}rpx" class="textH">
    {{datas.componentData.titles}}
  </view>
  <view wx:if="{{datas.componentData.style==='list'}}">
    <view class="imgcontent imgBox" bindtap="itemClick" data-item="{{item}}" wx:for="{{imgList}}"  wx:key="index" style="margin-bottom:{{datas.componentData.imgPadding * 2}}rpx">
      <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}px;left: {{item1.renderLeft}}px;"></view>
      <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;width:{{imgArr[index].width}}px;height:{{ imgArr[index].height }}px"></image>
    </view>
  </view>
  <view wx:elif="{{datas.componentData.style==='across' || datas.componentData.style==='tiled'}}" class="across">
    <view class="prev-btn" wx:if="{{datas.componentData.style==='across'}}">
      <i class="iconfont-common common-iconyoujiantou"></i>
    </view>
    <view class="next-btn" wx:if="{{datas.componentData.style==='across'}}">
      <i class="iconfont-common common-iconyoujiantou"></i>
    </view>
    <view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul {{datas.componentData.style==='tiled'?'isTiled':''}} {{showImg ? 'show': 'hide'}}">
      <view bindtap="itemClick" data-item="{{item}}" wx:for="{{imgList}}" wx:key="index" style="margin-right:{{index===(imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li imgBox">
        <view class="hotZone" bindtap="itemClick" wx:for="{{item.hotList}}"  wx:key="index1" wx:for-item="item1" wx:for-index="index1" data-item="{{item1}}" style="width: {{item1.renderWidth}}px;height: {{item1.renderHeight}}px;top: {{item1.renderTop}}px;left: {{item1.renderLeft}}px;"></view>
        <image src="{{item.imageUrl}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;width:{{imgArr[index].width}}px;height:{{ imgArr[index].height }}px" bindload="bindload" data-index="{{index}}"></image>
      </view>
    </view>
  </view>
  <view wx:elif="{{datas.componentData.style==='waterfall'}}" class="waterfall">
    <view class="waterfall-l">
      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListL}}" :wx:key="index" class="item imgBox">
        <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
      </view>
    </view>
    <view class="waterfall-r">
      <view  bindtap="itemClick" data-item="{{item}}" wx:for="{{WaterfallFlowListR}}" :wx:key="index" class="item imgBox">
        <image bindload="bindload" data-index="{{index}}" src="{{item.imageUrl}}" mode="widthFix" style="border-radius:{{2*(datas.componentData['radius']/100)}}em"></image>
      </view>
    </view>
  </view>
</view>