<import-sjs
  from="./index.sjs"
  name="helper"
></import-sjs>
<ant-popup
  className="ant-actionsheet-popup"
  visible="{{visible}}"
  position="bottom"
  zIndex="{{zIndex}}"
  onClose="onClose"
>
  <view
    style="{{style}}"
    class="ant-actionsheet {{className ? className : ''}} {{helper.isIconMode(actions) ? 'ant-actionsheet-icon' : ''}}"
  >
    <slot name="title">
      <view
        a:if="{{title}}"
        class="ant-actionsheet-title-wrap"
      >
        <view class="ant-actionsheet-title-content">{{title}}</view>
      </view>
    </slot>
    <view class="ant-actionsheet-list">
      <block
        a:for="{{actions}}"
        a:for-index="index"
        a:for-item="item"
        key="{{index}}"
      >
        <view
          class="ant-actionsheet-list-item {{item.disabled ? 'ant-actionsheet-list-item-disabled' : ''}}"
          hoverClass="{{item.disabled ? '' : 'ant-actionsheet-list-item-active'}}"
          onTap="onAction"
          data-index="{{index}}"
          data-item="{{item}}"
        >
          <view
            a:if="{{helper.isIconMode(actions)}}"
            class="ant-actionsheet-list-item-icon"
            style="background-image: url('{{item.icon}}')"
          ></view>
          <view class="ant-actionsheet-list-item-content">
            <view class="ant-actionsheet-list-item-title {{item.danger ? 'ant-actionsheet-list-item-title-danger' : ''}}">
              {{item.text}}
            </view>
            <view
              a:if="{{item.description}}"
              class="ant-actionsheet-list-item-description"
            >
              {{item.description}}
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="ant-actionsheet-cancel-gap"></view>
    <slot name="cancelText">
      <view
        class="ant-actionsheet-cancel"
        onTap="onClose"
      >
        {{cancelText}}
      </view>
    </slot>
  </view>
</ant-popup>