<wxs
  src="./index.wxs"
  module="util"
></wxs>
<view class="ant-swipe">
  <view
    class="ant-swipe-action"
    style="width: {{util.getWidth(rightWidth, leftWidth, inertiaWidth)}};"
  >
    <movable-area
      wx:if="{{ready}}"
      class="ant-swipe-action-movable"
      style="margin-left: {{util.getMarginLeft(rightWidth, leftWidth, inertiaWidth)}}"
    >
      <movable-view
        class="ant-swipe-action-movable-content"
        style="width:{{util.getWidth2(rightWidth, leftWidth, inertiaWidth)}}; margin-left: {{util.getMarginLeft2(rightWidth, leftWidth, inertiaWidth)}};"
        x="{{swipeX}}"
        data-type="content"
        animation="{{animation}}"
        damping="{{damping}}"
        direction="horizontal"
        outOfBounds="{{false}}"
        disabled="{{disabled}}"
        bindtap="onSwipeTap"
        bindchange="onChange"
        bindchangeend="onChangeEnd"
        catchtouchend="onTouchEnd"
        bindtouchcancel="onTouchCancel"
        catchtouchstart="onTouchStart"
      >
        <view
          class="ant-swipe-action-movable-content-view"
          style="{{util.getSlotWidthStyle(rightWidth, leftWidth, _leftButtons, _rightButtons, inertiaWidth)}}"
          bindtap="onClick"
        >
          <view
            wx:if="{{swipedR || swipedL}}"
            class="ant-swipe-action-movable-content-view-modal"
          ></view>
          <slot></slot>
        </view>
      </movable-view>
      <movable-view
        class="ant-swipe-action-movable-content ant-swipe-action-movable-right{{$id ? '-' + $id : ''}}"
        damping="{{damping}}"
        style="{{util.getRightMovableContentStyle(tapTypeR, idx, rightWidth, leftWidth, inertiaWidth)}}"
        data-type="content"
        animation="{{false}}"
        disabled="{{true}}"
        direction="horizontal"
        x="{{moveX * (util.getMoveX(_rightButtons, idx) / rightWidth)}}"
        wx:for="{{_rightButtons}}"
        wx:for-index="idx"
        wx:for-item="item"
        key="{{idx}}"
      >
        <view
          class="ant-swipe-action-movable-content-right"
          style="background: {{item.bgColor}};width: {{(item.width + inertiaWidth + 1) / 2}}px;"
        >
          <view
            class="ant-swipe-action-movable-content-right-text"
            bindtap="onItemTap"
            data-item="{{util.axmlObj({ item, idx })}}"
            aria-hidden="{{!swipedR}}"
            style="{{util.getMovableContentRightStyle(item, tapTypeR, idx, rightWidth, inTouch, inertiaWidth, myStyle)}}"
          >
            <slot
              name="{{util.getRightSlotName(tapTypeR, idx, item)}}"
              wx:if="{{util.getRightSlotName(tapTypeR, idx, item)}}"
            ></slot>
            <!--display: inline-->
            <text
              wx:else
              class="right-text {{util.getLeft(tapTypeR, idx, _rightButtons, true)}}"
            >{{util.getRightText(tapTypeR, idx, item)}}</text>
          </view>
        </view>
      </movable-view>
      <movable-view
        class="ant-swipe-action-movable-content ant-swipe-action-is-right-swipe ant-swipe-action-movable-left{{$id ? '-' + $id : ''}}"
        damping="{{damping}}"
        style="{{util.getLeftMovableContentStyle(tapTypeL, idx, leftWidth, inertiaWidth)}}"
        data-type="content"
        animation="{{false}}"
        disabled="{{true}}"
        direction="horizontal"
        x="{{moveX * (util.getMoveX(_leftButtons, idx) / leftWidth)}}"
        wx:for="{{_leftButtons}}"
        wx:for-index="idx"
        wx:for-item="itemL"
        key="{{'left-' + idx}}"
      >
        <view
          class="ant-swipe-action-movable-content-left"
          style="background: {{tapTypeL && tapTypeL === 'L-' + idx && _leftButtons.length === 3 && idx === 1 ? 'none' : itemL.bgColor}};width: {{(leftWidth + inertiaWidth) / 2}}px"
        >
          <view
            class="ant-swipe-action-movable-content-left-text1 ant-swipe-action-left"
            bindtap="onItemTap"
            data-item="{{util.axmlObj({ itemL, idx })}}"
            aria-hidden="{{!swipedL}}"
            style="{{util.getMovableContentLeftStyle(itemL, tapTypeL, idx, leftWidth, inTouch, inertiaWidth, myStyle)}}"
          >
            <slot
              name="{{util.getLeftSlotName(tapTypeL, idx, itemL)}}"
              wx:if="{{util.getLeftSlotName(tapTypeL, idx, itemL)}}"
            ></slot>
            <!--display: inline-->
            <text
              wx:else
              class="right-text"
              style="width: 100%"
            >
              <!--display: inline-->
              <text class="right-text {{util.getLeft(tapTypeL, idx, _leftButtons, false)}}">{{util.getLeftText(tapTypeL, idx, itemL)}}</text>
            </text>
          </view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</view>