<template>
  <uni-popup ref="popup" :type="props.dir" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.5)">
    <view class="Mask" id="msk" :style="{ alignItems: position[type] }" @tap.stop="maskClose($event)">
      <view class="wrapper" @tap.stop>
        <slot></slot>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from "vue"
const emits = defineEmits(["onClose", "onOpen"])
const props = defineProps({
  dir: {
    type: String,
    default: "bottom",
  },
  type: {
    type: String,
    default: "bottom",
  },
  mask: {
    type: Boolean,
    default: false,
  },
})
const position = reactive({
  bottom: "flex-end",
  top: "flex-start",
  center: "center",
})
const popup = ref()
const close = () => {
  emits("onClose")
  popup.value.close()
}
const open = () => {
  emits("onOpen")
  popup.value.open()
}
const maskClose = (e) => {
  if (props.mask) return
  if (e.target.id === "msk") return close()
}

defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.Mask {
  position: relative;
  z-index: 999999999;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  // background: rgba(0, 0, 0, 0.5);
  // backdrop-filter: blur(30rpx);
  .wrapper {
    flex: 1;
  }
}
</style>
