<template>
  <van-overlay :z-index="zIndex" :show="modelValue" :lock-scroll="lockScroll">
    <div
      class="center-popup"
      :style="{ width: width, top: top, backgroundColor: contentBgcolor }"
    >
      <div class="title">
        <p class="text">
          <slot name="title">{{ title }}</slot>
        </p>
        <h-img v-if="showClose" class="close" src="base/close.png" @click="onClose" />
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: { type: Boolean, default: false, required: true },
  title: { type: String, default: "", required: false },
  contentBgcolor: { type: String, default: "#fff", required: false },
  width: { type: String, default: "90%", requiref: false },
  top: { type: String, default: "20%", requiref: false },
  lockScroll: { type: Boolean, default: true, required: false },
  zIndex: { type: Number, default: 999, required: false },
  showClose: { type: Boolean, default: true, required: false }
});
const emit = defineEmits(["update:modelValue", "on-close"]);
async function onClose() {
  emit("update:modelValue", false);
  emit("on-close", false);
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
