<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"
  >
    <view class="popup_slot_content">
      <slot></slot>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
const props = defineProps(['show', 'mode', 'insetBottom', 'round', 'closeable', 'bgColor'])
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;
}
.popup_slot_content {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background-color: #f8f8f8;
  overflow: hidden;
  // background:
  //   linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 56%),
  //   linear-gradient(151deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 32%),
  //   linear-gradient(199deg, #dffff3 0%, #f7f7f7 33%);
}
</style>
