<!--packageE/button/button.wxml-->
<wxs module="util">
  var inOf = function(val, str) { if (val) {return val.indexOf(str) }};
  module.exports.inOf = inOf;
</wxs>
<view class="component-wrapper {{'component-'+ component_id}}">

    <!-- 列表 -->
    <view  wx:if="{{datas.list.length <= 0}}" style="text-align: center;font-size: 16px;line-height: 32px">
      请先添加按钮
    </view>
    <view class="ul button-box" style="padding: {{datas.padding_top}}px  0 {{datas.padding_bottom}}px 0; background-color: {{datas.preview_color.color}};background-image: url({{datas.preview_color.isColor == 2? datas.preview_color.image: ''}}); background-size: 100% 100%; bakcground-position: center;" wx:if="{{datas.list.length > 0 && !datas.is_scroll}}">
      <view class="li" style="width: {{datas.button_number == 4?'25':'20'}}%"  wx:for="{{datas.list}}"  wx:key="id" wx:for-index="index" wx:for-item="item">
        <view catchtap="goimgurl" class="item" data-item="{{item}}">
          <yz-image custom-class="button-img" custom-style="width: {{datas.button_size}}px; height: {{datas.button_size}}px; border-radius: {{datas.border_radius}}px" src="{{item.image || emptyImage}}" mode='aspectFill' />
          <view class="button-title" style="font-size: {{datas.font_size}}px; color: {{datas.font_color}}; font-weight: {{ util.inOf(datas.text_style,'1') > -1 ? 'bold':''}}; font-style: {{ util.inOf(datas.text_style,'2') > -1 ? 'italic':''}};">{{ item.text }}</view>
          <view class="button-desc" wx:if="{{item.desc}}">{{ item.desc }}</view>
        </view>
      </view>
    </view>
    <swiper style="width: 100vw;height: {{datas.button_line * (datas.button_size+50) + 20}}px"  wx:if="{{datas.list.length > 0 && datas.is_scroll}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="{{datas.list.length == 1?false:true}}" indicator-color="{{datas.slides_default_color}}" indicator-active-color="{{datas.slides_active_color}}">
      <!-- slides -->
      <block wx:for="{{scroll_list}}" wx:key="idx" wx:for-index="idx" wx:for-item="items">
        <swiper-item class="button-box" style="padding: {{datas.padding_top}}px  0 {{datas.padding_bottom}}px 0; background-color: {{datas.preview_color.color}};background-image: url({{datas.preview_color.isColor == 2? datas.preview_color.image: ''}}); background-size: 100% auto; bakcground-position: center;">
            <view class="li" style="width: {{datas.button_number == 4?'25':'20'}}%" wx:for="{{items}}" wx:key="id" wx:for-index="index" wx:for-item="item">
                <view catchtap="goimgurl" class="item" data-item="{{item}}">
                    <yz-image custom-class="button-img" custom-style="width: {{datas.button_size}}px; height: {{datas.button_size}}px; border-radius: {{datas.border_radius}}px" src="{{item.image || emptyImage}}" mode='aspectFill' />
                    <view class="button-title"  style="font-size: {{datas.font_size}}px; color: {{datas.font_color}}; font-weight: {{ util.inOf(datas.text_style,'1') > -1 ? 'bold':''}}; font-style: {{ util.inOf(datas.text_style,'2') > -1 ? 'italic':''}};">{{ item.text }}</view>
                    <view class="button-desc" style="color: {{datas.desc_color}};" wx:if="{{item.desc}}">{{ item.desc }}</view>
                </view>
            </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
