<template>
  <div
    v-show="maskLayerShow"
    style="
      width: 100vw;
      height: 100vh;
      background-color: #00000080;
      position: fixed;
      inset: 0;
      z-index: 999;
    "
    @touchmove.prevent
  >
    <div style="position: absolute; inset: 0; overflow-y: auto" @touchmove.stop>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const props = defineProps({
  maskLayerShow: {
    type: Boolean,
    required: true,
  },
})

// 监听遮罩层显示状态，控制背景页面滚动
watch(
  () => props.maskLayerShow,
  (newVal) => {
    if (newVal) {
      // 禁用背景页面滚动
      document.body.style.overflow = 'hidden'
      document.body.style.touchAction = 'none'
    } else {
      // 恢复背景页面滚动
      document.body.style.overflow = ''
      document.body.style.touchAction = ''
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
* {
  color: black;
}
</style>
