<import-sjs
  from="./index.sjs"
  name="utils"
></import-sjs>
<ant-popup
  className="ant-dialog {{className || ''}}"
  style="{{style || ''}}"
  maskClassName="{{maskClassName}}"
  maskStyle="{{maskStyle}}"
  visible="{{visible}}"
  duration="{{duration}}"
  position="center"
  animation="{{animation}}"
  zIndex="{{zIndex}}"
  destroyOnClose="{{destroyOnClose}}"
  onClose="onMaskClose"
>
  <slot name="dialog-top"></slot>
  <slot>
    <view
      class="ant-dialog-body {{bodyClassName || ''}}"
      style="{{bodyStyle || ''}}"
    >
      <slot name="header"></slot>
      <image
        a:if="{{headerImage}}"
        class="ant-dialog-body-header"
        mode="widthFix"
        src="{{headerImage}}"
      ></image>
      <slot name="title">
        <view
          a:if="{{title}}"
          class="ant-dialog-body-title"
        >
          {{title}}
        </view>
      </slot>
      <slot name="content">
        <view
          a:if="{{content}}"
          class="ant-dialog-body-content"
        >
          {{content}}
        </view>
      </slot>
      <slot name="content-extra"></slot>
      <slot name="footer">
        <view class="ant-dialog-body-footer ant-dialog-body-footer-{{footer.layout || 'vertical'}}">
          <view
            data-item="{{item}}"
            onTap="onButtonTap"
            class="ant-dialog-body-footer-button"
            style="flex: 1;"
            a:for="{{footer.buttons}}"
            a:for-index="index"
            a:for-item="item"
            key="{{item['id']}}"
          >
            <ant-button
              disabled="{{item.disabled}}"
              danger="{{item.danger}}"
              icon="{{item.icon}}"
              size="{{item.size}}"
              style="{{item.style}}"
              activeClassName="{{item.activeClassName}}"
              className="{{item.className}}"
              type="{{item.type || 'primary'}}"
            >
              {{item.text}}
            </ant-button>
          </view>
        </view>
      </slot>
    </view>
  </slot>
  <ant-icon
    a:if="{{closable}}"
    type="CloseCircleOutline"
    onTap="onClose"
    className="ant-dialog-close"
  ></ant-icon>
</ant-popup>