<script setup>
/*
* 封装一个带标题栏的弹窗
* */
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title:''
})
const emit = defineEmits(['update:show'])
const close=()=>{
  emit('update:show',false)
}
</script>

<template>
  <van-popup
      :show="show"
      teleport="#__nuxt"
      position="bottom"
      :style="{ height: '74%' }"
      v-bind="{...$attrs,...$props}"
  >
    <div class="flex flex-col h-full">
      <!-- 标题栏 -->
      <div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0">

        <slot v-if="$slots.title" name="title">
        </slot>
        <div v-else class="text-black text-16px">{{ title }}</div>
        <van-icon
            class="ml-auto"
            size="20"
            name="cross"
            color="#939393"
            @click="close"
        />
      </div>

      <!-- 内容区域 -->
      <div class="flex-1 px-16px py-18px overflow-hidden relative">
        <div class="h-full overflow-y-auto relative">
          <slot/>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style scoped>

</style>