<wux-backdrop id="wux-backdrop" wx:if="{{ mask }}" bind:click="onMaskClick" zIndex="{{ zIndex }}" />
<view class="wux-class {{ classes.wrap }}" style="{{ popupWrapStyle }}">
    <wux-animation-group
        wux-class="{{ prefixCls }}"
        in="{{ popupVisible }}"
        classNames="{{ transitionName }}"
        mountOnEnter="{{ mountOnEnter }}"
        unmountOnExit="{{ unmountOnExit }}"
        wrapStyle="{{ { ...popupContainerStyle, zIndex } }}"
        bind:enter="onEnter"
        bind:entered="onEntered"
        bind:exited="onExited"
    >
        <view class="wux-content-class {{ classes.content }}" style="{{ popupContentStyle }}">
            <view class="wux-header-class {{ classes.hd }}" wx:if="{{ hasHeader }}">
                <view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view>
                <block wx:else>
                    <slot name="header"></slot>
                </block>
            </view>
            <view class="wux-body-class {{ classes.bd }}" style="{{ popupBodyStyle }}">
                <view wx:if="{{ content }}">{{ content }}</view>
                <slot></slot>
            </view>
            <view class="wux-footer-class {{ classes.ft }}" wx:if="{{ hasFooter }}">
                <view class="{{ classes.extra }}" wx:if="{{ extra }}">{{ extra }}</view>
                <block wx:else>
                    <slot name="footer"></slot>
                </block>
            </view>
            <view class="wux-close-class {{ classes.close }}" wx:if="{{ closable }}" bindtap="close">
                <text class="{{ classes.x }}"></text>
            </view>
            <wux-safe-area
                safeArea="{{ safeArea }}"
                wx:if="{{ safeArea && position === 'bottom' }}"
            />
        </view>
    </wux-animation-group>
</view>
