<view
  class="ant-popover {{showMask && mixin.value ? 'ant-popover-children' : ''}} {{className ? className : ''}}"
  style="{{style || ''}}"
>
  <view
    id="ant-popover-children{{$id ? '-' + $id : ''}}"
    onTap="onVisibleChange"
  >
    <slot></slot>
  </view>
  <view
    a:if="{{!destroyOnClose || mixin.value}}"
    hidden="{{!mixin.value}}"
    id="ant-popover-content{{$id ? '-' + $id : ''}}"
    class="ant-popover-content ant-popover-{{adjustedPlacement}}"
    style="{{popoverContentStyle}}; {{adjustedPlacement ? '' : 'opacity: 0'}}"
  >
    <view
      class="ant-popover-arrow ant-popover-{{adjustedPlacement}}-arrow"
      style="{{color ? 'border-bottom-color:' + color : ''}}"
    ></view>
    <view
      class="ant-popover-inner {{contentClassName || ''}}"
      style="{{color ? 'background:' + color : ''}};{{contentStyle || ''}}"
    >
      <view
        a:if="{{imageUrl}}"
        class="ant-popover-image"
      >
        <image-icon
          className="ant-popover-image-content"
          image="{{imageUrl}}"
        ></image-icon>
      </view>
      <slot
        name="leftContent"
        a:else
      ></slot>
      <slot name="content">
        <view class="ant-popover-inner-text">
          {{content}}
        </view>
      </slot>
      <view
        a:if="{{actionText}}"
        onTap="onTapAction"
        class="ant-popover-action"
      >
        {{actionText}}
      </view>
      <slot
        name="rightContent"
        a:else
      ></slot>
      <view
        a:if="{{showCloseIcon}}"
        onTap="onVisibleChange"
        class="ant-popover-close"
      >
        <image-icon
          className="ant-popover-close-icon"
          image="CloseOutline"
        ></image-icon>
      </view>
    </view>
  </view>
</view>
<ant-mask
  show="{{showMask && mixin.value}}"
  id="ant-popover-mask{{$id ? '-' + $id : ''}}"
  className="ant-popover-mask {{maskClassName || ''}}"
  style="{{maskStyle}}"
  onMaskTap="onVisibleChange"
></ant-mask>