<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"
      :transition-appear="true"
      teleport="#__nuxt"
      position="bottom"
      @click-overlay="close"
      :style="{ height: '74%' }"
      v-bind="{...$attrs,...$props}"
      :safe-area-inset-bottom="true"
  >
    <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 relative w-full">
        <slot v-if="$slots.title" name="title">
        </slot>
        <div v-else class="text-black text-16px text-center flex-grow-1">{{ title }}</div>
        <van-icon
            style="position: absolute"
            class="right-19px"
            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 list-container">
          <slot/>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style scoped>

</style>