<template>
  <Overlay :show="show">
    <view class="bg-white wrapper flex flex-col rounded-[16rpx]" :style="{ width: defaultWidth }">
      <view
        class="relative flex items-center w-full justify-center py-[26rpx] title"
        v-show="title"
      >
        <text class="text-[36rpx] text-[#303030] font-bold text-center">
          {{ title }}
        </text>

        <view
          class="i-carbon-close absolute right-[40rpx] text-[40rpx]"
          @click="emits('update:show', false)"
          v-if="showClose"
        ></view>
      </view>
      <view
        class="min-h-[200rpx] h-max-content overflow-y-auto"
        :class="{ 'px-[32rpx]': defaultPadding }"
      >
        <slot></slot>
      </view>
    </view>
  </Overlay>
</template>

<script setup lang="ts">
import Overlay from '@/pages-sub/components/overlay/Overlay.vue'

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '提示',
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  defaultPadding: {
    type: Boolean,
    default: true,
  },
  defaultWidth: {
    type: String,
    default: '90%',
  },
})

const emits = defineEmits(['update:show'])
</script>

<style scoped lang="scss">
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max-content;

  .title {
    border-bottom: 2rpx solid #f7f7f7;
  }
}
</style>
