<import-sjs
  from="./index.sjs"
  name="utils"
></import-sjs>
<ant-popup
  className="ant-modal {{className || ''}}"
  style="{{style || ''}}"
  maskClassName="{{maskClassName}}"
  maskStyle="{{maskStyle}}"
  visible="{{visible}}"
  duration="{{duration}}"
  position="center"
  animation="{{animation}}"
  zIndex="{{zIndex}}"
  destroyOnClose="{{destroyOnClose}}"
  onClose="onMaskClose"
>
  <slot>
    <view
      class="ant-modal-body {{bodyClassName || ''}}"
      style="{{bodyStyle || ''}}"
    >
      <slot name="header"></slot>
      <slot name="title">
        <view
          a:if="{{title}}"
          class="ant-modal-body-title"
        >
          {{title}}
        </view>
      </slot>
      <slot name="content">
        <view
          a:if="{{content}}"
          class="ant-modal-body-content"
        >
          {{content}}
        </view>
      </slot>
      <slot name="footer">
        <view
          a:if="{{type === 'focus'}}"
          class="ant-modal-body-footer-focus"
        >
          <ant-button
            type="primary"
            className="ant-modal-body-footer-focus-primary"
            style="{{primaryButtonStyle || ''}}"
            onTap="onPrimaryButtonTap"
          >
            {{primaryButtonText}}
          </ant-button>
          <view
            a:if="{{secondaryButtonText}}"
            class="ant-modal-body-footer-focus-secondary"
            style="{{secondaryButtonStyle || ''}}"
            onTap="onSecondaryButtonTap"
          >
            {{secondaryButtonText}}
          </view>
          <view
            a:if="{{cancelButtonText}}"
            class="ant-modal-body-footer-focus-cancel"
            style="{{cancelButtonStyle || ''}}"
            onTap="onCancelButtonTap"
          >
            {{cancelButtonText}}
          </view>
        </view>
        <view
          a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal'}}"
          class="ant-modal-body-footer-horizontal"
        >
          <view
            a:if="{{cancelButtonText}}"
            class="ant-modal-body-footer-horizontal-cancel"
            style="{{cancelButtonStyle || ''}}"
            onTap="onCancelButtonTap"
          >
            {{cancelButtonText}}
          </view>
          <view
            a:if="{{secondaryButtonText}}"
            class="ant-modal-body-footer-horizontal-secondary"
            style="{{secondaryButtonStyle || ''}}"
            onTap="onSecondaryButtonTap"
          >
            {{secondaryButtonText}}
          </view>
          <view
            a:if="{{primaryButtonText}}"
            class="ant-modal-body-footer-horizontal-primary"
            style="{{primaryButtonStyle || ''}}"
            onTap="onPrimaryButtonTap"
          >
            {{primaryButtonText}}
          </view>
        </view>
        <view
          a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical'}}"
          class="ant-modal-body-footer-vertical"
        >
          <view
            a:if="{{primaryButtonText}}"
            class="ant-modal-body-footer-vertical-primary"
            style="{{primaryButtonStyle || ''}}"
            onTap="onPrimaryButtonTap"
          >
            {{primaryButtonText}}
          </view>
          <view
            a:if="{{secondaryButtonText}}"
            class="ant-modal-body-footer-vertical-secondary"
            style="{{secondaryButtonStyle || ''}}"
            onTap="onSecondaryButtonTap"
          >
            {{secondaryButtonText}}
          </view>
          <view
            a:if="{{cancelButtonText}}"
            class="ant-modal-body-footer-vertical-cancel"
            style="{{cancelButtonStyle || ''}}"
            onTap="onCancelButtonTap"
          >
            {{cancelButtonText}}
          </view>
        </view>
      </slot>
    </view>
  </slot>
  <ant-icon
    a:if="{{type === 'focus' && closable}}"
    type="CloseOutline"
    onTap="onClose"
    className="ant-modal-close"
  ></ant-icon>
</ant-popup>