<template>
  <up-popup
    :customStyle="props?.insetBottom ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' } : {}"
    :overlayStyle="props?.insetBottom ? { bottom: 'calc(env(safe-area-inset-bottom) + 48px)' } : {}"
    :show="props.show"
    @close="onClose"
    :mode="props?.mode || 'top'"
    :round="props?.round || 0"
    :closeable="props?.closeable"
    :bgColor="props?.bgColor || 'transparent'"
  >
    <view class="bind_house_popup">
      <view class="bind_house_popup_content">
        <!-- <image src="/static/svg/news_icon.svg" class="news_icon_absolute" mode="heightFix" /> -->
        <view class="bind_title"> {{ props?.title || '消息通知' }} </view>
        <slot></slot>
      </view>
      <slot name="footer"></slot>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
const props = defineProps(['show', 'mode', 'insetBottom', 'round', 'closeable', 'bgColor', 'title'])
const emit = defineEmits(['close'])

const onClose = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
:deep(.u-transition) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 48px) !important;
}
.bind_house_popup_content {
  background-color: #fff;
  // background: linear-gradient(180deg, #d9e7ff 0%, #fdfeff 26%, #ffffff 47%);
  width: 618rpx;
  padding: 0 0 20rpx 0;
  border-radius: 40rpx;
  position: relative;
  color: #333333;
  .news_icon_absolute {
    height: 160rpx;
    position: absolute;
    right: 7rpx;
    top: 20rpx;
  }
  .bind_title {
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
    padding: 50rpx 0;
  }
}
</style>
